<script setup lang="ts">
export interface PaginationInfo {
  pageNo: number
  pageSize: number
  totalPages: number
  totalRows: number
}

interface Props {
  pagingInfo: PaginationInfo
}

const pageSizes = [
  {
    label: '10 / 每页',
    value: 10,
  },
  {
    label: '20 / 每页',
    value: 20,
  },
  {
    label: '30 / 每页',
    value: 30,
  },
  {
    label: '40 / 每页',
    value: 40,
  },
]

interface Emits {
  (e: 'update:pagingInfo', value: PaginationInfo): void
  (e: 'updatePageNo', value: number): void
  (e: 'updatePageSize', value: number): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

async function handleUpdatePageNo(pageNo: number) {
  emit('updatePageNo', pageNo)
}

async function handleUpdatePageSize(pageSize: number) {
  emit('updatePageSize', pageSize)
}
</script>

<template>
  <div class="flex items-center">
    <span class="text-[#999]"> 共 {{ pagingInfo.totalRows }} 页 </span>

    <NPagination
      class="custom-pagination"
      :page="pagingInfo.pageNo"
      :page-count="pagingInfo.totalPages"
      :page-sizes="pageSizes"
      size="medium"
      show-quick-jumper
      show-size-picker
      @update:page="handleUpdatePageNo"
      @update:page-size="handleUpdatePageSize"
    />
    <span class="ml-[10px] text-[#999]">页</span>
  </div>
</template>

<style lang="scss" scoped>
:deep(.custom-pagination .n-pagination-item) {
  padding: 0;
  margin-left: 2px;
  border-radius: 5px;
}

:deep(.custom-pagination .n-pagination-item--button) {
  background-color: white !important;
  border: none !important;
}

:deep(.custom-pagination .n-base-selection) {
  width: 100px;
  border-radius: 6px;

  --n-border: 1px solid #999 !important;
}

:deep(.custom-pagination .n-pagination-quick-jumper),
:deep(.custom-pagination .n-input__input-el),
:deep(.custom-pagination .n-base-selection-input__content) {
  color: #999;
}

:deep(.custom-pagination .n-input) {
  border-radius: 6px;

  --n-border: 1px solid #999 !important;
}
</style>
