<template>
    <ul v-if="(!autoHide || total>pageSize) && total>0"
        :class="paginationClass">
        <li v-if="index>1"
            class="button"
            :class="[`${prefix}-pagination-item`,`${prefix}-icon-prev`]"
            @click="prevHandle"></li>
        <template v-if="isShowPage">
            <li v-for="item in pageList"
                :key="item.number"
                :class="[`${prefix}-pagination-item`,'number',{'is-active': index === item.number}]"
                @click="clickHandle(item.number)">{{item.text}}</li>
        </template>
        <li v-if="index<pageCount"
            class="button"
            :class="[`${prefix}-pagination-item`,`${prefix}-icon-next`]"
            @click="nextHandle"></li>
        <li v-if="isShowSize"
            :class="`${prefix}-pagination-size`">
            <jdd-select v-model="size"
                        size="mini"
                        keyLabel="text"
                        valueLabel="value"
                        :options="pageSizes"
                        @change="changeHandle"></jdd-select>
        </li>
        <li v-if="isShowTotal"
            :class="`${prefix}-pagination-total`">共{{total}}条</li>
    </ul>
</template>

<script>
import Select from 'jdd-design/components/select';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-pagination`,
    mixins: [prefixMixins],
    components: {
        jddSelect: Select
    },
    props: {
        pageSize: {
            type: Number,
            default: 20
        },
        pageIndex: {
            type: Number,
            default: 1
        },
        total: Number,
        modules: {
            type: Array,
            default: () => {
                return ['pages', 'size', 'total'];
            }
        },
        autoHide: {
            type: Boolean,
            default: true
        },
        type: String
    },
    data() {
        return {
            pageCount: 0,
            index: 1,
            pageList: [],
            pageSizes: [
                {
                    value: 10,
                    text: '10条/页'
                },
                {
                    value: 20,
                    text: '20条/页'
                },
                {
                    value: 30,
                    text: '30条/页'
                },
                {
                    value: 40,
                    text: '40条/页'
                },
                {
                    value: 50,
                    text: '50条/页'
                }
            ],
            size: 20,
            displays: []
        };
    },
    watch: {
        total: function() {
            this.pageCount = Math.ceil(this.total / this.size);
        },
        pageIndex: function() {
            this.index = this.pageIndex;
        },
        pageCount: function() {
            this.resetPage();
        },
        index: function() {
            this.resetPage();
        },
        pageSize: function() {
            this.size = this.pageSize;
        },
        size: function() {
            this.pageCount = Math.ceil(this.total / this.size);
        }
    },
    methods: {
        clickHandle(index) {
            this.index = index;
            this.$emit('change-page', index);
        },
        changeHandle(size) {
            this.size = size.value;
            this.index = 1;
            this.$emit('change-size', size.value, 1);
        },
        resetPage() {
            if (this.pageCount == 0) return;
            let v = this.pageCount;
            let arr = [];
            for (var i = -2; i <= 2; i++) {
                if (this.index + i >= 1 && this.index + i <= v) {
                    arr.push({
                        text: `${this.index + i}`,
                        number: this.index + i,
                        active: false
                    });
                }
            }
            let min = arr[0].number;
            let max = arr[arr.length - 1].number;

            if (min > 2) {
                arr.unshift({
                    text: '...',
                    number: 2,
                    active: false
                });
            }
            if (min != 1) {
                arr.unshift({
                    text: '1',
                    number: 1,
                    active: false
                });
            }
            if (max <= v - 2) {
                arr.push({
                    text: '...',
                    number: v - 1,
                    active: false
                });
            }
            if (max != v) {
                arr.push({
                    text: `${v}`,
                    number: v,
                    active: false
                });
            }

            this.pageList = arr;
        },
        prevHandle() {
            this.index--;
            this.$emit('change-page', this.index);
        },
        nextHandle() {
            this.index++;
            this.$emit('change-page', this.index);
        }
    },
    computed: {
        paginationClass() {
            let clsNames = [`${prefix}-pagination`];
            return clsNames;
        },
        isShowPage() {
            return this.displays.indexOf('pages') > -1;
        },
        isShowTotal() {
            return this.displays.indexOf('total') > -1;
        },
        isShowSize() {
            return this.displays.indexOf('size') > -1;
        }
    },
    mounted() {
        this.index = this.pageIndex;
        this.size = this.pageSize;
        this.pageCount = Math.ceil(this.total / this.pageSize);
        if (!this.pageSizes.find(m => m.value === this.size)) {
            this.$set(this.pageSizes, this.pageSizes.length, {
                value: this.size,
                text: `${this.size}条/页`
            });
        }
        if (this.type == 'simple') {
            this.displays = [];
        } else if (this.modules.length) {
            this.displays = [...this.modules];
        } else {
            this.displays = ['pages'];
        }
    }
};
</script>
