<template>
  <div class="pagination">
    <div
      class="btn_nav"
      :class="{ 'js-btn_nav_disable': value === 1 }"
      @click="navLeft"
    >
      <i class="iconfont iconyidong btn_nav-icon btn_nav-icon_right"></i>
    </div>
    <span
      class="item_box"
      :class="{ 'js-item_box_active': value === 1 }"
      @click="changePage(1)"
      >1</span
    >
    <span v-if="mid[0] && mid[0] > 2" class="item_box">...</span>
    <span
      v-for="item in mid"
      class="item_box"
      :class="{ 'js-item_box_active': value === item }"
      :key="item"
      @click="changePage(item)"
      >{{ item }}</span
    >
    <span
      v-if="mid.length > 4 && mid[mid.length - 1] < pageCount - 1"
      class="item_box"
      >...</span
    >
    <span
      class="item_box"
      v-if="pageCount > 1"
      :class="{ 'js-item_box_active': value === pageCount }"
      @click="changePage(pageCount)"
      >{{ pageCount }}</span
    >
    <div
      class="btn_nav btn_nav_right"
      :class="{ 'js-btn_nav_disable': value === pageCount }"
      @click="navRight"
    >
      <i class="iconfont iconyidong btn_nav-icon"></i>
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Pagination extends Vue {
  @Prop({ type: Number, required: true }) value!: number; // 从1开始
  @Prop({ type: Number, required: true }) total!: number;
  @Prop({ type: Number, default: 10 }) size!: number;

  public get pageCount() {
    return Math.ceil(this.total / this.size);
  }

  public get mid() {
    const arr = Array.from({ length: this.pageCount }, (value, key) => key + 1);
    if (this.pageCount < 7) {
      return arr.slice(1, this.pageCount - 1);
    }
    if (this.value < 4) {
      return arr.splice(1, 5);
    }
    if (this.value > this.pageCount - 3) {
      return arr.splice(-6, 5);
    }
    return arr.splice(this.value - 3, 5);
  }

  public navLeft() {
    if (this.value !== 1) {
      this.changePage(this.value - 1);
    }
  }

  public navRight() {
    if (this.value !== this.pageCount) {
      this.changePage(this.value + 1);
    }
  }

  public changePage(val: number) {
    if (this.value === val) {
      return;
    }
    this.$emit("input", val);
    this.$emit("change", val);
  }
}
</script>

<style scoped>
.pagination {
  line-height: 20px;
  height: 20px;
  font-size: 0;
}

.item_box {
  vertical-align: top;
  display: inline-block;
  min-width: 20px;
  color: #bababa;
  font-size: 15px;
  margin: 0 2px;
  text-align: center;
  cursor: pointer;
}

.js-item_box_active {
  color: #000;
}

.btn_nav {
  display: inline-block;
  margin: 0 8px 0 0; /* 15 - (20 - 9)/2 - 2*/
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  color: #7a7a7a;
  background: #f1f1f1;
  cursor: pointer;
}

.js-btn_nav_disable {
  cursor: not-allowed;
}

.btn_nav-icon {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  transform: scale(0.5);
}

.btn_nav_right {
  margin: 0 0 0 8px;
}

.btn_nav-icon_right {
  transform: scale(0.5) rotate(180deg);
}
</style>
