<template>
    <div style="height: 48px;" v-show="page.pageCount>0">
        <div style="float:right;position: relative;top:10px;">
            <div style=" margin: 4px 0px;float: left;">
                <slot name="leftInfo"></slot>
            </div>
            <div v-if="showGetCount" style="margin: 2px;float: left;">
                <el-button type="primary" @click="getCountBtn" size="mini" :loading="loading">{{ totalTxt }}</el-button>
            </div>
            <el-pagination
                background
                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.pageRealCount?page.pageRealCount:page.pageCount"
                :layout="layout"
            ></el-pagination>
            <!-- layout="total, sizes, prev, pager, next, jumper" -->
        </div>
    </div>
</template>
<script>
export default {
    name: "vePagination",
    data() {
        var pageSizeOptions = [5, 10, 20, 30, 50, 100]; //objutil.toKeyArray(dictionary.get('PageSize'));
        return {
            loading: false,
            showGetCount: true,
            pageSizeOptions,
            pageIndex: 1,
            layout:"sizes, prev, pager, next, jumper"
        };
    },
    props: {
        totalTxt: {
            type: String,
            default: '获取总条数'
        },
        getCount: null,
        page: {
            type: Object,
            default() {
                return {
                    pageIndex: 1,
                    pageSize: 5,
                    pageCount: 0,
                    pageRealCount: 0
                };
            }
        },
        getPage: null,
        showSizeChanger: {default: true},
        showTotal: {default: true},
        size: {default: ""}
    },
    created() {
    },
    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
                    let totalPage = Math.ceil(newV / this.page.pageSize); // 总页数
                    this.pageIndex =
                        this.pageIndex > totalPage ? totalPage : this.pageIndex;
                }
            }
        },
        "page.pageRealCount": {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                //获取到真实条数
                if (this.page.pageRealCount) {
                    this.layout = "total, sizes, prev, pager, next, jumper";
                    this.showGetCount = false;
                } else {
                    this.layout = "sizes, prev, pager, next, jumper";
                    this.showGetCount = true;
                }
                this.loading = false;
                if (newV > 0) {
                    // 解决删除最后一页全部数据bug
                    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();
        },
        getCountBtn() {
            let vm = this;
            this.loading = true;
            return this.getCount(function () {
                vm.loading = false;
            });
        }
    }
};
</script>
