<template>
  <a-pagination
    v-model="current"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
    :page-size="pageSize"
    @showSizeChange="onShowSizeChange"
    :show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
  >
  </a-pagination>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSizeOptions: {
      type: Array,
      default() {
        return ['10', '20',  '50', '100']
      },
    },
  },
  data() {
    return {
      pageSize: 10,
      current: 1,
    }
  },
  mounted() {},
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = current
      this.$emit('onShowSizeChange', current, pageSize)
    },
  },
  watch: {
    current(val) {
      this.$emit('onShowSizeChange', val, this.pageSize)
    },
  },
}
</script>

<style scoped>
.ant-pagination {
  text-align: right !important;
  margin-top: 20px !important;
}
</style>