<template>
    <div style="margin-top: 20px;">
        <el-pagination v-model:currentPage="pageData.pageNo" v-model:page-size="pageData.pageSize"
            :page-sizes="[10, 15, 20]" :small="pageData.small" :disabled="pageData.disabled"
            :background="pageData.background" layout="->, total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" hide-on-single-page @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang='ts'>

let props = defineProps({
    pageData: {
        type: Object,
        default: {
            pageNo: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            small: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            background: {
                type: String || Boolean,
                default: '' || false
            }
        }
    },
    total: {
        type: Number,
        default: 0
    }
})

let emits = defineEmits(['sizeChange', 'currentChange'])

// 新条数
const handleSizeChange = (val: number) => {
    emits('sizeChange', val)
}

// // 新页数
const handleCurrentChange = (val: number) => {
    emits('currentChange', val)
}
</script>
 
<style lang = "scss" scoped>
</style>