<template>
  <div class="layer">
    <div class="number">
      <span class="pager" @click="current = current - 1">上一页</span>

      <template v-if="currMin > min">
        <span @click="current = min">{{min}}</span>
        <span v-if="currMin - 1 > min">…</span>
      </template>

      <span 
        v-for="index in numbers" 
        :key="index" 
        :class="{active: index === current}" 
        @click="current = index">
        {{index}}
      </span>


      <template v-if="currMax < max">
        <span v-if="currMax + 1 < max">…</span>
        <span @click="current = max">{{max}}</span>
      </template>

      <span class="pager" @click="current = current + 1">下一页</span>
    </div>

    <span class="total">共 {{max}} 页</span>


    <div class="topage" v-if="false">
      <span>到第</span>
      <input
        type="text"
        :value="current"
        @blur="ev => ev.target.value = current"
        @keyup.enter="ev => current = Number(ev.target.value)"
      >
      <span>页</span>

      <span @click="ev => current = Number(ev.target.value)" class="comfirm">确定</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['paging'],
  data() {
    return {
      ...this.paging
    }
  },
  computed: {
    min() {
      return 1
    },
    max() {
      return Math.ceil(this.total / this.pageSize)
    },
    routineMin() {
      return this.current - Math.ceil(this.showSize / 2)
    },
    routineMax() {
      return this.current + Math.floor(this.showSize / 2)
    },
    currMin() {
      let c = this.max - this.routineMax

      if (this.routineMin <= this.min) {
        return this.min
      } else if (c >= 0) {
        return this.routineMin
      } else if (this.routineMin + c <= this.min) {
        return this.min
      } else {
        return this.routineMin + c
      }
    },
    currMax() {
      let c = this.min - this.routineMin

      if (this.routineMax >= this.max) {
        return this.max
      } else if (c <= 0) {
        return this.routineMax
      } else if (this.routineMax + c >= this.max) {
        return this.max
      } else {
        return this.routineMax + c
      }
    },
    numbers() {
      let total = this.currMax - this.currMin
      let numbers = []

      if (total === 0) {
        numbers.push(1)
      } else {
        for (let i = 0; i <= total; i++) {
          numbers.push(this.currMin + i)
        }
      }
      return numbers
    }
  },
  watch: {
    current(val, old) {
      if (isNaN(this.current)) {
        return this.current = old
      } else if (this.current < this.min) {
        return this.current = this.min
      } else if (this.current > this.max) {
        return this.current = this.max
      }
      this.$emit('changeCurrent', this.current)
    },
    paging: {
      deep:true,
      handler(){
        Object.keys(this.paging).forEach(k => this[k] = this.paging[k])
      }
    },

    'paging.total':function () {
        Object.keys(this.paging).forEach(k => this[k] = this.paging[k])
    }
  }
}
</script>

<style lang="scss" scoped>
.layer {
  user-select: none;
  span {
    font-size: 14px;
    display: inline-block;
    color: #B7120F;
    vertical-align: middle;
    margin: 0 14px;
    &.active {
      color: #fff;
      background: #B7120F;
    }
  }
 
  .number {
    span {
      margin: 0 5px;
      padding: 0 16px;
      cursor: pointer;
      vertical-align: middle;
      line-height: 40px;
      text-align: center;
      &:hover{
        color: #fff;
        background: #B7120F;
      }
    }
    .pager{
      background: #B7120F;
      opacity: .2;
      color: #fff;
      &:hover{
        opacity: 1;
      }
    }
  }
  div {
    display: inline-block;
  }

  .total{
    color: #B7120F;
  }

  .topage{
    margin-left: 14px;
    > input {
      background: none;
      border: 1px solid #999999;
      width:40px;
      height:40px;
      padding: 0 10px;
      border-radius:50%;
      vertical-align: middle;
      text-align: center;
      color: #999999;
    }
    >span{
      margin: 0 10px;
    }
    .comfirm{
      cursor: pointer;
      border: 1px solid #999999;
      border-radius: 20px;
      width: 70px;
      height: 40px;
      vertical-align: middle;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>