<template>
    <div :class="$style.pagination">
        <Touch
            :class="[$style.btn,pageIndex<=1&&$style.ban]"
            @tap="prev(pageIndex<=1)"
        >
            <IconFont>&#xe3;</IconFont>
        </Touch>
        <div :class="$style.page">
            <template v-for="(item,index) in getPagination">
                <div
                    :class="$style.actions"
                    v-if="item===null"
                    :key="index"
                    style="text-align: center;"
                >
                    <span :class="$style.ellipsis">...</span>
                    <Touch
                        tag="span"
                        :class="$style.changeActionBtn"
                        @tap="changeAction(index)"
                    >
                        <IconFont v-if="index>=2">&#xe4;</IconFont>
                        <IconFont v-else>&#xe3;</IconFont>
                    </Touch>
                </div>
                <Touch
                    v-else
                    :key="index"
                    :class="[$style.btn,pageIndex==item&&$style.active]"
                    @tap="goto(item)"
                >{{item}}</Touch>
            </template>
        </div>
        <Touch
            :class="[$style.btn,pageSize*pageIndex>=total&&$style.ban]"
            @tap="next(pageSize*pageIndex>=total)"
        >
            <IconFont>&#xe4;</IconFont>
        </Touch>
    </div>
</template>

<script>
    import Touch from "../external/Touch";
    import IconFont from "../basic/IconFont";

    export default {
        name: "Pagination",
        components: {IconFont, Touch},
        props: {
            pageSize: {
                type: Number
            },
            pageIndex: {
                type: Number
            },
            total: {
                type: Number
            }
        },
        data() {
            return {
                index: 1,
                num: this.pageIndex
            }
        },
        watch: {
            pageIndex() {
                this.index = this.pageIndex
            }
        },
        mounted() {
            this.index = this.pageIndex
        },
        computed: {
            getPagination() {
                let maxPage = Math.ceil(this.total / this.pageSize);
                var result = [],
                    prevList = [],
                    nextList = [];
                if (this.index > 1) {
                    while (prevList.length <= 0 || prevList[0] > 1) {
                        prevList.unshift((prevList[0] || this.index) - 1);
                        if (prevList.length >= 1) {
                            break;
                        }
                    }
                }
                if (this.index < maxPage) {
                    while (nextList.length <= 0 || nextList[nextList.length - 1] < maxPage) {
                        nextList.push((nextList[nextList.length - 1] || this.index) + 1);
                        if (nextList.length >= 1) {
                            break;
                        }
                    }
                }
                if (prevList[0] > 1) {
                    if(prevList[0]==2){
                        result = result.concat(1, prevList);
                    }else{
                        result = result.concat(1, null, prevList);
                    }
                } else {
                    result = result.concat(prevList);
                }
                result = result.concat(this.index);
                if (nextList[nextList.length - 1] < maxPage) {
                    if(nextList[nextList.length - 1]==maxPage-1){
                        result = result.concat(nextList, maxPage);
                    }else{
                        result = result.concat(nextList, null, maxPage);
                    }
                } else {
                    result = result.concat(nextList);
                }
                return result;
            }
        },
        methods: {
            changeAction(index) {
                let maxPage = Math.ceil(this.total / this.pageSize)
                if (index >= 2) {
                    if (this.index == (maxPage - 3) || this.index == (maxPage - 4)) {
                        this.index += 3
                    } else {
                        this.index += 5
                    }

                } else {
                    if (this.index == 4 || this.index == 5 ) {
                        this.index -= 3
                    } else {
                        this.index -= 5
                    }
                }
            },
            prev(flag) {
                if (flag) {
                    return;
                }
                this.$emit('changePage', this.pageIndex - 1);
            },
            next(flag) {
                if (flag) {
                    return;
                }
                this.$emit('changePage', this.pageIndex + 1);
            },
            goto(index) {
                this.num = index
                if (this.pageIndex == index) {
                    return;
                }
                this.$emit('changePage', index);
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssFunction.scss';
    @import '../../cssInjection/cssLayout.scss';

    .pagination {
        float: right;
        @extend %ClearFloat;

        .btn {
            float: left;
            min-width: 30px;
            padding: 0 4px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 1PX;
            margin: 0 4px;
            background-color: #f4f4f5;
            color: #606266;

            &.ban {
                color: #c0c4cc !important;
                cursor: not-allowed !important;
            }

            &:hover {
                color: #409eff;
                cursor: pointer;
            }

            &.active {
                background-color: #409eff;
                color: #FFF;
            }
        }

        > .page {
            float: left;
            @extend %ClearFloat;

            .actions {
                float: left;
                height: 30px;
                line-height: 30px;

                >.ellipsis{
                    display: inline;
                }
                >.changeActionBtn{
                    display: none;
                    font-size: 0.9em;
                    color: #409eff;
                }
                &:hover{
                    >.ellipsis{
                        display: none;
                    }
                    >.changeActionBtn{
                        display: inline;
                    }
                }
            }
        }
    }
</style>
