<script setup lang="ts">
    const emit = defineEmits(['getList'])
    // 每页数量值改变
    const handleSizeChange = (val: Number) => {
        // 传递每页数量
        emit('getList', val)
    }
    // 页码值改变
    const handleCurrentChange = (val: Number) => {
        // 传递页码值
        emit('getList', val)
    }

    defineProps<Props>()
    interface Props {
        pageSize?: 20
        pageNumber?: 1
        total?: 0
    }

    // const handleTotalText = () => {
    //     const targetDom: any = document.querySelector('.el-pagination__total')
    //     targetDom.innerText = `数量${total.value}`
    // }
    // onMounted(() => {
    //     // handleTotalText()
    // })
</script>

<template>
    <!-- 分页 -->
    <el-pagination
        :current-page="pageNumber"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        small="small"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>

<style>
    .el-pagination {
        margin-top: 15px;
    }
</style>
