<!--
  @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">
      <slot name="header"></slot>
    </view>

    <!-- 可滚动的列表容器 -->
    <scroll-view
      v-if="enableScrollLoad && list.length > 0"
      class="load-more-content scrollable"
      :class="{ 'no-padding': noPadding }"
      :style="{ height: scrollHeight }"
      :scroll-y="true"
      lower-threshold="100"
      @scrolltolower="handleScrollToLower"
    >
      <!-- 列表内容 -->
      <view 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" 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>
    </scroll-view>

    <!-- 不可滚动的列表容器 -->
    <view
      v-else
      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 { 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
  },

  /**
   * 是否启用滚动加载更多
   * @type {boolean}
   * @default true
   * @description 设为false时，禁用触底加载更多功能（适用于数据较少的情况）
   */
  enableScrollLoad: {
    type: Boolean,
    default: true
  }
})

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 || [])

/**
 * scroll-view 高度
 * @description 动态计算 scroll-view 的高度
 */
const scrollHeight = computed(() => {
  // 头部高度估算（rpx 单位）
  // NavHeader(约88rpx) + SearchBar(约120rpx) + Tabs(约88rpx) + ResultCount(约60rpx) ≈ 356rpx
  const headerHeight = props.showHeader ? '356rpx' : '0rpx'

  // 使用 calc() 计算剩余高度
  // 100vh 是视口高度，减去头部高度
  return `calc(100vh - ${headerHeight})`
})

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

/**
 * 处理 scroll-view 滚动到底部事件
 * @description 当 scroll-view 滚动到底部时触发
 */
const handleScrollToLower = () => {
  console.log('[LoadMoreList] scroll-view 触底事件触发', {
    loadingMore: props.loadingMore,
    loading: props.loading,
    hasMore: props.hasMore,
    page: props.page
  })

  // 如果正在加载或没有更多数据，不执行
  if (props.loadingMore || props.loading || !props.hasMore) {
    console.log('[LoadMoreList] 跳过加载：正在加载或没有更多数据')
    return
  }

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

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

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

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

.load-more-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #F9FAFB;
}

.load-more-content {
  // 列表容器样式
  width: 100%;
  box-sizing: border-box;
  padding: 32rpx;

  &.no-padding {
    padding: 0;
  }

  // 可滚动状态
  &.scrollable {
    // 高度通过 :style 动态绑定
    box-sizing: border-box;
    // 重置基础 padding，只保留顶部和左右，底部使用特殊计算值
    padding: 32rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
  }
}

// 列表容器
.list-container {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  width: 100%;
  box-sizing: border-box;

  // 去除列表项的黑点
  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>