<template>
  <div class="pagination-container">
    <el-pagination
      style="width: auto;"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :disabled="disabled"
      :background="background"
      size="small"
      :layout="layout"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
// 定义组件接收的属性
const props = defineProps({
  // 当前页码（双向绑定）
  modelValue: {
    type: Number,
    required: true,
    default: 1,
  },
  // 每页显示条数（双向绑定）
  pageSizeValue: {
    type: Number,
    required: true,
    default: 10,
  },
  // 总数据条数
  total: {
    type: Number,
    required: true,
    default: 0,
  },
  // 可选的每页条数
  pageSizes: {
    type: Array as PropType<number[]>,
    default: () => [1, 10, 20, 50, 100] as unknown[],
  },
  // 是否禁用分页
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否显示分页背景
  background: {
    type: Boolean,
    default: true,
  },
  // 分页布局（Element Plus 原生配置）
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper',
  },
})

// 定义派发的事件
const emit = defineEmits([
  // 页码变更事件（v-model 双向绑定）
  'update:modelValue',
  // 每页条数变更事件（v-model 双向绑定）
  'update:pageSizeValue',
  // 分页变更统一回调（方便父组件处理）
  'pagination-change',
])

// 内部当前页（同步props）
const currentPage = computed({
  get: () => props.modelValue,
  set: (val: number) => emit('update:modelValue', val),
})
// 内部每页条数（同步props）
const pageSize = computed({
  get: () => props.pageSizeValue,
  set: (val: number) => emit('update:pageSizeValue', val),
})

// 每页条数变更处理
const handleSizeChange = (val: number) => {
  emit('update:pageSizeValue', val)
  emit('pagination-change', { currentPage: currentPage.value, pageSize: val })
}

// 当前页变更处理
const handleCurrentChange = (val: number) => {
  emit('update:modelValue', val)
  emit('pagination-change', { currentPage: val, pageSize: pageSize.value })
}
</script>

<style scoped lang="scss">
.pagination-container {
  // position: fixed;
  // bottom: 20px;
  // float: right;
  width: 100%;
  display: flex;
  padding:  10px 10px 0px 10px;
  background-color: #fff;
  justify-content: flex-end;
  align-items: flex-end;
  // right: 20px;
  // z-index: 1000;
}
</style>
