<template>
  <el-pagination
    v-model:current-page="props.pageObj.SkipCount"
    v-model:page-size="props.pageObj.MaxResultCount"
    :page-sizes="[10, 20, 50, 100]"
    background
    :small="props.small"
    layout="total, sizes, prev, pager, next, jumper"
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
  const emits = defineEmits(['update:pageObj', 'change'])
  const handleSizeChange = (e: any) => {
    emits('update:pageObj', { MaxResultCount: e, SkipCount: props.pageObj.SkipCount })
    emits('change')
  }
  const handleCurrentChange = (e: any) => {
    emits('update:pageObj', { MaxResultCount: props.pageObj.MaxResultCount, SkipCount: e })
    emits('change')
  }
  const props = defineProps({
    small: {
      type: Boolean,
      default: true
    },
    total: {
      type: Number,
      default: 0
    },
    pageObj: {
      type: Object,
      require: true,
      default: () => ({
        SkipCount: 1,
        MaxResultCount: 10
      })
    }
  })
  const resetPage = () => {
    emits('update:pageObj', { MaxResultCount: 10, SkipCount: 1 })
  }
  defineExpose({
    resetPage
  })
</script>

<style lang="less" scoped></style>
