<template>
    <a-pagination
            :total="paginations.total"
            show-size-changer
            show-quick-jumper
            v-model="paginations.pageIndex"
            :page-size="paginations.pageSize"
            :page-size-options="paginations.pageSizeOptions"
            @showSizeChange="showSizeChange"
            @change="pageChange"
            :showTotal="() => `共 ${paginations.total} 条`"
    />
</template>

<script>
    /**
     * 分页组件
     */
    export default {
        name: "myPagination",
        props: ["pagination"],
        data() {
            return {
                paginations: {
                    pageIndex: 1,
                    pageSize: 10,
                    total: 0,
                    pageSizeOptions: ['10', '20', '30', '40', '50'],
                },
            }
        },
        mounted() {
            this.paginations = this.pagination;
        },
        methods: {
            // 分页
            showSizeChange(pageNum, pageSize) {
                this.paginations.pageIndex = 1;
                this.paginations.pageSize = pageSize;
                this.$emit('input', this.paginations);
                this.$emit('getList');
            },
            pageChange(pageNum, pageSize) {
                this.paginations.pageIndex = pageNum;
                this.paginations.pageSize = pageSize;
                this.$emit('input', this.paginations);
                this.$emit('getList');
            },
        }
    }
</script>

<style scoped>

</style>