<template>
    <div class="mc-pagination">
          <ul class="pagination-list">
            <li class="mc-page_total" v-if="showTotal">共<em v-text="total"></em>条</li>
            <li>
              <mc-button
              @click="prev"
              :disabled="currentPageNum == 1">
              {{ prevText }}
              </mc-button>
            </li>
            <li v-if="getRangePage.begin > 1">
              <mc-button @click="turnToPage(1)">1</mc-button>
            </li>
            <li v-if="showQuickPrevIcon">
              <span class="number-btn" >...</span>
            </li>
            <li v-for="number in (getRangePage.end - getRangePage.begin + 1)">
              <mc-button
                v-bind:key="number"
                class="number-btn"
                :class="{'mc-button_primary': isActive(number)}"
                @click="turnToPage(number + getRangePage.begin - 1)">
                <span v-if="isActive(number)" v-text="number + getRangePage.begin - 1"></span>
                <span v-else v-text="number + getRangePage.begin - 1" ></span>
              </mc-button>
            </li>
            <li v-if="showQuickNextIcon">
              <span class="number-btn">...</span>
            </li>
            <li v-if="getRangePage.end < totalPageCount">
              <mc-button class="number-btn"  @click="turnToPage(totalPageCount)">
                  <span v-text="totalPageCount"></span>
              </mc-button>
            </li>
            <li>
                <mc-button
                  @click="next"
                  :disabled="currentPageNum == totalPageCount || totalPageCount === 0"
                  >
                  {{ nextText }}
                  </mc-button>
            </li>
            <li class="jump">
              <span>跳转到</span>
              <mc-input type="number" min="1" :max="maxPage" v-model="curNow" v-on:keyup.enter.native="turnToPage(Math.round(curNow))"></mc-input>
              <span>页</span>
            </li>
            <li class="page-size">
              <mc-select v-model="internalPageSize" v-if="showSizer" @change="changePageSize" :options="pageSizeRange">
              </mc-select>
            </li>
            <!-- <select v-if="showSizer" v-model="internalPageSize" @change="changePageSize(internalPageSize)">
              <option v-for="opt in pageSizeRange" v-bind:key="opt" :label="`${opt}条/页`" :value="opt">
              </option>
            </select> -->
          </ul>
    </div>
</template>

<script>

export default {
    props: {
        'currentPageNum': {
            type: Number,
            default: 1
        },
        'total': {
            type: Number,
            default: 0
        },
        'pageSize': {
            type: Number,
            default: 10
        },
        'showTotal': {
            type: Boolean,
            default: false
        },
        'showSizer': {// only for starndard type
            type: Boolean,
            default: false
        },
        'pageSizeRange': {
            type: Array,
            // default: () => [10, 20, 50, 100],
            default: () =>[{
                    value: 10,
                    label: '10条/页'
                  }, {
                    value: 20,
                    label: '20条/页',
                  }, {
                    value: 50,
                    label: '50条/页',
                  }, {
                    value: 100,
                    label: '100条/页'
                  }]
        },
        'rangeLength': {
            type: Number,
            default: 5,
            coerce(val) {
                if (val < 1) {
                    return 1;
                }
                return val;
            }
        },
        prevText: {
          type: String,
          default: '上一页'
        },
        nextText: {
          type: String,
          default: '下一页'
        },
    },
    data() {
        return {
          maxPage:'',
          curNow: 1,
          internalPageSize: this.pageSize,
        };
    },
    computed: {
        showQuickPrevIcon() {
            return this.getRangePage.begin > 1;
        },
        showQuickNextIcon() {
            return this.getRangePage.end < this.totalPageCount;
        },
        totalPageCount() {
          this.maxPage = Math.ceil(this.total / this.internalPageSize)
            return Math.ceil(this.total / this.internalPageSize);

        },
        getRangePage() {
            let curPage = this.currentPageNum;
            let midpoint = curPage;
            // 减1的目的是刨除midpoint占位
            let pageRange = this.rangeLength - 1;
            // 中点左边显示的页码范围
            let leftHand = Math.floor(pageRange / 2);
            // 中点右边显示的页码范围
            let rightHand = Math.ceil(pageRange / 2);
            let totalPage = this.totalPageCount;
            let result = {
                begin: 1,
                end: 1
            };
            if (!midpoint) {
                result.begin = curPage - leftHand;
                result.end = curPage + rightHand;
            }
            else {
                result.begin = midpoint - leftHand;
                result.end = midpoint + rightHand;
            }
            if (result.begin < 1) {
                result.end = result.end - result.begin + 1;
                // 0也是一个有效占位
                result.begin = 1;
                if (result.end > totalPage) {
                    result.end = totalPage;
                }
            }
            if (result.end > totalPage) {
                //  调整起始位置，保证展示的页码个数为options.range
                result.begin += totalPage - result.end;
                result.end = totalPage;
                if (result.begin < 1) {
                    result.begin = 1;
                }
            }
            return result;
        }
    },
    watch: {
        pageSize(val) {
            this.internalPageSize = val;
        },
        showQuickPrevIcon(val) {
            
        },
        showQuickNextIcon(val) {
            
        }
    },
    methods: {
        turnToPage(pageNo) {
            if (pageNo > 0 && pageNo <= this.totalPageCount) {
                this.$emit('change-current', pageNo, this.currentPageNum);// new page num / old page num
            }
        },
        changePageSize(label,value) {
            this.$emit('change-pagesize', value);
        },
        prev() {
            this.turnToPage(this.currentPageNum - 1);
        },
        next() {
            this.turnToPage(this.currentPageNum + 1);
        },
        isActive(number) {
            return number + this.getRangePage.begin - 1 === this.currentPageNum;
        }
    }
};
</script>