<template>
  <div class="f-page" :style="{ textAlign: simple ? 'center' : 'right' }">
    <Page
      :total="total"
      :page-size="limit"
      :current.sync="page"
      :show-elevator="!simple"
      :show-sizer="!simple"
      show-total
      @on-change="onPageChange"
      @on-page-size-change="onSizeChange"
    ></Page>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    },
    size: {
      type: Number,
      default: 20
    },
    current: {
      type: Number,
      default: 1
    },
    simple: {
      type: Boolean,
      default: false
    }
  },
  name: "f-page",
  watch: {
    limit() {
      this.page = 1;
    },
    current() {
      this.page = this.current;
    }
  },
  data() {
    return {
      page: this.current,
      limit: this.size
    };
  },
  methods: {
    onPageChange(event) {
      this.page = event;
      this.$emit("update:current", this.page);
      this.$emit("on-page-change", event);
    },
    onSizeChange(size) {
      this.limit = size;
      this.page = 1;
      this.$emit("update:current", this.page);
      this.$emit("on-size-change", size);
    },
    reset() {
      // this.limit = this.size;
      this.page = 1;
      this.$emit("update:current", this.page);
    }
  }
};
</script>

<style lang="less">
.f-page {
  border-top: 1px solid #dcdee2;
  padding: 5px 10px;
}
</style>
