<template>
  <el-pagination
    v-show="total > 0"
    v-model:current-page="pageNum"
    v-model:page-size="pageSize"
    :page-sizes="pageSizes"
    :total="total"
    background
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="getList"
    @current-change="getList"
  ></el-pagination>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue';

interface QueryParams {
  pageNum: number;
  pageSize: number;
}

const props = defineProps({
  queryParams: {
    type: Object as PropType<QueryParams>,
    required: true,
  },
  total: {
    type: Number,
    required: true,
  },
  pageSizes: {
    type: Array as PropType<number[]>,
    default: () => [10, 15, 20, 50, 100, 200],
  },
  getList: {
    type: Function as PropType<() => void>,
    required: true,
  },
});

const pageNum = computed({
  get: () => props.queryParams.pageNum,
  set: (val: number) => (props.queryParams.pageNum = val),
});

const pageSize = computed({
  get: () => props.queryParams.pageSize,
  set: (val: number) => (props.queryParams.pageSize = val),
});
</script>
