<script setup lang="ts">
import { useVModel } from '@vueuse/core'

interface PaginationProps {
  total: number
  currentPage?: number
  pageSize?: number
  pageSizes?: number[]
  layout?: string
  background?: boolean
  small?: boolean
  disabled?: boolean
  hideOnSinglePage?: boolean
}

const props = withDefaults(defineProps<PaginationProps>(), {
  currentPage: 1,
  pageSize: 10,
  pageSizes: () => [10, 20, 50, 100],
  layout: 'total, sizes, prev, pager, next, jumper',
  background: true,
  small: false,
  disabled: false,
  hideOnSinglePage: false
})

const emit = defineEmits<{
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'change', currentPage: number, pageSize: number): void
}>()

const innerCurrentPage = useVModel(props, 'currentPage', emit, { passive: true })
const innerPageSize = useVModel(props, 'pageSize', emit, { passive: true })


function handleChange(currentPage: number, pageSize: number) {
  emit('change', currentPage, pageSize)
}
</script>

<template>
  <div class="pagination-wrapper">
    <el-pagination v-model:current-page="innerCurrentPage" v-model:page-size="innerPageSize" :total="total"
      :page-sizes="pageSizes" :layout="layout" :background="background" :small="small" :disabled="disabled"
      :hide-on-single-page="hideOnSinglePage" @change="handleChange" />
  </div>
</template>

<style lang="scss" scoped>
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
</style>