<template>
    <div class="flx font12" style="justify-content: flex-end">
        <div style="padding-top: 28px; margin-right: 20px; color: #606266" v-if="F.includes(routeName)">
            总入库数量 : <span style="color: red">{{ totalQty }}</span>
        </div>
        <div style="padding-top: 28px; margin-right: 20px; color: #606266" v-if="P.includes(routeName)">
            总计可用量 : <span style="color: red"> {{ details[0] ? details[0] : 0 }}</span>
        </div>
        <div style="padding-top: 28px; margin-right: 20px; color: #606266" v-if="P.includes(routeName)">
            总计库存量 : <span style="color: red">{{ details[1] ? details[1] : 0 }}</span>
        </div>
        <!-- 分页组件 -->
        <el-pagination
            :background="true"
            :current-page="pageable.pageNo"
            :page-size="pageable.pageSize"
            :page-sizes="[20, 50, 100]"
            :total="pageable.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<script setup lang="ts" name="Pagination">
interface Pageable {
    pageNo: number;
    pageSize: number;
    total: number;
}

interface PaginationProps {
    pageable: Pageable;
    handleSizeChange: (size: number) => void;
    handleCurrentChange: (currentPage: number) => void;
    routeName: any;
    totalQty?: number;
    details?: any;
}
const F = ["warehouseReceiptList", "immediately"];
//成品仓即时库存
const P = ["finishedProductIndex"];
defineProps<PaginationProps>();
</script>
<style lang="scss" scope>
.el-pagination__total {
    font-size: 12px;
}
.el-pager li {
    font-size: 12px;
}
.el-pagination__goto {
    font-size: 12px;
}
.el-pagination__classifier {
    font-size: 12px;
}
</style>
