<template>
  <div class="bk-pagination">
    <div class='page-container' v-if="type === 'normal'">
      <div class='before-page' :class="{disabled: current === 1}" @click="onPageChange('oper', -1)">上一页</div>
      <div 
        v-for='item in pageOpts' 
        :key="item" 
        :class="{
          active: current === item,
          disabled: item > maxPage
        }" 
        class='page-item' 
        @click="onPageChange( 'page', item)"
      >{{item}}</div>
      <div class='after-page' :class="{disabled: current === maxPage}" @click="onPageChange('oper', 1)">下一页</div>
    </div>
    <div class='page-container' v-if="type === 'simple'">
      <div class='before-page' :class="{disabled: current === 1}" @click="onPageChange('oper', -1)">上一页</div>
      <div class='page-info'>{{current}} / {{maxPage}}</div>
      <div class='after-page' :class="{disabled: current === maxPage}" @click="onPageChange('oper', 1)">下一页</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    type: {
      type: String,
      default: 'normal'
    },
    pageChange: this.pageChange
  },
  computed: {
    maxPage: function () {
      return Math.ceil(this.total / this.pageSize)
    }
  },
  data: () => {
    return {
      pageOpts: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    onPageChange (type, pageOper) {
      let page
      page = type !== 'oper' ? pageOper : this.current + pageOper
      if (page <= 0 || page > this.maxPage) {
        return
      }
      const first = this.pageOpts[0]
      const last = this.pageOpts[4]
      let currentOpt = last
      if (page === first) {
        currentOpt = currentOpt - 2
      } else if (page === last) {
        currentOpt = currentOpt + 2
      }
      currentOpt = this.maxPage < currentOpt ? this.maxPage : currentOpt
      currentOpt = currentOpt < 5 ? 5 : currentOpt
      this.pageOpts = [currentOpt - 4, currentOpt - 3, currentOpt - 2, currentOpt - 1, currentOpt]
      this.current = page
      this.pageChange(page, this.pageSize)
    }
  }
}
</script>
<style scoped>
.page-container {
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  position: relative;
}
.bk-pagination .before-page, .bk-pagination .after-page {
  font-size: 28px;
  line-height: 80px;
  padding: 0 20px;
  color: #1989fa;
  box-sizing: border-box;
  border: solid 1px #ebedf0;
}
.bk-pagination .after-page {
  border-left: 0;
}
.bk-pagination .page-item {
  flex: 1;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  text-align: center;
  color: #1989fa;
  border-right: 1px solid #ebedf0;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}

.bk-pagination .active {
  color: #fff;
  background-color: #1989fa;
}
.bk-pagination .disabled {
  color: #ccc;
}
.page-info {
  flex: 1;
  height: 80px;
  line-height: 80px;
  font-size: 28px;
  text-align: center;
  color: #1989fa;
  border-top: 1px solid #ebedf0;
  border-right: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}

</style>


