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

<script>
    import { paginationServiceData } from './paginationData';
    export default {
        name: 'Pagination',
        props: {
            pageSizes: {
                type: Array,
                default: () => [100, 200, 300, 400]
            }
        },
        computed: {
            page: {
                get () {
                    return paginationServiceData.page;
                },
                set(val) {
                    paginationServiceData.size = val;
                }
            },
            size: {
                get () {
                    return paginationServiceData.size;
                },
                set(val) {
                    paginationServiceData.size = val;
                }
            },
            total: {
                get() {
                    return paginationServiceData.total;
                },
                set(val) {
                    this.paginationServiceData.total = val;
                }
            }
        },
        methods: {
            handleSizeChange() {},
            handleCurrentChange() {},
        }
    };
</script>

<style scoped>

</style>