<template>
  <div class="mobile-pagination">
    <!-- 每页条数选择 -->
    <div class="per-page">
      <span class="label">{{ $t('common.perPage') || '每页' }}</span>
      <el-select class="limit-select" :model-value="props.limit" size="small" @change="onLimitChange">
        <el-option v-for="s in props.pageSizes" :key="s" :label="`${s} / 页`" :value="s" />
      </el-select>
    </div>

    <el-button type="primary" size="small" :disabled="currentPage <= 1" @click="loadPreviousPage">
      {{ $t('employee.previous') || '上一页' }}
    </el-button>

    <span class="page-info">
      {{ currentPage }} / {{ totalPages }}
    </span>

    <el-button type="primary" size="small" :disabled="currentPage >= totalPages" @click="loadNextPage">
      {{ $t('employee.loadNext') || '下一页' }}
    </el-button>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from 'vue'
import { useI18n } from 'vue-i18n' // 如你项目已做自动导入可去掉
const { t } = useI18n()

const props = defineProps({
  page: { type: Number, required: true },
  limit: { type: Number, required: true },
  total: { type: Number, required: true },
  // 新增：可配置每页条数选项
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  }
})

const emits = defineEmits([
  'update:page',
  'update:limit',   // 新增：v-model:limit
  'size-change',    // 新增：告知父组件条数变化
  'load',
  'loadPre'
])

const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.limit)))
const currentPage = computed(() => props.page)

const loadNextPage = () => {
  if (currentPage.value < totalPages.value) {
    emits('update:page', currentPage.value + 1) // 修复：改为 +1
    emits('load') // 触发外部方法加载下一页数据
  }
}

const loadPreviousPage = () => {
  if (currentPage.value > 1) {
    emits('update:page', currentPage.value - 1) // 修复：改为 -1
    emits('loadPre')
  }
}

// 新增：每页条数变化
const onLimitChange = (val) => {
  if (val !== props.limit) {
    emits('update:limit', val)
    // 通常切换每页条数后回到第一页避免越界
    if (currentPage.value !== 1) emits('update:page', 1)
    emits('size-change', val)
    emits('load') // 重新加载数据
  }
}
</script>

<style scoped>
.mobile-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0;
  gap: 16px;
  flex-wrap: wrap;
}

.per-page {
  display: flex;
  align-items: center;
  gap: 8px;
}

.per-page .label {
  font-size: 14px;
  color: #666;
}

.limit-select {
  width: 110px;
}

.page-info {
  font-size: 14px;
  color: #666;
}
</style>
