<template>
    <div class="pagination">
        <Pagination size="small" :show-quick-jumper="true" v-model:current="current1" :page-size-options="pageSizeOptions"
            :total="total" show-size-changer :page-size="pageSize" @showSizeChange="onShowSizeChange"
            :show-total="(total) => `共 ${total} 条`">
        </Pagination>
    </div>
</template>

<script>
import { defineComponent, onMounted, ref, watch } from 'vue';
import { Pagination } from 'ant-design-vue';

export default defineComponent({
    name: 'myPage',
    components: { Pagination },
    props: {
        total: {
            type: Number,
            default: 0,
        }
    },
    setup(props, { emit }) {
        const pageSizeOptions = ref(['10', '50', '80', '100']);
        const pageSize = ref(10);
        const current1 = ref(1);
        const total = ref(1);
        const onShowSizeChange = (current, pageSize) => {
            console.log(current, pageSize);
            eventBus.emit('platListCenter', {
                pageSize: pageSize,
                pageIndex: current,
            });
        };
        watch(pageSize, () => {
            eventBus.emit('platListCenter', {
                pageSize: pageSize.value,
                pageIndex: current1.value,
            });
        });
        watch(current1, () => {
            eventBus.emit('platListCenter', {
                pageSize: pageSize.value,
                pageIndex: current1.value,
            });
        });
        watch(() => props.total, (val) => total.value = val, {
            deep: true,
            immediate: true
        })
        return {
            pageSizeOptions,
            pageSize,
            current1,
            total,
            onShowSizeChange,
        }
    },
})

</script>
<style scoped>
.pagination {
    float: right;
}
</style>