<template>
  <div class="ipub-pagination">
    <div v-if="sizeChange"
         class="ipub-pagination__select tl ipub-p1"
         style="margin-right:20px">
      <span>Result / Page</span>
      <ipub-select @change="showSizeChange"
                   class="mar-l-10"
                   style="width:80px"
                   :optionsHeight="80"
                   :value="showPageSize"
                   :options="pageSizeOptions" />
    </div>
    <div @click="handleChange(showCurrent-1)"
         :class="'ipub-pagination__btn ipub-pagination__left ipub-pagination__' + (showCurrent == 1 ? 'disable':'')">
      <ipub-icon type="iconArrow" />
    </div>
    <div class="ipub-pagination__content">
      <template v-if="totalPage<=6">
        <template v-for="n in totalPage">
          <a @click="handleChange(n)"
             :class="n==showCurrent?'active':''"
             :key="'ipub-pagination__content'+n">
            {{n}}</a>
        </template>
      </template>
      <template v-else>
        <template v-if="showCurrent<5">
          <template v-for="n in 5">
            <a @click="handleChange(n)"
               :class="n==showCurrent?'active':''"
               :key="'ipub-pagination__content'+n">
              {{n}}</a>
          </template>
          <span>...</span>
          <a @click="handleChange(totalPage)"
             :class="totalPage==showCurrent?'active':''">{{totalPage}}</a>
        </template>
        <template v-else-if="showCurrent<=totalPage-4">
          <a @click="handleChange(1)"
             :class="showCurrent==1?'active':''">1</a>
          <span>...</span>
          <template v-for="n in 5">
            <a @click="handleChange(showCurrent + n - 3)"
               :class="showCurrent==showCurrent + n - 3?'active':''"
               :key="'ipub-pagination__content'+n">
              {{showCurrent + n - 3}}</a>
          </template>
          <span>...</span>
          <a @click="handleChange(totalPage)"
             :class="totalPage==showCurrent?'active':''">{{totalPage}}</a>
        </template>
        <template v-else>
          <a @click="handleChange(1)"
             :class="showCurrent==1?'active':''">1</a>
          <span>...</span>
          <template v-for="n in 5">
            <a @click="handleChange(totalPage + n - 5)"
               :class="showCurrent==(totalPage + n - 5)?'active':''"
               :key="'ipub-pagination__content'+n">
              {{totalPage + n - 5}}</a>
          </template>
        </template>
      </template>
    </div>
    <div @click="handleChange(showCurrent+1)"
         :class="'ipub-pagination__btn ipub-pagination__right ipub-pagination__' + (showCurrent == totalPage ? 'disable':'')">
      <ipub-icon type="iconArrow" />
    </div>
    <div v-if="showQuickJumper"
         class="ipub-pagination__jump mar-l-20 tl ipub-p1">
      <span style="line-height: 30px;">Jump to page</span>
      <ipub-input @blur="onBlur"
                  @focus="initKeyup"
                  ref="ipub-pagination__jump__input"
                  class="mar-l-10"
                  style="width:50px;height:40px"
                  v-model="showCurrentDom"
                  :options="pageSizeOptions" />
    </div>
  </div>
</template>

<script>
import IpubSelect from '../../select'
export default {
  name: 'IpubPagination',
  components: {
    IpubSelect
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: [Number, String],
      default: 10
    },
    pageSizeOptions: {
      type: Array,
      default () {
        return [10, 20, 50]
      }
    },
    sizeChange: {
      type: Boolean,
      default: false
    },
    showQuickJumper: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showCurrent: 1,
      showPageSize: 10,
      isFocus: false,
      isModel: false,
      showCurrentDom: 1
    }
  },
  watch: {
    current: {
      handler (val) {
        this.showCurrent = parseInt(val)
      },
      immediate: true
    },
    pageSize: {
      handler (val) {
        this.showPageSize = parseInt(val)
      },
      immediate: true
    }
  },
  computed: {
    totalPage () {
      if (this.total == 0) {
        return 1
      } else if ((Math.floor(this.total % this.showPageSize) == 0)) {
        return Math.floor(this.total / this.showPageSize)
      } else {
        return Math.floor(this.total / this.showPageSize) + 1
      }
    }
  },
  mounted () {
    this.showCurrent = this.current
    this.showPageSize = this.pageSize
  },
  methods: {
    handleChange (current) {
      if (current <= 0 || current > this.totalPage) {
        return
      }
      this.showCurrent = current
      this.$emit('change', current, this.showPageSize)
    },
    showSizeChange (val) {
      this.showCurrent = 1
      this.$emit('showSizeChange', this.showCurrent, val)
    },

    // 绑定输入框回车事件
    initKeyup () {
      this.isFocus = true
      document.onkeyup = e => {
        // 兼容FF和IE和Opera
        var event = e || window.event
        var key = event.which || event.keyCode || event.charCode
        if (key == 13) {
          this.handleChange(this.showCurrentDom)
        }
      }
    },

    onBlur () {
      if (this.isFocus) {
        document.onkeyup = null
      }
      this.isFocus = false
    }
  }
}
</script>

<style lang="scss" scoped>
.ipub-pagination {
  display: inline-flex;
  line-height: 16px;
  height: 16px;
  justify-content: center;
  .ipub-pagination {
    &__btn {
      display: inline-block;
      background: $main-color;
      color: #fff;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      text-align: center;
      font-size: 8px;
      cursor: pointer;
    }
    &__left {
      transform: rotate(90deg);
    }
    &__right {
      transform: rotate(-90deg);
    }
    &__content {
      margin: 0 20px;
      a {
        width: 30px;
        display: inline-block;
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
        font-family: $p_family;
        text-align: center;
        transition: 0.3s all;
        &:last-child {
          margin-right: 0;
        }
        &::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 50%;
          height: 2px;
          width: 0;
          background: $link_color;
          transition: 0.3s all;
        }
        &:hover,
        &.active {
          position: relative;
          color: $link_color;
          &::after {
            left: calc(50% - 5px);
            width: 10px;
          }
        }
      }
      span {
        margin-right: 20px;
      }
    }
    &__disable {
      background: $disable_color;
      color: $default_color;
    }
    &__select {
      display: inline-flex;
      align-items: center;
    }
  }
  &__jump {
    display: inline-flex;
    align-items: center;
    // line-height: 30px;
  }
}
</style>
