<script setup lang="ts">
const props = withDefaults(defineProps<{ page: number; pageSize: number; total: number }>(), {
  page: 1,
  pageSize: 10,
  total: 0
});

const emit = defineEmits<{ "update:page": [page: number] }>();

function next(delta: number): void {
  const pageCount = Math.max(1, Math.ceil(props.total / props.pageSize));
  const page = Math.min(pageCount, Math.max(1, props.page + delta));
  emit("update:page", page);
}
</script>

<template>
  <nav class="table-pagination" aria-label="分页">
    <span>第 {{ page }} / {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，共 {{ total }} 条</span>
    <div>
      <button class="table-action" type="button" :disabled="page <= 1" @click="next(-1)">上一页</button>
      <button class="table-action" type="button" :disabled="page >= Math.max(1, Math.ceil(total / pageSize))" @click="next(1)">下一页</button>
    </div>
  </nav>
</template>
