<template>
  <div class="pager" v-if="!simple">
    <a :href="isFirstPage ? constant.NONE_URL : urlFactory(value - 1)" :disabled="isFirstPage"
       @click="!isFirstPage && onPagerClick($event, value - 1)"
       v-if="showPrev">
      <i class="ob-icon icon-left"></i> {{prevText}}
    </a>

    <span class="current" v-if="value === 1">1</span>
    <a :href="urlFactory(1)" @click="onPagerClick($event, 1)" v-else>1</a>

    <span class="dot" v-if="showPrevMore"><i class="ob-icon icon-more"></i></span>
    <template v-for="pager in pagers">
      <span class="current" v-if="value === pager">{{pager}}</span>
      <a :href="urlFactory(pager)" @click="onPagerClick($event, pager)" v-else>{{pager}}</a>
    </template>
    <span class="dot" v-if="showNextMore"><i class="ob-icon icon-more"></i></span>

    <template v-if="total > 1">
      <span class="current" v-if="value === total">{{total}}</span>
      <a :href="urlFactory(total)" @click="onPagerClick($event, total)" v-else>{{total}}</a>
    </template>

    <a :href="isLastPage ? constant.NONE_URL : urlFactory(value + 1)" :disabled="isLastPage"
       :class="['page-' + nextType]"
       @click="!isLastPage && onPagerClick($event, value + 1)"
       v-if="showNext">
      {{nextText}} <i class="ob-icon icon-right"></i>
    </a>
  </div>
  <div class="pager-simple" v-else>
    <span class="page-num" v-if="showPageNumber">{{value}}/{{total}} 页</span>
    <div class="pager-box cf">
      <a :href="isFirstPage ? constant.NONE_URL : urlFactory(value - 1)" :disabled="isFirstPage"
         @click="!isFirstPage && onPagerClick($event, value - 1)">
        <i class="ob-icon icon-left"></i>
      </a>
      <a :href="isLastPage ? constant.NONE_URL : urlFactory(value + 1)" :disabled="isLastPage"
         @click="!isLastPage && onPagerClick($event, value + 1)">
        <i class="ob-icon icon-right"></i>
      </a>
    </div>
  </div>
</template>

<script>
    const NONE_URL = "javascript:;";

    export default {
        name: 'FocusPager',
        componentName: "FocusPager",

        props: {
            simple: Boolean,
            showPageNumber: Boolean,
            urlMaker:Function,
            value: Number,
            total: Number,

            showPrev:{
                type: Boolean,
                default: true
            },
            prevText: String,

            showNext:{
                type: Boolean,
                default: true
            },
            nextText: {
                type: String,
                default: "Next"
            },

            nextType: {
                type: String,
                default: "main"
            }
        },


        data() {
            return {
                current: null,
                showPrevMore: false,
                showNextMore: false,

                constant:{
                    NONE_URL
                }
            };
        },

        computed: {
            pagers() {
                const pagerCount = 7;

                const value = Number(this.value);
                const total = Number(this.total);

                let showPrevMore = false;
                let showNextMore = false;

                if (total > pagerCount) {
                    if (value > pagerCount - 3) {
                        showPrevMore = true;
                    }

                    if (value < total - 3) {
                        showNextMore = true;
                    }
                }

                const array = [];

                if (showPrevMore && !showNextMore) {
                    const startPage = total - (pagerCount - 2);
                    for (let i = startPage; i < total; i++) {
                        array.push(i);
                    }
                } else if (!showPrevMore && showNextMore) {
                    for (let i = 2; i < pagerCount; i++) {
                        array.push(i);
                    }
                } else if (showPrevMore && showNextMore) {
                    const offset = Math.floor(pagerCount / 2) - 1;
                    for (let i = value - offset; i <= value + offset; i++) {
                        array.push(i);
                    }
                } else {
                    for (let i = 2; i < total; i++) {
                        array.push(i);
                    }
                }

                this.showPrevMore = showPrevMore;
                this.showNextMore = showNextMore;

                return array;
            },

            isSPA(){
                return !this.urlMaker;
            },

            isFirstPage(){
                return this.value === 1;
            },

            isLastPage(){
                return this.value === this.total;
            }
        },

        methods: {
            onPagerClick(event, pager) {
                event.stopPropagation();

                this.isSPA && event.preventDefault();

                let newPage = pager;
                const total = this.total;
                const value = this.value;

                /* istanbul ignore if */
                if (!isNaN(newPage)) {
                    if (newPage < 1) {
                        newPage = 1;
                    }

                    if (newPage > total) {
                        newPage = total;
                    }
                }

                if (newPage !== value) {
                    this.$emit('input', newPage);
                }
            },

            urlFactory(pager){
                let url = NONE_URL;
                if(this.urlMaker){
                    url = this.urlMaker(pager);
                }

                return url;
            }
        },

    };
</script>
