<template>
  <div class="uif-pager">
    <div class="content">
      <span class="total">{{total}}条</span>
      <u-icon type="chevrons-left" scene="action" :disabled="value <= 1"
            @click="onChange(1)"></u-icon>
      <u-icon type="chevron-left-img" scene="action" :disabled="value <= 1"
            @click="onChange(value - 1)"></u-icon>
      <span class="text">{{value}} / {{max}}</span>
      <u-icon type="chevron-right-img" scene="action" :disabled="value >= max"
            @click="onChange(value + 1)"></u-icon>
      <u-icon type="chevrons-right" scene="action" :disabled="value >= max"
            @click="onChange(max)"></u-icon>
    </div>
  </div>
</template>
<script>
import UIcon from '@uif/hq/lib/components/icon'
export default {
  name: 'u-pager',
  components: {
    UIcon
  },
  props: {
    // 当前页码
    value: {
      type: Number,
      default: 1
    },
    // 数据总数
    total: {
      type: Number,
      default: 0
    },
    // 每页条数
    size: {
      type: Number,
      default: 50
    }
  },
  data () {
    return {
    }
  },
  computed: {
    max () {
      return Math.ceil(this.total / this.size) || 1
    }
  },
  watch: {
  },
  methods: {
    onChange (value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>
