<template>
  <ul class="pagination-w">
    <li class="pagination-item pagination-text" :class="{active: currentPage === 1}" @click="changePage(1)">首页</li>
    <li class="pagination-item pagination-num" :class="{active: item === currentPage}" :key="item"  v-for="item in pageShow" @click="changePage(item)"><a>{{ item }}</a></li>
    <li class="pagination-item pagination-text" :class="{active: currentPage === totalPage}" @click="changePage(totalPage)">末页</li>
  </ul>
</template>

<script>
export default {
  props: {
    total: Number,
    currentPage: Number,
    size: Number
  },
  computed: {
    totalPage () {
      return Math.ceil(this.total / this.size)
    },
    pageShow () {
      let arr = [this.currentPage - 1, this.currentPage, this.currentPage + 1]
      if (this.currentPage < 3) {
        arr.push(this.currentPage + 2)
      } else if (this.currentPage === this.totalPage) {
        arr.unshift(this.currentPage - 2)
      }
      
      // 最后过滤掉小于等于0和大于最大页数的，只保留三个
      return arr.filter(item => item && item > 0 && item <= this.totalPage).slice(0, 3)
    }
  },
  methods: {
    changePage(val) {
      if (val !== this.currentPage) {
        this.$emit('currentChange', val)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.pagination-w {
  padding: 5px;
  height: 43px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.pagination-item a {
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  padding: 1px 6px;
  cursor: pointer;
}
.pagination-num {
  &.active {
    background: @color;
    color: #fff;
    border: 1px solid @color;
  }
}
.pagination-text {
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  padding: 1px 6px;
  cursor: pointer;
  &.active {
    color: #999;
    border-color: #999;
  }
}
</style>
