<template>
	<view class="zui-pagination">
		<view class="zui-pagination__btn" :class="currentIndex === 1 ? 'zui-pagination--disabled' : 'zui-pagination--enabled'"
		 :hover-class="currentIndex === 1 ? '' : 'zui-pagination--hover'" :hover-start-time="20" :hover-stay-time="70"
		 @click="clickLeft">
			<template v-if="showIcon===true || showIcon === 'true'">
        <zui-icon name="return"></zui-icon>
			</template>
			<text class="zui-pagination__child-btn">{{ prevText }}</text>
		</view>
		<view class="zui-pagination__num">
			<view class="zui-pagination__num-current">
				<text class="zui-pagination__num-current-text" style="color:#007aff">{{ currentIndex }}</text><text class="zui-pagination__num-current-text">/{{ maxPage || 0 }}</text>
			</view>
		</view>
		<view class="zui-pagination__btn" :class="currentIndex === maxPage ? 'zui-pagination--disabled' : 'zui-pagination--enabled'"
		 :hover-class="currentIndex === maxPage ? '' : 'zui-pagination--hover'" :hover-start-time="20" :hover-stay-time="70"
		 @click="clickRight">
			<text class="zui-pagination__child-btn">{{ nextText }}</text>
      <template v-if="showIcon===true || showIcon === 'true'">
      	<zui-icon name="enter"></zui-icon>
      </template>
		</view>
	</view>
</template>

<script>
import ZuiIcon from '../icon/index.vue';
/**
 * Pagination 分页器
 * @description 分页器组件，用于展示页码、请求数据等
 * @tutorial https://ext.dcloud.net.cn/plugin?id=32
 * @property {String} prevText 左侧按钮文字
 * @property {String} nextText 右侧按钮文字
 * @property {Number} current 当前页
 * @property {Number} total 数据总量
 * @property {Number} pageSize 每页数据量
 * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
 * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
 */
export default {
  components: {
    ZuiIcon,
  },
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    current: {
      type: [Number, String],
      default: 1
    },
    total: { // 数据总量
      type: [Number, String],
      default: 0
    },
    pageSize: { // 每页数据量
      type: [Number, String],
      default: 10
    },
    showIcon: { // 是否以 icon 形式展示按钮
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      currentIndex: 1
    }
  },
  computed: {
    maxPage() {
      let maxPage = 1
      let total = Number(this.total)
      let pageSize = Number(this.pageSize)
      if (total && pageSize) {
        maxPage = Math.ceil(total / pageSize)
      }
      return maxPage
    }
  },
  watch: {
    current(val) {
      this.currentIndex = +val
    },
  },
  created() {
    this.currentIndex = +this.current
  },
  methods: {
    clickLeft() {
      if (Number(this.currentIndex) === 1) {
        return
      }
      this.currentIndex -= 1
      this.change('prev')
    },
    clickRight() {
      if (Number(this.currentIndex) === this.maxPage) {
        return
      }
      this.currentIndex += 1
      this.change('next')
    },
    change(e) {
      this.$emit('change', {
        type: e,
        current: this.currentIndex
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.zui-pagination {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  position: relative;
  overflow: hidden;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.zui-pagination__btn {
  display: inline-flex;
  font-size: $font-md;
  position: relative;
  background-color: $color-blue;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: $color-blue;
  color: $color-white;
  border-radius: $radius-md;
  box-sizing: border-box;
  padding: $padding-sm;
  .zui-icon {
    font-size: $font-lg;
    color: $color-white;
  }
}
.zui-pagination__child-btn {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  font-size: $font-md;
  position: relative;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: $color-white;
}
.zui-pagination__num {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 30px;
  line-height: 30px;
  font-size: $font-md;
  color: $color-text;
}
.zui-pagination__num-current {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}
.zui-pagination__num-current-text {
  font-size: 15px;
}
.zui-pagination--enabled {
  color: #333333;
  opacity: 1;
}
.zui-pagination--disabled {
  opacity: 0.3;
  /* #ifdef H5 */
  cursor: not-allowed;
  /* #endif */
}
.zui-pagination--hover {
  color: rgba(0, 0, 0, .6);
  background-color: darken($color-blue, 2%);
}
</style>