<template>
  <div class="pager pager--default" style="display:inline-block">
    <a class="pager__button previous" :disabled="pageNumberState === 1" v-on:click="prev">previous</a>
    <span>
      <template v-for="(pn, index) in nums">
        <a href="javascript:void(0)" class="pager__button" v-if="pn === -1" disabled>...</a>
        <a href="javascript:void(0)" class="pager__button" v-bind:class="(pageNumberState === pn) ? 'current' : ''" :disabled="pageNumberState === pn" v-on:click="activatePage(pn)" v-else>{{ pn }}</a>
      </template>
    </span>
    <a class="pager__button next" :disabled="pageNumberState === pageCount" v-on:click="next">next</a>
  </div>
</template>
<script>
export default {
  name: 'taurus-pager',
  created: function () {
    this.pageNumberState = this.pageNumber || 1;
    this.dataCountState = this.dataCount || 0;
    this.pageSizeState = this.pageSize || 5;
  },
  data: function () {
    return {
      pageNumberState: 1,
      pageSizeState: 5,
      dataCountState: 0
    };
  },
  props: {
    dataCount: Number,
    pageSize: Number,
    pageNumber: Number
  },
  watch: {
    'pageSizeState': function (newValue, oldValue) {
      if (!(typeof newValue === 'number' || isNaN(newValue) === false)) {
        // 是非法值就恢复为前一个值
        this.pageSizeState = oldValue;
      }
      this.pageNumberState = 1; // 复位到第一页
      this.$emit('page-changed', this.pageNumberState, this.pageSizeState);
    },
    'dataCountState': function (newValue, oldValue) {
      this.pageNumberState = 1; // 复位到第一页
    },
    'pageNumberState': function (newValue, oldValue) {
      this.$emit('page-changed', this.pageNumberState, this.pageSizeState);
    }
  },
  methods: {
    prev: function () {
      if (this.pageNumberState > 1) {
        this.pageNumberState--;
      }
    },
    next: function () {
      if (this.pageNumberState < this.pageCount) {
        this.pageNumberState++;
      }
    },
    activatePage: function (pn) {
      if (pn >= 1 && pn <= this.pageCount) {
        this.pageNumberState = pn;
      }
    }
  },
  computed: {
    pageCount: function () {
      var count = parseInt(this.dataCountState / this.pageSizeState);
      if (this.dataCountState % this.pageSizeState > 0) {
        count++;
      }
      return count;
    },
    /**
     * 生成页号
     * @return {Array} 返回计算后的显示页号，如果某页需要显示为省略号则此数组元素值为-1
     */
    nums: function () {
      var i, count;
      var pageNumber = this.pageNumberState;
      var overflow = 5; // 必须是奇数
      var half = 2; // overflow的一半
      var arr = [];
      var pageCount = this.pageCount;
      if (pageCount === 0) {
        return arr;
      }
      if (pageNumber <= overflow) {
        count = pageNumber + 1;
        for (i = 1; i < count; i++) {
          arr.push(i);
        }
      } else if (pageNumber > pageCount - half) {
        arr.push(1, -1);
        count = pageNumber + 1;
        for (i = pageCount - overflow + 1; i < count; i++) {
          arr.push(i);
        }
      } else {
        arr.push(1, -1, pageNumber - half, pageNumber - 1, pageNumber);
      }
      count = pageCount - overflow;
      if (pageNumber > count) {
        count = pageCount + 1;
        for (i = pageNumber + 1; i < count; i++) {
          arr.push(i);
        }
      } else if (pageNumber <= half) {
        count = overflow + 1;
        for (i = pageNumber + 1; i < count; i++) {
          arr.push(i);
        }
        arr.push(-1, pageCount);
      } else {
        arr.push(pageNumber + 1, pageNumber + half, -1, pageCount);
      }
      return arr;
    }
  }
};
</script>
