<template>
    <div id="CommonPagination" class="ta-r">
        <el-pagination
            small
            :current-page.sync="current"
            background
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="sizes, total, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script>
import { pagination } from '@/constant';
export default {
    name: 'CommonPagination',
    components: {
    },
    props: {
        currentPage: {
            type: Number,
            default: 1
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 50, 100]
        },
        pageSize: {
            type: Number,
            default: pagination.pageSize
        },
        total: {
            type: Number,
            default: pagination.total
        }
    },
    data() {
        return {
            current: 1
        };
    },
    watch: {
        currentPage(val) {
            this.current = JSON.parse(JSON.stringify(val));
        }
    },
    created() {
        this.current = JSON.parse(JSON.stringify(this.currentPage));
    },
    methods: {
        handleSizeChange(val) {
            this.current = 1;
            this.$emit('handleSizeChange', val);
        },
        handleCurrentChange(val) {
            this.$emit('handleCurrentChange', val);
        }
    }
};
</script>

<style lang='less' scoped>
</style>
