<template>
  <div :class="_class">
    <div :class="`${name}__btn-wrapper`">
      <Button
        :class="_buttonClass"
        size="small"
        icon="left"
        icon-only
        @click="prevPage"
        :disabled="currIndex === 1"
      />

      <template v-if="!simple">
        <Button
          v-if="isFolded"
          :class="_buttonClass"
          size="small"
          @click="toPage(1)"
          :type="getButtonType(1)"
        >
          1
        </Button>
        <Button
          v-show="isFolded && isPrevMoreShow"
          :class="[_buttonClass, `${name}__btn-prev-more`]"
          size="small"
          icon="more"
          icon-only
          @click="prevMorePage"
        />

        <Button
          size="small"
          v-for="i in pages"
          :key="i"
          :class="_buttonClass"
          :type="getButtonType(i)"
          @click="toPage(i)"
        >
          {{ i }}
        </Button>

        <Button
          :class="[_buttonClass, `${name}__btn-next-more`]"
          v-show="isFolded && isNextMoreShow"
          size="small"
          icon="more"
          icon-only
          @click="nextMorePage"
        />
        <Button
          v-if="isFolded"
          :class="_buttonClass"
          size="small"
          @click="toPage(_pageCount)"
          :type="getButtonType(_pageCount)"
        >
          {{ _pageCount }}
        </Button>
      </template>
      <template v-else>
        <div :class="`${name}__simple`">
          <Input
            :class="`${name}__simple-input`"
            type="number"
            size="small"
            v-model="toIndex"
            @enter="jumpToPage"
            :min="1"
          />
          <span :class="`${name}__simple-total`">/ {{ _pageCount }}</span>
        </div>
      </template>

      <Button
        :class="_buttonClass"
        size="small"
        icon="right"
        icon-only
        @click="nextPage"
        :disabled="currIndex === _pageCount"
      />
    </div>

    <template v-if="pageSizeOption && pageSizeOption.length">
      <Select
        size="small"
        :class="`${name}__page-size-selector`"
        :value="pageSizeOptionValue || _pageSizeOption[0]"
        @change="onPageSizeChange"
      >
        <SelectOption
          v-for="(value, i) in _pageSizeOption"
          :value="value"
          :label="`${value}条/页`"
          :key="i"
        />
      </Select>
    </template>

    <template v-if="showJumper">
      <div :class="`${name}__jumper`">
        跳至
        <Input
          :class="`${name}__jumper-input`"
          type="number"
          size="small"
          v-model="toIndex"
          @enter="jumpToPage"
          :min="1"
        />页
      </div>
    </template>
  </div>
</template>

<script>
import Input from '../input';
import Button from '../button';
import Select from '../select';

const name = 'hive-pagination';

export default {
  name,
  components: {
    Input,
    Button,
    Select,
    SelectOption: Select.SelectOption
  },
  props: {
    /**
     * 当前页
     */
    index: {
      type: Number,
      default: 1
    },
    /**
     * 分页大小
     */
    pageSize: Number,
    /**
     * 总记录数
     */
    total: Number,
    /**
     * 简洁模式
     */
    simple: Boolean,
    /**
     * 页数
     */
    pageCount: Number,
    /**
     * 可选分页大小
     */
    pageSizeOption: Array,
    /**
     * 最多显示页码按钮数
     */
    maxPageBtn: {
      type: Number,
      default: 10
    },
    /**
     * 折叠时最多显示页码按钮数
     */
    foldedMaxPageBtn: {
      type: Number,
      default: 5
    },
    /**
     * 显示跳转输入框
     */
    showJumper: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currIndex: this.index,
      toIndex: this.index,
      pageSizeOptionValue: null,
      name: name
    };
  },
  computed: {
    _class() {
      return [
        name,
        {
          [`${name}-${this.size}`]: this.size
        }
      ];
    },
    _buttonClass() {
      return [
        `${name}__btn`
      ];
    },

    _pageCount() {
      return this.pageCount || Math.ceil(this.total / this._pageSize);
    },

    _pageSize() {
      return this.pageSize || this.pageSizeOptionValue || this._pageSizeOption[0] || 10;
    },

    _pageSizeOption() {
      return this.pageSizeOption.indexOf(this.pageSize) === -1
        ? this.pageSizeOption : this.pageSizeOption.concat(this.pageSize).sort((a, b) => a - b);
    },

    curPageLeftCount() {
      return Math.ceil((this.foldedMaxPageBtn - 1) / 2);
    },

    curPageRightCount() {
      return parseInt((this.foldedMaxPageBtn - 1) / 2);
    },

    isPrevMoreShow() {
      return 2 + this.curPageLeftCount < this.currIndex;
    },

    isNextMoreShow() {
      return this._pageCount - 1 - this.curPageRightCount > this.currIndex;
    },

    pages() {
      const array = [];
      let start;
      let end;

      if (this.isFolded) {
        if (this.isPrevMoreShow && this.isNextMoreShow) {
          start = this.currIndex - this.curPageLeftCount;
          end = this.currIndex + this.curPageRightCount;
        } else {
          start = this.isPrevMoreShow ? this._pageCount - this.foldedMaxPageBtn + 1 : 2;
          end = this.isPrevMoreShow ? this._pageCount - 1 : this.foldedMaxPageBtn;
        }
      } else {
        start = 1;
        end = this._pageCount;
      }

      for (let i = start; i <= end; i++) {
        array.push(i);
      }
      return array;
    },
    isFolded() {
      return this._pageCount > this.maxPageBtn;
    }
  },
  watch: {
    index(value) {
      this.currIndex = value;
    },
    currIndex(value, oldValue) {
      if (value === oldValue) return;
      this.toIndex = value;
      /**
       * 翻页事件
       * @param {Number} value 当前页数
       */
      this.$emit('change', value);
    }
  },

  methods: {
    toPage(pageIndex) {
      if (pageIndex < 1) {
        pageIndex = 1;
      } else if (pageIndex > this._pageCount) {
        pageIndex = this._pageCount;
      }
      this.currIndex = pageIndex;
    },
    prevPage() {
      this.toPage(this.currIndex - 1);
    },
    nextPage() {
      this.toPage(this.currIndex + 1);
    },
    prevMorePage() {
      this.toPage(this.currIndex - this.foldedMaxPageBtn);
    },
    nextMorePage() {
      this.toPage(this.currIndex + this.foldedMaxPageBtn);
    },
    jumpToPage() {
      this.currIndex = +this.toIndex;
    },
    getButtonType(index) {
      return this.currIndex === index ? 'primary' : '';
    },
    onPageSizeChange(value) {
      this.pageSizeOptionValue = value;

      const pageCount = Math.ceil(this.total / value);
      if (this.currIndex > pageCount) this.currIndex = pageCount;
      /**
       * 分页大小变化事件
       * @param {Number} pageSize 分页大小
       * @param {Number} index 当前页
       */
      this.$emit('pageSizeChange', value, this.currIndex);
    }
  }
};
</script>
