<!--
 * @Date: 2026-02-06
 * @Description: 我的计划书 - 支持滚动加载更多（参考 week-hot-material）
-->
<template>
  <view class="h-screen bg-gray-50 flex flex-col">
    <!-- NavHeader -->
    <NavHeader title="我的计划书" />

    <!-- Search Bar -->
    <view class="px-[24rpx] py-[16rpx] bg-white">
      <SearchBar
        v-model="searchValue"
        placeholder="搜索计划书名称、客户姓名..."
        :show-clear="true"
        variant="rounded"
        @search="onSearch"
        @clear="onClear"
      />
    </view>

    <!-- Tabs Container -->
    <view class="bg-white mt-[2rpx]">
      <nut-tabs v-model="activeTabId">
        <template #titles>
          <view class="filter-tabs-wrapper">
            <view
              v-for="item in tabsData"
              :key="item.id"
              :class="[
                'filter-tab-item',
                activeTabId === item.id ? 'filter-tab-active' : 'filter-tab-inactive'
              ]"
              @tap="onTabClick(item.id)"
            >
              <text class="filter-tab-text">{{ item.name }}</text>
            </view>
          </view>
        </template>
      </nut-tabs>
    </view>

    <!-- 可滚动列表区域（支持触底加载更多） -->
    <scroll-view
      v-if="listVisible"
      :key="listRenderKey"
      :scroll-y="true"
      class="flex-1 min-h-0 w-full"
      style="height: 100%;"
      @scrolltolower="onScrollToLower"
    >
      <view class="px-[24rpx] py-[24rpx] pb-[calc(env(safe-area-inset-bottom))] box-border w-full">
        <!-- 加载状态 -->
        <view v-if="loading && currentList.length === 0" class="flex items-center justify-center py-[60rpx]">
          <view class="loading-spinner"></view>
          <text class="ml-[16rpx] text-[#9CA3AF] text-[28rpx]">加载中...</text>
        </view>

        <view v-else class="flex flex-col gap-[24rpx] w-full box-border">
          <!-- Plan List -->
          <view
            v-for="(item, index) in currentList"
            :key="item.id"
            class="bg-white rounded-[24rpx] p-[24rpx] shadow-sm plan-item w-full box-border"
            :style="{ animationDelay: `${index * 50}ms` }"
          >
            <!-- Header -->
            <view class="flex justify-between items-start mb-[16rpx]">
              <view class="flex-1">
                <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-[8rpx]">{{ item.title }}</view>
                <view class="flex items-center gap-[12rpx]">
                  <view class="bg-blue-50 text-blue-600 text-[22rpx] px-[12rpx] py-[4rpx] rounded-[8rpx]" v-if="item.tag">
                    {{ item.tag }}
                  </view>
                </view>
              </view>
              <view class="ml-[24rpx]">
                <!-- Status Badge or Icon could go here -->
              </view>
            </view>

            <!-- Info -->
            <view class="flex justify-between items-center text-gray-500 text-[24rpx] mb-[24rpx]">
              <text>{{ item.client }}</text>
              <text>{{ item.date }}</text>
            </view>

            <!-- Divider -->
            <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>

            <!-- Actions -->
            <ListItemActions
              :viewable="true"
              :deletable="true"
              @view="onView(item)"
              @delete="onDelete(item)"
            />
          </view>

          <!-- 空状态 -->
          <view v-if="currentList.length === 0 && !loading && !loadingMore">
            <nut-empty description="暂无相关计划书" image="empty" />
          </view>

          <!-- 加载更多提示 -->
          <view v-if="currentList.length > 0" class="flex items-center justify-center py-[40rpx]">
            <view v-if="loadingMore" class="flex items-center">
              <view class="loading-spinner-small"></view>
              <text class="ml-[12rpx] text-[#9CA3AF] text-[24rpx]">加载中...</text>
            </view>
            <view v-else-if="!hasMore" class="text-[#9CA3AF] text-[24rpx]">
              没有更多了
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- TabBar -->
    <!-- <TabBar current="" /> -->
  </view>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
import { useFileOperation } from '@/composables/useFileOperation'
import NavHeader from '@/components/NavHeader.vue'
import ListItemActions from '@/components/ListItemActions/index.vue'
import SearchBar from '@/components/SearchBar.vue'

const { viewFile } = useFileOperation()

