<template>
    <div :style="{ 'text-align': align }" class="pagi-box" v-if="isShowPagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            :layout="layout"
            :total="amount"
        ></el-pagination>
    </div>
</template>
<script>
export default {
    props: {
        amount: { // 总条数
            type: Number,
            default: 0
        },
        pageSize: { // 每一页多少条数据
            type: Number,
            default: 20
        },
        pageIndex: { // 页码
            type: Number,
            default: 1
        },
        pageSizes: { // 页数单位，默认20
            type: Array,
            default: () => [20, 50, 100]
        },
        align: { // 分页组件的对齐方式，默认居中，可选值：left，center,right
            type: String,
            default: 'center'
        },
        layout: { // 分页组件的布局
            type: String,
            default: 'total, sizes, prev, pager, next, jumper'
        }
    },
    computed: {
        isShowPagination () {
            return this.amount > this.pageSizes[0] && this.amount > this.pageSize
        }
    },
    data () {
        return {
        }
    },
    methods: {
        handleSizeChange (val) {
            this.$emit('getSizeChange', val)
        },
        handleCurrentChange (val) {
            this.$emit('getCurrentPage', val)
        }
    }
}
</script>
<style lang="less" scoped>
.pagi-box {
    padding: 15px 0 0;
}
</style>
