<template>
  <div class="x-page">
    <div class="prev"
         @click="prev()">上一页</div>
    <div class="count">{{page}}/{{total}}</div>
    <div class="next"
         @click="next()">下一页</div>
  </div>
</template>
<script>
export default {
  name: "XPage",
  props: {
    total: {
      type: Number,
      required: true
    },
    current: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      page: this.current
    };
  },
  watch:{
    current(val){
      this.page = val
    }
  },
  methods: {
    prev() {
      if (this.page - 1 < 1) return;
      else this.emit(this.page - 1);
    },
    next() {
      if (this.page + 1 > this.total) return;
      else this.emit(this.page + 1);
    },
    emit(page) {
      this.page = page;
      this.$emit("change", page);
      this.$emit("update:current", page);
    }
  }
};
</script>
