<template>
  <div class="basePagination">
    <a-pagination
      :current="current"
      :page-size="pageSize"
      :defaultPageSize="defaultPageSize"
      :hideOnSinglePage="hideOnSinglePage"
      :total="total"
      :show-total="(total: number) => `共 ${total} 条`"
      @change="change"
      @showSizeChange="showSizeChange"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'BasePagination',
})

type Props = {
  current: number
  pageSize: number
  defaultPageSize?: number
  hideOnSinglePage?: boolean
  total?: number
}
const emit = defineEmits<{
  (e: 'change', current: number, pageSize: number): void
  (e: 'showSizeChange', current: number, pageSize: number): void
  (e: 'update:current', value: number): void
  (e: 'update:pageSize', value: number): void
}>()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = withDefaults(defineProps<Props>(), {
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  hideOnSinglePage: true,
  total: 20,
})

const change = (current: number, pageSize: number) => {
  emit('update:current', current)
  emit('update:pageSize', pageSize)
  emit('change', current, pageSize)
}

const showSizeChange = (current: number, pageSize: number) => {
  emit('update:current', current)
  emit('update:pageSize', pageSize)
  emit('showSizeChange', current, pageSize)
}
</script>

<style scoped lang="less">
.basePagination {
  width: 100%;
  padding: 20px;
  text-align: right;
}
</style>
