<template>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-sizes="pageSizes"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</template>

<script>
    export default {
        name:    'Pagination',
        props:   {
            action: {
                type:     String,
                required: true,
            },
        },
        data() {
            return {
                page:  1,
                size:  10,
                total: 0,
                pageSizes: [10, 50, 100]
            };
        },
        watch:   {
            total(newVal) {
                if (newVal <= this.size * (this.page -1) && this.page > 1) {
                    this.page--;
                    this.$emit('current-page', this.page);
                }
            },
        },
        methods: {
            handleSizeChange(val) {
                this.$emit('size-change', val);
            },
            handleCurrentChange(val) {
                this.$emit('current-page', val);
            },
        },
    };
</script>

<style scoped>

</style>