<template>
  <vxe-pager
    id="ljVxePagination"
    background
    :size="tableSize"
    :current-page="pageable.pageNum"
    :page-size="pageable.pageSize"
    :page-sizes="pageSizes"
    :total="pageable.total"
    :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    @page-change="handlePageChange"
  >
  </vxe-pager>
</template>

<script setup lang="ts" name="LjVxePagination">
import { computed } from "vue";
import { VxeTablePropTypes, VxeTableProps, VxeTableInstance, Colgroup } from "vxe-table";
import { useGlobalStore } from "@/stores/modules/global";

const globalStore = useGlobalStore();
const tableSize = computed(() => {
  let _size: VxeTablePropTypes.Size = "";
  switch (globalStore.assemblySize) {
    case "large":
      _size = "";
      break;
    case "small":
      _size = "mini";
      break;
    default:
      _size = "medium";
      break;
  }
  return _size;
});

interface PageChange {
  currentPage: number;
  pageSize: number;
}

interface Pageable {
  pageNum: number;
  pageSize: number;
  total: number;
}

interface PaginationProps {
  pageable: Pageable;
  pageSizes: number[];
  handlePageChange: ({ currentPage, pageSize }: PageChange) => void;
  // handleSizeChange: (size: number) => void;
  // handleCurrentChange: (currentPage: number) => void;
}

defineProps<PaginationProps>();
</script>
