@danger: #cc3600; 
@primary: #6b9eee; 
@words: #373737; 
@lightWords: #999; 
@warn: #dc6a12; 
@success: #7ebf50; 
@gray: #b4b8bc; 
@dark: #202020;

<template>
  <!-- //只有總頁(yè)數(shù)大于1的時(shí)候才會(huì)顯示，比較穩(wěn)定,選擇用vif否則沒(méi)有意義 -->
  <div class="pager-container" v-if="pageNumber > 1">
    <!-- 子組件無(wú)權(quán)更改數(shù)據(jù)，在父組件中數(shù)據(jù)更改可能會(huì)影響到其他，所以子組件只能通過(guò)發(fā)出通知的形式告訴父組件 -->
    <!-- 點(diǎn)擊的時(shí)候調(diào)用h函數(shù)，傳入適當(dāng)?shù)膮?shù)，大返回就傳入第一頁(yè)，小返回就傳入當(dāng)前頁(yè)數(shù)-1 -->
    <!-- 注意a標(biāo)簽沒(méi)有href，如果寫上了就會(huì)存在重新加載頁(yè)面的問(wèn)題 -->
    <a @click="handleClick(1)" :class="{ disabled: current === 1 }"
      >|&lt;&lt;</a
    >
    <a
      @click="handleClick(current - 1)"
      :class="{ disabled: current === 1 }"
      >&lt;&lt;</a
    >
    <!-- 循環(huán)生成的數(shù)組,設(shè)置唯一值,并且判斷添加active樣式(當(dāng)前頁(yè)是否為) -->
    <!-- 當(dāng)前頁(yè)是多少就傳入多少 -->
    <a
      @click="handleClick(tem)"
      v-for="(tem, i) in numbers"
      :key="i"
      :class="{ active: tem === current }"
      >{{tem}}</a
    >
    <a
      @click="handleClick(current + 1)"
      :class="{ disabled: current === pageNumber }"
      >&gt;&gt;</a
    >
    <a
      @click="handleClick(pageNumber)"
      :class="{ disabled: current === pageNumber }"
      >&gt;&gt;|</a
    >
  </div>
</template>

<style lang="less" scoped>
@import "../styles/var.less";
.pager-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  a {
    color: @primary;
    margin: 0 6px;
    cursor: pointer;
    &.disabled {
      color: @lightWords;
      cursor: not-allowed;
    }
    &.active {
      color: @words;
      font-weight: bold;
      cursor: text;
    }
  }
}
</style>

<script>
export default {
  computed: {
    pageNumber: function () {
      return Math.ceil(this.total / this.limit); //總條數(shù)/每頁(yè)限制10條 得到頁(yè)數(shù)
    },
    getMax() {
      let max = this.getMin + this.visibleNumber - 1;
      if (max > this.pageNumber) {
        max = this.pageNumber;
      }
      return max;
    },
    getMin() {
      //得到顯示頁(yè)碼中最小的數(shù)字
      //當(dāng)前頁(yè)面減去最多顯示頁(yè)碼數(shù)的一半得到顯示最小的那個(gè)
      let min = this.current - Math.floor(this.visibleNumber / 2);
      if (min < 1) {
        min = 1;
      }
      return min;
    },
    numbers() {
      let arr = [];
      for (let i = this.getMin; i <= this.getMax; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
  methods: {
    handleClick(newPage) {
      //如果新頁(yè)面小于1則賦值為1，大于最大的頁(yè)數(shù)則賦值為最大頁(yè)數(shù)，等于當(dāng)前頁(yè)數(shù)直接return
      if (newPage < 1) {
        newPage = 1;
      }
      if (newPage > this.pageNumber) {
        newPage = this.pageNumber;
      }
      if (newPage === this.current) {
        return;
      }
      //拋出事件通知父組件
      //參數(shù)：名字，數(shù)據(jù)
      this.$emit("pageChange", newPage);
    },
  },
  props: {
    current: {
      //當(dāng)前頁(yè)
      type: Number,
      default: 1,
    },
    total: {
      //總條數(shù)
      type: Number,
      default: 0,
    },
    limit: {
      //每頁(yè)展示多少條
      type: Number,
      default: 10,
    },
    // 最多顯示頁(yè)碼的個(gè)數(shù)
    visibleNumber: {
      type: Number,
      default: 10,
    },
  },
};
</script>

<template>
  <div>
    <Pager
      :total="total"
      :current="current"
      @pageChange="handlePageChange($event)"
    ></Pager>
  </div>
  <!-- <h1 v-if="score>=80">U</h1>
    <h2 v-else-if="score>=60">L</h2>
    <h3 v-else>X</h3> -->
  <!-- vif會(huì)添加和刪除元素，控制是否生成對(duì)應(yīng)的dom，而vshow始終都會(huì)生成dom用dom控制style：display：none，vif則是直接刪除元素 -->
  <!-- 使用vif可以有效的減少樹的節(jié)點(diǎn)和渲染量，但是也會(huì)導(dǎo)致樹的不穩(wěn)定，而vshow可以保持?jǐn)?shù)的穩(wěn)定，但不能減少樹的節(jié)點(diǎn)和渲染量 -->
  <!-- 因此，在實(shí)際開發(fā)中，顯示頻繁變化的情況下應(yīng)該用vshow，用以保持樹的穩(wěn)定，顯示狀態(tài)變化少的時(shí)候用vif，用以減少樹的節(jié)點(diǎn)和渲染量 -->
</template>
<script>
import Pager from "./components/Page.vue";
export default {
  components: {
    Pager,
  },
  methods: {
    handlePageChange(newPage) {
      this.current = newPage;
    },
  },
  data() {
    return {
      current: 1,
      total: 302,
    };
  },
};
</script>
<style scoped>
.iconfont {
  font-size: 90px;
  color: black;
}
</style>