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

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

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