<!--
  @description 通用加载更多列表组件
  @features
  - 支持自定义头部（通过slot）
  - 支持下拉刷新
  - 支持触底加载更多（带防抖）
  - 支持多种列表项渲染（通过slot）
  - 内置空状态和加载提示
  - 内置列表项动画效果

  @example
  <LoadMoreList
    :list="products"
    :page="page"
    :page-size="pageSize"
    :has-more="hasMore"
    :loading="loading"
    :loading-more="loadingMore"
    key-field="id"
    @load-more="handleLoadMore"
    @refresh="handleRefresh"
  >
    <template #header>
      <NavHeader title="产品中心" />
    </template>
    <template #item="{ item }">
      <ProductCard :product="item" />
    </template>
  </LoadMoreList>
-->
<template>
  <view class="load-more-list" :class="{ 'has-header': showHeader }">
    <!-- 可选固定头部 -->
    <view v-if="showHeader" class="load-more-header sticky top-0 z-10">
      <slot name="header"></slot>
    </view>

    <!-- 列表容器 -->
    <view
      class="load-more-content"
      :class="{ 'no-padding': noPadding }"
    >
      <!-- 首次加载状态 -->
      <view v-if="loading && list.length === 0" class="flex justify-center items-center py-[100rpx]">
        <slot name="loading">
          <view class="loading-spinner"></view>
          <text class="ml-[16rpx] text-[#9CA3AF] text-[28rpx]">加载中...</text>
        </slot>
      </view>

      <!-- 列表内容 -->
      <view v-else class="list-container">
        <view
          v-for="(item, index) in displayList"
          :key="item[keyField] || index"
          class="list-item"
          :style="getAnimationDelay(index)"
        >
          <!-- 使用slot渲染每个列表项 -->
          <slot name="item" :item="item" :index="index"></slot>
        </view>

        <!-- 空状态 -->
        <view v-if="list.length === 0 && !loading && !loadingMore">
          <slot name="empty">
            <nut-empty description="暂无数据" image="empty" />
          </slot>
        </view>

        <!-- 加载更多提示 -->
        <view v-if="list.length > 0" class="load-more-container">
          <view v-if="loadingMore" class="load-more-loading">
            <slot name="loading-more">
              <view class="loading-spinner-small"></view>
              <text class="ml-[16rpx] text-[#9CA3AF] text-[24rpx]">加载中...</text>
            </slot>
          </view>
          <view v-else-if="!hasMore" class="load-more-finished">
            <slot name="no-more">
              <text class="text-[#9CA3AF] text-[24rpx]">没有更多了</text>
            </slot>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { useReachBottom, usePullDownRefresh, stopPullDownRefresh } from '@tarojs/taro'

/**
 * 通用加载更多列表组件
 *
 * @description 封装分页加载逻辑，支持自定义头部、列表项、空状态。
 *           页面只需提供数据源和事件处理，组件内部处理触底加载、状态显示等。
 *
 * @component LoadMoreList
 *
 * @example
 * <!-- 简单列表（无头部） -->
 * <LoadMoreList
 *   :list="products"
 *   :page="page"
 *   :page-size="10"
 *   :has-more="hasMore"
 *   :loading="loading"
 *   :loading-more="loadingMore"
 *   key-field="id"
 *   @load-more="handleLoadMore"
 * >
 *   <template #item="{ item }">
 *     <ProductCard :product="item" />
 *   </template>
 * </LoadMoreList>
 *
 * @example
 * <!-- 带头部和搜索的列表 -->
 * <LoadMoreList
 *   :list="products"
 *   :page="page"
 *   :page-size="10"
 *   :has-more="hasMore"
 *   :loading="loading"
 *   :loading-more="loadingMore"
 *   :enable-pull-down-refresh="true"
 *   @load-more="handleLoadMore"
 *   @refresh="handleRefresh"
 * >
 *   <template #header>
 *     <NavHeader title="产品中心" />
 *     <SearchBar v-model="searchValue" @search="onSearch" />
 *   </template>
 *   <template #item="{ item }">
 *     <ProductCard :product="item" />
 *   </template>
 *   <template #empty>
 *     <nut-empty description="暂无相关产品" image="empty" />
 *   </template>
 * </LoadMoreList>
 */
