<template>
    <div class="app-pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.index"
            :pager-count="7" :page-sizes="[20, 30, 40]" :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper," :total="total" background>
        </el-pagination>
    </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue'

const emit = defineEmits(['update:pageSize', 'update:pageIndex', 'change'])
const props = defineProps({
    // 总条数
    total: {
        type: Number,
        required: true
    },
    // 每页条数
    pageSize: {
        type: Number,
        default: 20
    },
    // 当前页数
    pageIndex: {
        type: Number,
        default: 1
    },
})

const page = reactive({
    size: props.pageSize,
    index: props.pageIndex,
})

const handleSizeChange = (val: number) => {
    page.size = val;
    emit('update:pageSize', val);
    handleCurrentChange(1);
}

const handleCurrentChange = (val: number) => {
    page.index = val;
    emit('update:pageIndex', val);
    emit('change', val);
}

watch(() => props.pageSize, (val) => page.size = val)
watch(() => props.pageIndex, (val) => page.index = val)
</script>

<style lang="less">
@import "./index.less";
</style>