<template>
  <div class='hae-pagination'>
    <flexbox :gutter="0" wrap="wrap">
      <flexbox-item :span="1 / 3">
        <x-button @click.native="goPrevPage" :disabled="current == 1"  type="default">{{prevText}}</x-button>   
      </flexbox-item>
      <flexbox-item :span="1 / 3">
        <div class='hae-pagination-pagenum'><span class="current-page">{{current}}</span> / {{total}}</div>
      </flexbox-item>
      <flexbox-item :span="1 / 3">
        <x-button @click.native="goNextPage" :disabled="current >= total"  type="default">{{nextText}}</x-button>
      </flexbox-item>
    </flexbox>
  </div>
</template>
<script>
import Flexbox from '../flexbox/flexbox'
import FlexboxItem from '../flexbox/flexbox-item'
import XButton from '../x-button'
export default {
  name: 'pagination',
  data () {
    return {
      current: 1
    };
  },
  components: {
    XButton,
    Flexbox,
    FlexboxItem
  },
  props: {
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    total: {
      type: Number,
      required: true
    }
  },
  methods: {
    goNextPage () {
      if (this.current >= this.total) {
        return;
      }
      this.current += 1;
      this.$emit('next');
    },
    goPrevPage () {
      if (this.current <= 1) {
        return;
      }
      this.current -= 1;
      this.$emit('prev');
    }
  }
};
</script>
<style lang='less'>
  .current-page {
    color: #108ee9;
  }
  .hae-pagination-pagenum {
    text-align:center;
  }
</style>