const searchValue = ref('')
const activeTabId = ref('')
const listVisible = ref(true)
const listRenderKey = ref(0)
const loading = ref(false)
const loadingMore = ref(false)
const hasMore = ref(true)
const currentList = ref([])
const currentPage = ref(0)  // 当前页码（从0开始）
const pageSize = 20  // 每页数量（临时增加到 20 条以便测试滚动）

/**
 * Tab 数据源
 * @description 包含分类信息和对应的计划书列表
 */
const tabsData = ref([
  { id: '', name: '全部', list: [] },
  { id: 'processing', name: '生成中', list: [] },
  { id: 'generated', name: '已生成', list: [] },
])

/**
 * Mock 数据：计划书列表（扩展到30条用于测试分页）
 *
 * @description 使用真实 PDF 文件进行测试
 * downloadUrl 使用 Mozilla 的公开 PDF 测试文件
 */
const allList = ref([
  // 第1页 (0-9)
  {
    id: 1,
    title: '家庭财富传承保障计划（分红）',
    client: '客户：李*生',
    date: '2024-03-15 10:12',
    tag: '年金保险',
    status: 'generated',
    fileName: '家庭财富传承保障计划（分红）.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 2,
    title: '财富传承保障金融理财计划（分红）',
    client: '客户：孙*',
    date: '2024-03-14 12:01',
    tag: '',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 3,
    title: '企业高管年金计划',
    client: '客户：王*江',
    date: '2024-03-13 09:23',
    tag: '年金保险',
    status: 'generated',
    fileName: '企业高管年金计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 4,
    title: '家庭财富传承保障计划',
    client: '客户：李*生',
    date: '2024-03-12 15:12',
    tag: '年金保险',
    status: 'generated',
    fileName: '家庭财富传承保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 5,
    title: '高净值家庭资产配置计划',
    client: '客户：赵*琪',
    date: '2024-03-11 18:40',
    tag: '资产配置',
    status: 'generated',
    fileName: '高净值家庭资产配置计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 6,
    title: '企业主税务筹划方案',
    client: '客户：陈*明',
    date: '2024-03-11 11:05',
    tag: '税务筹划',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 7,
    title: '家庭保障升级计划（重疾）',
    client: '客户：周*然',
    date: '2024-03-10 14:22',
    tag: '健康保障',
    status: 'generated',
    fileName: '家庭保障升级计划（重疾）.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 8,
    title: '家庭教育金规划方案',
    client: '客户：许*雅',
    date: '2024-03-10 09:48',
    tag: '教育金',
    status: 'generated',
    fileName: '家庭教育金规划方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 9,
    title: '中长期养老规划',
    client: '客户：刘*文',
    date: '2024-03-09 16:05',
    tag: '养老规划',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 10,
    title: '企业员工福利保障计划',
    client: '客户：沈*杰',
    date: '2024-03-09 10:33',
    tag: '团体保障',
    status: 'generated',
    fileName: '企业员工福利保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  // 第2页 (10-19)
  {
    id: 11,
    title: '家族信托规划方案',
    client: '客户：唐*豪',
    date: '2024-03-08 17:50',
    tag: '家族信托',
    status: 'generated',
    fileName: '家族信托规划方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 12,
    title: '企业接班人保障方案',
    client: '客户：何*峰',
    date: '2024-03-08 09:12',
    tag: '传承保障',
    status: 'generated',
    fileName: '企业接班人保障方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 13,
    title: '高端医疗健康保障计划',
    client: '客户：张*敏',
    date: '2024-03-07 14:30',
    tag: '健康保障',
    status: 'generated',
    fileName: '高端医疗健康保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 14,
    title: '子女教育金储备计划',
    client: '客户：马*丽',
    date: '2024-03-07 10:15',
    tag: '教育金',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 15,
    title: '家庭财富增值规划',
    client: '客户：林*涛',
    date: '2024-03-06 16:45',
    tag: '资产配置',
    status: 'generated',
    fileName: '家庭财富增值规划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 16,
    title: '企业年金优化方案',
    client: '客户：吴*华',
    date: '2024-03-06 11:20',
    tag: '年金保险',
    status: 'generated',
    fileName: '企业年金优化方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 17,
    title: '个人税收筹划方案',
    client: '客户：郑*强',
    date: '2024-03-05 15:10',
    tag: '税务筹划',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 18,
    title: '全面家庭保障计划',
    client: '客户：黄*明',
    date: '2024-03-05 09:50',
    tag: '健康保障',
    status: 'generated',
    fileName: '全面家庭保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 19,
    title: '子女教育金累积计划',
    client: '客户：谢*芳',
    date: '2024-03-04 14:25',
    tag: '教育金',
    status: 'generated',
    fileName: '子女教育金累积计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 20,
    title: '退休养老规划方案',
    client: '客户：冯*伟',
    date: '2024-03-04 10:40',
    tag: '养老规划',
    status: 'generated',
    fileName: '退休养老规划方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  // 第3页 (20-29)
  {
    id: 21,
    title: '企业财产保险规划',
    client: '客户：袁*杰',
    date: '2024-03-03 16:20',
    tag: '团体保障',
    status: 'generated',
    fileName: '企业财产保险规划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 22,
    title: '家庭财产保全计划',
    client: '客户：彭*婷',
    date: '2024-03-03 11:05',
    tag: '传承保障',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 23,
    title: '高端医疗保险方案',
    client: '客户：曹*强',
    date: '2024-03-02 15:35',
    tag: '健康保障',
    status: 'generated',
    fileName: '高端医疗保险方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 24,
    title: '企业资产传承规划',
    client: '客户：许*华',
    date: '2024-03-02 10:15',
    tag: '家族信托',
    status: 'generated',
    fileName: '企业资产传承规划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 25,
    title: '子女海外教育金计划',
    client: '客户：邓*丽',
    date: '2024-03-01 14:50',
    tag: '教育金',
    status: 'generated',
    fileName: '子女海外教育金计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 26,
    title: '个人财富保全方案',
    client: '客户：萧*敏',
    date: '2024-03-01 09:30',
    tag: '资产配置',
    status: 'processing',
    fileName: '',
    downloadUrl: ''
  },
  {
    id: 27,
    title: '企业员工激励计划',
    client: '客户：田*勇',
    date: '2024-02-29 16:10',
    tag: '团体保障',
    status: 'generated',
    fileName: '企业员工激励计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 28,
    title: '家庭健康保障计划',
    client: '客户：董*华',
    date: '2024-02-29 11:45',
    tag: '健康保障',
    status: 'generated',
    fileName: '家庭健康保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 29,
    title: '退休收入保障计划',
    client: '客户：潘*婷',
    date: '2024-02-28 15:20',
    tag: '养老规划',
    status: 'generated',
    fileName: '退休收入保障计划.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  },
  {
    id: 30,
    title: '企业税务优化方案',
    client: '客户：袁*明',
    date: '2024-02-28 10:00',
    tag: '税务筹划',
    status: 'generated',
    fileName: '企业税务优化方案.pdf',
    downloadUrl: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  }
])

/**
 * 获取当前 tab 的完整列表（过滤后的）
 */
const getFilteredList = () => {
  const currentTab = tabsData.value.find(tab => tab.id === activeTabId.value)
  if (!currentTab) {
    return []
  }

  let result = currentTab.list

  // Filter by Search
  if (searchValue.value) {
    const key = searchValue.value.toLowerCase()
    result = result.filter(item =>
      item.title.toLowerCase().includes(key) ||
      item.client.toLowerCase().includes(key)
    )
  }

  return result
}

/**
 * 加载计划书列表（模拟分页）
 * @param {number} page - 页码（从0开始）
 * @param {number} limit - 每页数量
 * @param {boolean} isLoadMore - 是否为加载更多
 */
const fetchPlanList = async (page = 0, limit = pageSize, isLoadMore = false) => {
  try {
    // 如果是加载更多，使用 loadingMore 状态，否则使用 loading 状态
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    // 模拟网络延迟（方便测试加载状态）
    // await new Promise(resolve => setTimeout(resolve, 500))

    // 获取过滤后的完整列表
    const fullList = getFilteredList()

    // 模拟分页：根据 page 和 limit 获取对应的数据
    const start = page * limit
    const end = start + limit

    const pageData = fullList.slice(start, end)

    if (isLoadMore) {
      // 加载更多：追加数据
      currentList.value = [...currentList.value, ...pageData]
    } else {
      // 首次加载或刷新：替换数据
      currentList.value = pageData
    }

    // 判断是否还有更多数据
    // 如果返回的数据量少于请求的量，说明没有更多了
    hasMore.value = pageData.length >= limit
  } catch (error) {
    Taro.showToast({
      title: '加载失败',
      icon: 'error',
      duration: 2000
    })
  } finally {
    if (isLoadMore) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

/**
 * 初始化数据分布
 * @description 根据分类规则将 allList 中的数据分配到各个 tab 中
 */
const initTabsData = () => {
  tabsData.value.forEach((tab) => {
    if (tab.id === '') {
      tab.list = [...allList.value]
    } else {
      tab.list = allList.value.filter(item => item.status === tab.id)
    }
  })
}

/**
 * Tab 点击处理
 */
const onTabClick = (id) => {
  if (activeTabId.value === id) {
    return
  }

  activeTabId.value = id
  listVisible.value = false

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  nextTick(() => {
    listRenderKey.value += 1
    listVisible.value = true

    // 重新加载数据
    fetchPlanList(0, pageSize, false)
  })
}

/**
 * 搜索处理
 */
const onSearch = () => {
  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  listRenderKey.value += 1

  // 重新加载数据
  fetchPlanList(0, pageSize, false)
}

/**
 * 清空搜索
 */
const onClear = () => {
  console.log('[Plan Page] onClear 被调用')

  // 清空搜索值
  searchValue.value = ''

  // 重置分页状态
  currentPage.value = 0
  hasMore.value = true

  listRenderKey.value += 1

  // 重新加载数据
  fetchPlanList(0, pageSize, false)

  console.log('[Plan Page] onClear 完成，列表已刷新')
}

/**
 * 页面加载时初始化数据
 */
useLoad(() => {
  // 初始化数据分布
  initTabsData()

  // 加载第一页数据
  fetchPlanList(0, pageSize, false)
})

/**
 * 触底加载更多
 * @description 使用防抖避免频繁触发
 */
let loadMoreTimer = null
const triggerLoadMore = () => {
  if (loading.value || loadingMore.value || !hasMore.value) {
    return
  }

  if (loadMoreTimer) {
    clearTimeout(loadMoreTimer)
  }

  loadMoreTimer = setTimeout(async () => {
    const newPage = currentPage.value + 1
    currentPage.value = newPage
    await fetchPlanList(newPage, pageSize, true)
  }, 300)
}

const onScrollToLower = () => {
  triggerLoadMore()
}

useReachBottom(() => {
  triggerLoadMore()
})

/**
 * 查看计划书文档
 *
 * @description 使用 useFileOperation 的 viewFile 功能查看 PDF 文档
 * @param {Object} item - 计划书对象
 */
const onView = async (item) => {
  // 检查是否已生成
  if (item.status === 'processing') {
    Taro.showToast({
      title: '计划书生成中，请稍后',
      icon: 'none'
    })
    return
  }

  // 使用 useFileOperation 查看文档
  await viewFile({
    downloadUrl: item.downloadUrl,
    fileName: item.fileName
  })
}

/**
 * 删除计划书
 */
const onDelete = (item) => {
  Taro.showModal({
    title: '提示',
    content: '确定要删除该计划书吗？',
    success: (res) => {
      if (res.confirm) {
        // 从 allList 中删除
        const index = allList.value.findIndex(i => i.id === item.id)
        if (index !== -1) {
          allList.value.splice(index, 1)
          // 重新初始化 tabsData
          initTabsData()
          // 重置分页状态并重新加载
          currentPage.value = 0
          hasMore.value = true
          fetchPlanList(0, pageSize, false)
          Taro.showToast({ title: '已删除', icon: 'success' })
        }
      }
    }
  })
}
</script>

<style lang="less">
/* 列表项进入动画 */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

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

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

/* 加载动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.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;
}

// FilterTabs 风格的标签栏
.filter-tabs-wrapper {
  display: flex;
  overflow-x: auto;
  padding: 24rpx 24rpx;
  gap: 24rpx;
  transition: all 0.3s ease;
  background-color: #fff;
  width: 100%;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  -ms-overflow-style: none;
  scrollbar-width: none;
}

.filter-tab-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rpx;
  border-radius: 9999rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.filter-tab-active {
  background-color: #2563EB; // 蓝色背景
  color: #fff;
}

.filter-tab-inactive {
  background-color: #F3F4F6; // 灰色背景
  color: #6B7280;
}

.filter-tab-text {
  font-size: 28rpx;
  font-weight: 500;
}

// 覆盖 NutUI Tabs 默认样式，隐藏原有的头部和内容（因为我们使用自定义头部和外部列表）
:deep(.nut-tabs__titles) {
  display: none;
}

:deep(.nut-tabs__content) {
  display: none;
}
</style>