<template>
    <div style="height: 48px" v-show="page.pageCount > 0">
        <div style="float: right; position: relative; top: 10px">
            <div style="margin: 4px 0; float: left">
                <slot name="left"></slot>
            </div>
            <el-pagination
                :background="!little"
                style="float: right; margin-right: 50px"
                @current-change="handleCurrentChange"
                @size-change="handleShowSizeChange"
                :pageSizes="pageSizeOptions"
                :pageSize="page.pageSize"
                :current-page.sync="pageIndex"
                :defaultCurrent="0"
                :small="true"
                :total="page.pageCount"
                :layout="layouts"
            ></el-pagination>
            <!-- layout="total, sizes, prev, pager, next, jumper" -->
        </div>
    </div>
</template>
<script>
export default {
    name: "sePagination",
    data() {
        let pageSizeOptions = [5, 10, 20, 30, 50, 100]; //objutil.toKeyArray(dictionary.get('PageSize'));
        return {
            pageSizeOptions,
            pageIndex: 1,
            layouts: '',
        };
    },
    props: {
        /* 分页配置项 */
        page: {
            type: Object,
            default() {
                return {
                    pageIndex: 1,
                    pageSize: 5,
                    pageCount: 0
                };
            }
        },
        /* 获取分页数据回调方法 */
        getPage: null,
        /* 是否是简易模式 */
        little: {
            type:Boolean,
            default:false,
        },
        showSizeChanger: {default: true},
        layout: {
            type: String,
            default: "total, sizes, prev, pager, next, jumper"
        },
        showTotal: {default: true},
        size: {default: ""}
    },
    created() {
        if (this.pageSizeOptions.indexOf(this.page.pageSize) == -1) {
            this.layouts = this.layout.replace("sizes, ", "")
        } else if(this.little){
            this.layouts = 'prev, pager, next';
        }else{
            this.layouts = this.layout
        }
    },
    watch: {
        "page.pageIndex": {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                if (newV != null && newV != this.pageIndex) {
                    this.pageIndex = newV;
                }
            }
        },
        "page.pageCount": {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                if (newV > 0) {
                    // 解决删除最后一页全部数据bug
                    // debugger
                    let totalPage = Math.ceil(newV / this.page.pageSize); // 总页数
                    this.pageIndex =
                        this.pageIndex > totalPage ? totalPage : this.pageIndex;
                }
            }
        },
        pageIndex(newV, oldV) {
            if (oldV != null && newV == oldV) return;
            if (this.page.pageIndex == newV) return;
            this.page.pageIndex = newV;
            // debugger
            this.getPage();
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.pageIndex = val;
        },
        handleShowSizeChange(current, pageSize) {
            this.page.pageSize = current;
            if (this.pageIndex != 1) {
                this.page.pageIndex = 1;
            }
            this.getPage();
        }
    }
};
</script>
