<template>
  <a-pagination
    v-model:current="pageNum"
    v-model:pageSize="pageSize"
    :total="total"
    showQuickJumper
    :pageSizeOptions="[10, 20, 50]"
    :showTotal="(total) => `共 ${total} 条数据`"
    @change="handleChange"
    @showSizeChange="handleSizeChange"
  />
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits } from 'vue';
  defineProps(['pageNum', 'pageSize', 'total']);
  const emits = defineEmits(['update:pageNum', 'update:pageSize', 'handleChange']);
  const handleChange = (page, pageSize) => {
    emits('update:pageNum', page);
    emits('handleChange');
  };
  const handleSizeChange = (current, size) => {
    emits('update:pageNum', 1);
    emits('update:pageSize', size);
    emits('handleChange');
  };
</script>

<style lang="less" scoped>
  .ant-pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>