const props = defineProps({
  /**
   * 列表数据源
   * @type {Array<any>}
   * @description 需要渲染的列表数据数组
   */
  list: {
    type: Array,
    default: () => []
  },

  /**
   * 当前页码
   * @type {number}
   * @description 当前页码（从0或1开始，根据API要求）
   */
  page: {
    type: Number,
    required: true
  },

  /**
   * 每页数量
   * @type {number}
   * @default 10
   * @description 每页显示的数据条数
   */
  pageSize: {
    type: Number,
    default: 10
  },

  /**
   * 是否还有更多数据
   * @type {boolean}
   * @default true
   * @description 用于控制是否显示"没有更多了"提示
   */
  hasMore: {
    type: Boolean,
    default: true
  },

  /**
   * 首次加载状态
   * @type {boolean}
   * @default false
   * @description 首次加载时显示loading，隐藏列表
   */
  loading: {
    type: Boolean,
    default: false
  },

  /**
   * 加载更多状态
   * @type {boolean}
   * @default false
   * @description 加载更多时在列表底部显示loading
   */
  loadingMore: {
    type: Boolean,
    default: false
  },

  /**
   * 唯一标识字段名
   * @type {string}
   * @default 'id'
   * @description 用于v-for的key字段名，确保列表更新正确
   */
  keyField: {
    type: String,
    default: 'id'
  },

  /**
   * 是否显示固定头部
   * @type {boolean}
   * @default true
   * @description 是否在顶部显示固定的头部区域
   */
  showHeader: {
    type: Boolean,
    default: true
  },

  /**
   * 是否启用下拉刷新
   * @type {boolean}
   * @default false
   * @description 启用后，用户下拉会触发refresh事件
   */
  enablePullDownRefresh: {
    type: Boolean,
    default: false
  },

  /**
   * 列表容器是否不需要padding
   * @type {boolean}
   * @default false
   * @description 设为true时，列表容器不添加默认的左右padding
   */
  noPadding: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits({
  /**
   * 加载更多事件
   * @event {number} page - 下一页页码
   * @description 当用户滚动到底部时触发，页码自动+1
   */
  'load-more': (page) => typeof page === 'number',

  /**
   * 下拉刷新事件
   * @description 当用户下拉刷新时触发，仅当enablePullDownRefresh为true时有效
   */
  'refresh': null
})

/**
 * 显示列表（用于渲染）
 * @description 计算属性，返回非空的列表数组
 */
const displayList = computed(() => props.list || [])

/**
 * 获取动画延迟
 * @description 只为每批的前10项使用动画延迟，避免累积延迟
 * @param {number} index - 列表项索引
 * @returns {string} 动画延迟样式
 */
function getAnimationDelay(index) {
  // 只为前10项使用动画延迟，其余立即显示
  if (index < 10) {
    return { animationDelay: `${index * 20}ms` }
  }
  // 第10项以后立即显示（无延迟）
  return {}
}

/**
 * 触底加载更多（使用防抖）
 * @description 当滚动到底部时触发，300ms防抖避免频繁触发
 */
let loadMoreTimer = null
useReachBottom(() => {
  // 如果正在加载或没有更多数据，不执行
  if (props.loadingMore || props.loading || !props.hasMore) {
    return
  }

  // 防抖：300ms 内只触发一次
  if (loadMoreTimer) {
    clearTimeout(loadMoreTimer)
  }

  loadMoreTimer = setTimeout(() => {
    console.log('[LoadMoreList] 触底加载更多，当前页:', props.page, '下一页:', props.page + 1)
    const nextPage = props.page + 1
    emit('load-more', nextPage)
  }, 300)
})

/**
 * 下拉刷新
 * @description 用户下拉时触发刷新事件，仅当enablePullDownRefresh为true时有效
 */
if (props.enablePullDownRefresh) {
  usePullDownRefresh(() => {
    console.log('[LoadMoreList] 下拉刷新')
    emit('refresh')
    stopPullDownRefresh()
  })
}
</script>

<style lang="less">
.load-more-list {
  min-height: 100vh;
  background-color: #F9FAFB;

  &.has-header {
    padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
  }
}

.load-more-content {
  // 列表容器样式
  min-height: calc(100vh - 200rpx);
  padding: 32rpx;

  &.no-padding {
    padding: 0;
  }
}

// 列表容器
.list-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;

  // 去除列表项的黑点
  view {
    list-style: none;
  }
}

// 列表项进入动画
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.list-item {
  animation: slideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;

  // 确保去除列表样式
  list-style: none;
}

// 加载更多容器
.load-more-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0;
  min-height: 80rpx;
}

.load-more-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-more-finished {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 自定义加载动画
.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #E5E7EB;
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-spinner-small {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid #E5E7EB;
  border-top-color: #4CAF50;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>