<template>
  <div class="layer">
    <!-- <span class="total">共{{total}}条</span> -->

    <div class="number">
      <span class="arrow" @click="current = current - 1"
        ><img
          class="pagejiantou"
          :src="require(`@/assets/images/paging-prev.png`)"
          alt=""
      /></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="arrow" @click="current = current + 1"
        ><img
          class="pagejiantou"
          :src="require(`@/assets/images/paging-next.png`)"
          alt=""
      /></span>
    </div>

    <div 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>
    </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: function (newVal) {
        Object.keys(newVal).forEach((k) => (this[k] = newVal[k]));
      },
    },
  },
};
</script>

<style lang="less" scoped>
.layer {
  span {
    font-size: 14px;
    color: rgba(0, 0, 0, 1);
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    padding: 7px;
    &.active {
      background: linear-gradient(
        90deg,
        rgba(88, 90, 90, 1),
        rgba(148, 145, 152, 1)
      );
      font-size: 12px;
      font-family: Arial;
      font-weight: bold;
      line-height: 14px;
      color: #ffffff;
      opacity: 1;
    }
  }
  .pagejiantou {
    width: 10px;
    transform: translateY(-2px);
    cursor: pointer;
  }

  .number span {
    margin: 0 5px;
    cursor: pointer;
  }
  .number .arrow {
      margin-top:3px;
  }
  div {
    display: inline-block;
  }

  div input {
    background: none;
    border: 1px solid rgba(85, 85, 85, 1);
    width: 46px;
    height: 28px;
    border-radius: 2px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
  }
}
</style>