<template>
  <div class="uif-paginate-wrap">
    <div class="uif-paginate" v-if="simple">
      <u-icon type="chevron-s-left" scene="action" :disabled="value <= 1"
              @click="handleChange(value - 1)"></u-icon>
      <span class="uif-paginate-text">{{value}}</span>
      <u-icon type="chevron-s-right" scene="action" :disabled="!hasMore"
              @click="handleChange(value + 1)"></u-icon>
      <u-icon type="bbs-eye" scene="action" @click="onEyeClick"></u-icon>
    </div>
    <div class="uif-paginate" v-else>
      <span class="uif-paginate-total">{{total}}条</span>
      <u-icon type="chevrons-left" scene="action" :disabled="value <= 1"
              @click="handleChange(1)"></u-icon>
      <u-icon type="chevron-s-left" scene="action" :disabled="value <= 1"
              @click="handleChange(value - 1)"></u-icon>
      <span class="uif-paginate-text">{{value}} / {{max}}</span>
      <u-icon type="chevron-s-right" scene="action" :disabled="value >= max"
              @click="handleChange(value + 1)"></u-icon>
      <u-icon type="chevrons-right" scene="action" :disabled="value >= max"
              @click="handleChange(max)"></u-icon>
    </div>
  </div>
</template>
<script>
import UIcon from '@uif/core/lib/components/icon'

export default {
  name: 'u-paginate',
  components: {UIcon},
  props: {
    // 当前页码
    value: {
      type: Number,
      default: 1
    },
    // 数据总数
    total: {
      type: Number,
      default: 0
    },
    // 每页条数
    size: {
      type: Number,
      default: 50
    },
    simple: {
      type: Boolean,
      default: true
    },
    hasMore: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    max () {
      return Math.ceil(this.total / this.size) || 1
    }
  },
  methods: {
    handleChange (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    },
    onEyeClick () {
      this.$emit('eye-click')
    }
  }
}
</script>
