<template>
    <div class="row">
        <div class="col-sm-12 col-md-5">
            <div class="dataTables_info">共{{total}}条 当前页{{index}}/{{getPageCount()}}</div>
        </div>
        <div class="col-sm-12 col-md-7">
            <div class="dataTables_paginate paging_simple_numbers">
                <ul class="pagination pagination-sm m-0 float-right">
                    <li :class="'page-item previous'+(hasPrev()?'':' disabled')">
                        <a href="javascript:;" class="page-link" @click="nav(index-1)">上一页</a>
                    </li>
                    <li v-for="item in getPageList()" :class="'page-item' + (item===index?' active':'')">
                        <a href="javascript:;" class="page-link" @click="nav(item)">{{item}}</a>
                    </li>
                    <li :class="'page-item next'+(hasNext()?'':' disabled')">
                        <a href="javascript:;" class="page-link" @click="nav(index+1)">下一页</a>
                    </li>
                    <li class="page-item">
                        <select class="page-link" v-model="currentSize">
                            <option v-for="item in sizeList" :value="item">
                                {{ item }}
                            </option>
                        </select>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            index: {
                type: Number,
                default: 1
            },
            size: {
                type: Number,
                default: 20
            },
            total: {
                type: Number,
                default: 0
            },
            sizeList: {
                type: Array,
                default: () => [20, 50, 100]
            },
            callback: {
                type: Function
            }
        },
        data: function () {
            return {
                currentIndex: this.index,
                currentSize: this.size
            };
        },
        watch: {
            currentIndex: function (val) {
                this.$emit('update:index', val);
                this.callback();
            },
            currentSize: function (val) {
                this.currentIndex = 1;
                this.$emit('update:size', val);
                this.callback();
            }
        },
        methods: {
            nav: function (index) {
                this.currentIndex = index;
            },
            getPageCount: function () {
                return Math.ceil(this.total / this.size);
            },
            hasPrev: function () {
                return this.index > 1;
            },
            hasNext: function () {
                return this.index < this.getPageCount();
            },
            getPageList: function () {
                var pageCount = this.getPageCount();
                var maxLinks = 10;
                var left = maxLinks / 2;
                var start = this.index - left;
                start = start > 1 ? start : 1;
                var end = this.index + (maxLinks - left - 1);
                end = end > pageCount ? pageCount : end;
                if (start == 1 && end < pageCount) {
                    while (end - start + 1 < maxLinks && end < pageCount) {
                        end++;
                    }
                }
                if (end == pageCount && start > 1) {
                    while (end - start + 1 < maxLinks && start > 1) {
                        start--;
                    }
                }
                var list = [];
                for (var i = start; i <= end; i++) {
                    list.push(i);
                }
                return list;
            }
        }
    };
</script>