<template>
  <view class="pagination">
    <text :disabled="page <= 1" @tap.stop="gotoPage(page - 1)"><</text>
    <text v-for="item in pages" :key="getItemKey(item)" :class="{ active: item === page, ellipsis: item === '...' }" @tap.stop="gotoPage(item)">{{ item }}</text>
    <text :disabled="page >= totalPages" @tap.stop="gotoPage(page + 1)">></text>
	<text class="page_txt mgl10">跳转到</text>
	<input type="number" class="page_input" v-model="val" @blur.stop="inputPage">
	<text class="page_txt">页</text>
  </view>
</template>
 
<script>
export default {
  name: 'Pagination',
  data () {
	  return {
		  val: ''
	  }
  },
  props: {
    total: { // 总条目数
      type: Number,
      required: true
    },
    pageSize: { // 每页显示的条目数
      type: Number,
      default: 10
    },
    currentPage: { // 当前页码
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() { // 总页数
      return Math.ceil(this.total / this.pageSize)
    },
    page() { // 当前页码，限定在 1 和总页数之间
      return Math.max(1, Math.min(this.currentPage, this.totalPages))
    },
    pages() { // 可点击的页码数组，最多显示 5 个页码
      const arr = []
      let start = Math.max(this.page - 2, 1)
      let end = Math.min(start + 4, this.totalPages)
      if (end - start < 4) {
        end = Math.min(start + 4, this.totalPages)
        start = Math.max(end - 4, 1)
      }
      for (let i = start; i <= end; i++) {
        arr.push(i)
      }
      if (end < this.totalPages) {
        arr.push('...', this.totalPages)
      }
      return arr
    }
  },
  methods: {
    getItemKey(item) { // 获取项的 key
      return typeof item === 'number' ? item.toString() : item
    },
    gotoPage(page) { // 跳转到指定页码
      if (page > 0 && page <= this.totalPages) {
        this.$emit('page-change', page)
      }
    },
	inputPage() { // 跳转到指定页码
		const numericValue = Number(this.val)
		if (numericValue > 0 && numericValue <= this.totalPages) {
			this.$emit('page-change', numericValue)
		}
	}
  }
}
</script>
 
<style lang="stylus" scoped>
@import '@/common/style/mixin.styl';
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 20px 0;
}
text,.page_input {
  display: inline-block;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  margin-right: 10px;
  _font(13px, 26px, #606266,,)
}
 
text.active {
  border-color: #ff6a00;
  color: #ff6a00;
}
 
text.ellipsis {
  cursor: default;
}
.page_input {
	width: 50px
	height: 28px;
	text-align: center;
}
.page_txt {
}
.mgl10 {
	margin-left: 20px
}
</style>