<template>
    <div>
        <div style="height: 48px;" v-if="showBig" class="bigPagination">
            <div style="float:right;position: relative;top:10px;">
                <div style="margin: 5px;float: left;">
                    <slot name="leftInfo"></slot>
                </div>
                <div v-if="showGetCount" style="margin: 2px;float: left;">
                    <el-button type="primary" @click="getCountBtn" :loading="page.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.pageCount"
                    layout="sizes,prev,pager,next, jumper"
                ></el-pagination>
            </div>
        </div>
        <div v-else>
            <su-pagination :getPage="getPage" :page.sync="page"></su-pagination>
        </div>
    </div>
</template>
<script>
import sePagination from "../su-pagination";
export default {
    name: "vePaginationBig",
    components:{sePagination},
    data() {
        var pageSizeOptions = [5, 10, 20, 30, 50, 100]; //objutil.toKeyArray(dictionary.get('PageSize'));
        return {
            showBig: true,
            pageSizeOptions,
            pageIndex: 1
        };
    },
    props: {
        length: 0,
        totalTxt:{
            type: String,
            default:'获取总条数'
        },
        showGetCount: { default: true },
        page: {
            type: Object,
            default() {
                return {
                    pageIndex: 1,
                    pageSize: 5,
                    pageCount: -1,
	                loading: false,
                };
            }
        },
        getPage: null,
        getCount: null,
        showSizeChanger: { default: true },
        showTotal: { default: true },
        size: { default: "" }
    },
    created() {},
    watch: {
        length: {
            handler(newV, oldV) {
                if (newV < this.page.pageSize) {
                    $(".bigPagination .btn-next").attr("disabled", true);
                }else{
                    $(".bigPagination .btn-next").attr("disabled", false);
                }
            }
        },
        "page.pageIndex"(newV, oldV) {
            if (newV != null && newV != this.pageIndex) {
                this.pageIndex = newV;
            }
        },
        "page.pageCount": {
            immediate: true,
            deep: true,
            handler(newV, oldV) {
                // console.log(newV);
                if (newV == -1 || newV == 100000000) {
                    this.page.pageCount = 100000000;
                    this.showBig = true;
                } else {
                    let totalPage = Math.ceil(newV / this.page.pageSize); // 总页数
                    if (this.pageIndex > totalPage) {
                        this.page.pageIndex = totalPage;
                        this.getPage();
                    }
                    this.page.pageCount = newV;
                    this.showBig = false;
                }
            }
        },
        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>
<style scoped  lang="less">
.bigPagination {
    .getTotal {
        cursor: pointer;
    }
    /deep/.el-pager {
        .number {
            display: none;
        }
        .number.active {
            display: inline-block;
        }
        .el-icon.more {
            display: none;
        }
    }
}
</style>
