<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <a-pagination
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @change="handleChange"
      @showSizeChange="handleChange"
    >
    </a-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pageSizeOptions: ["15", "30", "50", "100", "200", "500", "1000", "2000"],
    };
  },
  methods: {
    handleChange(page, size) {
      this.$emit("change", { page, size });
    },
  },
};
</script>

<style scoped>
.pagination-container {
  padding: 32px 16px;
  background: #fff;
  text-align: right;
}
.pagination-container.hidden {
  display: none;
}
</style>
