<template>
  <div class="flex flex-col md:flex-row items-center justify-between gap-3 mt-4 text-sm">
    <span class="text-sm text-gray-500 dark:text-gray-400">
      显示 {{ startItem }} 到 {{ endItem }}，共 {{ totalItems }} 项
    </span>

    <div class="flex flex-wrap items-center gap-2 md:gap-4 justify-center md:justify-end">
      <div v-if="showSelectPageSize" class="flex items-center gap-2">
        <span class="hidden sm:inline text-sm text-gray-500 dark:text-gray-400">每页显示</span>
        <select
          class="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 h-8 w-16 dark:text-white dark:border-neutral-700 dark:bg-neutral-900"
          :value="pageSize"
          @change="emitChangePageSize($event)"
        >
          <option v-for="option in pageSizeOptions" :key="option" :value="option">
            {{ option }}
          </option>
        </select>
      </div>

      <span class="px-2 text-sm text-gray-500 dark:text-gray-400">
        {{ currentPage }}/{{ totalPages }}
      </span>

      <div class="flex items-center">
        <button
          class="btn btn-icon btn-sm h-9 w-9 rounded-md border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800"
          :disabled="currentPage === 1"
          @click="emitChangePage(1, pageSize)"  
          aria-label="第一页"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>

        <button
          class="btn btn-icon btn-sm h-9 w-9 rounded-md border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800"
          :disabled="currentPage === 1"
          @click="emitChangePage(currentPage - 1, pageSize)" 
          aria-label="上一页"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>

        <button
          class="btn btn-icon btn-sm h-9 w-9 rounded-md border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800"
          :disabled="currentPage === totalPages"
          @click="emitChangePage(currentPage + 1, pageSize)" 
          aria-label="下一页"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>

        <button
          class="btn btn-icon btn-sm h-9 w-9 rounded-md border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-800"
          :disabled="currentPage === totalPages"
          @click="emitChangePage(totalPages, pageSize)"
          aria-label="最后一页"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref ,watch} from 'vue';

const props = defineProps({
  currentPage: {
    type: Number,
    required: true,
  },
  totalItems: {
    type: Number,
    required: true,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  pageSizeOptions: {
    type: Array,
    default: () => [10, 25, 50, 100],
  },
  showSelectPageSize: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['changePage', 'changePageSize']);

const totalPages = computed(() => {
  return Math.max(1, Math.ceil(props.totalItems / props.pageSize));
});

// 使用一个 ref 来存储内部的 currentPage 状态
const localCurrentPage = ref(props.currentPage);
const localPageSize = ref(props.pageSize);

// 监听 props.currentPage 的变化，并更新 localCurrentPage
watch(() => props.currentPage, (newCurrentPage) => {
  localCurrentPage.value = newCurrentPage;
});

watch(() => props.pageSize, (newPageSize) => {
  localPageSize.value = newPageSize;
});

const emitChangePage = (page, pageSize) => { // 添加了 pageSize 参数
  const validPage = Math.max(1, Math.min(page, totalPages.value));
  if (validPage !== localCurrentPage.value) {
    localCurrentPage.value = validPage;
    emit('changePage', validPage, pageSize); // 将 pageSize 传递给父组件
  }
};

const emitChangePageSize = (event) => {
  const newPageSize = parseInt(event.target.value, 10);
  localPageSize.value = newPageSize;
  emit('changePage', 1, newPageSize); // 确保同时传递 page 和 pageSize
};

const startItem = computed(() => {
  return (localCurrentPage.value - 1) * localPageSize.value + 1;
});

const endItem = computed(() => {
  return Math.min(localCurrentPage.value * localPageSize.value, props.totalItems);
});
</script>
