<!--
 * @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]">
                <view
                  :class="[
                    'status-badge',
                    item.status === 'pending' ? 'status-pending' : '',
                    item.status === 'processing' ? 'status-processing' : '',
                    item.status === 'generated' ? 'status-generated' : '',
                    item.status === 'viewed' ? 'status-viewed' : '',
                    item.status === 'rejected' ? 'status-rejected' : ''
                  ]"
                >
                  {{ getStatusText(item.status) }}
                </view>
              </view>
            </view>

            <!-- Info -->
            <view class="text-gray-500 text-[24rpx] mb-[24rpx]">
              <view class="flex justify-between items-center gap-[24rpx]">
                <text>{{ item.client }}</text>
                <text class="shrink-0">{{ item.date }}</text>
              </view>
              <view
                v-if="item.status === 'rejected' && item.rejectReason"
                class="reject-reason-box relative mt-[16rpx] rounded-[16rpx] px-[20rpx] py-[16rpx]"
              >
                <text class="reject-reason-label text-[22rpx] font-medium">驳回理由</text>
                <view
                  v-if="!item.rejectReasonExpanded"
                  class="reject-reason-text relative mt-[8rpx] text-[24rpx] leading-[1.6]"
                >
                  <view
                    :class="[
                      'break-all',
                      item.rejectReasonOverflow ? 'reject-reason-clamp reject-reason-content-with-expand' : ''
                    ]"
                  >
                    {{ item.rejectReason }}
                  </view>
                  <text
                    v-if="item.rejectReasonOverflow"
                    class="reject-reason-expand reject-reason-action font-medium"
                    @tap.stop="toggleRejectReason(item)"
                  >
                    展开
                  </text>
                  <view
                    :id="getRejectMeasureId(item.id)"
                    class="reject-reason-measure reject-reason-content-with-expand break-all"
                  >
                    {{ item.rejectReason }}
                  </view>
                </view>
                <view v-else class="reject-reason-text mt-[8rpx] text-[24rpx] leading-[1.6] break-all">
                  <text>{{ item.rejectReason }}</text>
                  <text
                    v-if="item.rejectReasonOverflow"
                    class="reject-reason-action ml-[8rpx] font-medium"
                    @tap.stop="toggleRejectReason(item)"
                  >
                    收起
                  </text>
                </view>
              </view>
            </view>

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

            <!-- Actions -->
            <ListItemActions
              :viewable="canViewProposalRule(item)"
              :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="" /> -->
    <ProposalFileActionSheet />
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
import { listAPI, deleteAPI } from '@/api/plan'
import { mockPlanListAPI } from '@/utils/mockData'
import NavHeader from '@/components/navigation/NavHeader.vue'
import ListItemActions from '@/components/list/ListItemActions/index.vue'
import SearchBar from '@/components/forms/SearchBar.vue'
import ProposalFileActionSheet from '@/components/plan/ProposalFileActionSheet.vue'
import { USE_MOCK_DATA } from '@/config/app'
import { mapOrderStatus, getStatusText } from '@/config/constants/orderStatus'
import { canViewProposal as canViewProposalRule } from '@/utils/proposalView'
import { usePlanView } from '@/composables/usePlanView'
// ⚠️ MOCK 数据开关 - 统一从 @/config/app 导入

const { viewProposal } = usePlanView()

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  // 每页数量
const REJECT_REASON_MAX_LINES = 2
const REJECT_REASON_LINE_HEIGHT_RPX = 24 * 1.6

/**
 * Tab 数据源
 * @description 包含分类信息和对应的计划书列表
 * @description 状态值说明（根据API文档）：
 * - 空字符串 = 全部
 * - "3" = 待处理
 * - "5" = 处理中
 * - "7" = 已生成
 * - "9" = 已查看
 * - "11" = 驳回
 */
const tabsData = ref([
  { id: '', name: '全部', list: [] },
  { id: '11', name: '驳回', list: [] },
  { id: '3', name: '待处理', list: [] },
  { id: '5', name: '处理中', list: [] },
  { id: '7', name: '已生成', list: [] },
  { id: '9', name: '已查看', list: [] },
])

/**
 * 从 API 数据转换为组件数据格式
 * @description 将 API 返回的数据结构转换为组件使用的格式
 * @param {Object} apiItem - API 返回的计划书对象
 * @returns {Object} 组件使用的计划书对象
 */
const transformApiItem = (apiItem) => {
  // 获取所有文件
  const proposalFiles = apiItem.proposal_files || []

  // 获取第一个文件（作为默认显示）
  const firstFile = proposalFiles[0]

  // 获取第一个分类名称（categories 是对象数组）
  const categoryName = apiItem.categories && apiItem.categories.length > 0
    ? apiItem.categories[0].name
    : ''

  return {
    id: apiItem.id,
    title: apiItem.product_name || '未命名计划书',
    client: `申请人：${apiItem.customer_name || '未知'}`,
    date: apiItem.created_time || '',
    tag: categoryName,
    status: mapOrderStatus(apiItem.order_status),
    rejectReason: apiItem.reject_reason || '',
    rejectReasonExpanded: false,
    rejectReasonOverflow: false,
    // 默认显示第一个文件
    fileName: firstFile?.file_name || '',
    downloadUrl: firstFile?.file_url || '',
    // 保存所有文件（用于多文件选择）
    proposalFiles: proposalFiles,
    // 保存完整的原始数据
    _raw: apiItem
  }
}

/**
 * 加载计划书列表（支持 Mock 数据）
 * @param {number} page - 页码（从0开始，API 要求）
 * @param {number} limit - 每页数量
 * @param {boolean} isLoadMore - 是否为加载更多
 *
 * @description 状态筛选说明（使用服务端 status 参数筛选）：
 * - activeTabId = ''：不过滤，显示全部
 * - activeTabId = '3'：只显示待处理的计划书
 * - activeTabId = '5'：只显示处理中的计划书
 * - activeTabId = '7'：只显示已生成的计划书
 * - activeTabId = '9'：只显示已查看的计划书
 * - activeTabId = '11'：只显示驳回的计划书
 *
 * ✅ **API参数说明**：
 * ```javascript
 * GET /srv/?a=proposal&t=list
 * Query Parameters:
 *   - page: number (必需) - 页码，从 0 开始
 *   - limit: number (必需) - 每页数量，默认 20
 *   - status: string (可选) - 状态筛选
 *   - keyword: string (可选) - 搜索关键字
 * ```
 *
 * ⚠️ **重要**：status 参数的具体值（根据API文档）：
 * - "3" = 待处理
 * - "5" = 处理中
 * - "7" = 已生成
 * - "9" = 已查看
 * - "11" = 驳回
 *
 * 🔧 **Mock 数据说明**：
 * 开发环境会使用 Mock 数据测试分页、筛选、搜索功能
 * 生产环境使用真实 API
 */
const fetchPlanList = async (page = 0, limit = pageSize, isLoadMore = false) => {
  try {
    // 如果是加载更多，使用 loadingMore 状态，否则使用 loading 状态
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    // 构建请求参数
    const params = {
      page: page,
      limit: limit
    }

    // 状态筛选（使用 status 参数）
    if (activeTabId.value !== '') {
      params.status = activeTabId.value
    }

    // 搜索关键字
    if (searchValue.value) {
      params.keyword = searchValue.value
    }

    // 🔧 根据环境选择使用 Mock 数据还是真实 API
    const res = USE_MOCK_DATA
      ? await mockPlanListAPI(params)
      : await listAPI(params)

    if (res.code === 1 && res.data) {
      let apiList = res.data.list || []
      const transformedList = apiList.map(transformApiItem)

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

      await measureRejectReasonOverflow()

      // 判断是否还有更多数据
      // 如果返回的数据量少于请求的量，说明没有更多了
      hasMore.value = transformedList.length >= limit
    } else {
      Taro.showToast({
        title: res.msg || '加载失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('加载计划书列表失败:', error)
    Taro.showToast({
      title: '网络异常，请重试',
      icon: 'none',
      duration: 2000
    })
  } finally {
    if (isLoadMore) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

/**
 * 将 rpx 转为 px，便于与节点测量结果比较。
 * @param {number} rpx - 设计稿 rpx 数值
 * @returns {number} 转换后的 px 数值
 */
const rpxToPx = (rpx) => {
  const { windowWidth = 375 } = Taro.getSystemInfoSync()
  return (windowWidth / 750) * rpx
}

/**
 * 生成驳回理由隐藏测量节点 ID。
 * @param {string|number} itemId - 列表项 ID
 * @returns {string} 节点 ID
 */
const getRejectMeasureId = (itemId) => `reject-reason-measure-${itemId}`

/**
 * 计算驳回理由是否超过两行。
 * @description 列表页使用隐藏节点测量真实高度，只在超出两行时显示展开入口。
 */
const measureRejectReasonOverflow = async () => {
  const rejectedItems = currentList.value.filter(item => item.status === 'rejected' && item.rejectReason)

  if (rejectedItems.length === 0) {
    return
  }

  await nextTick()

  const maxHeight = rpxToPx(REJECT_REASON_LINE_HEIGHT_RPX * REJECT_REASON_MAX_LINES) + 1
  const query = Taro.createSelectorQuery()

  rejectedItems.forEach((item) => {
    query.select(`#${getRejectMeasureId(item.id)}`).boundingClientRect()
  })

  query.exec((rects = []) => {
    rects.forEach((rect, index) => {
      const item = rejectedItems[index]

      if (!item) {
        return
      }

      item.rejectReasonOverflow = Boolean(rect && rect.height > maxHeight)

      if (!item.rejectReasonOverflow) {
        item.rejectReasonExpanded = false
      }
    })
  })
}

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

  activeTabId.value = id
  listVisible.value = false

  // 重置分页状态（从第 0 页开始）
  currentPage.value = 0
  hasMore.value = true

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

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

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

  listRenderKey.value += 1

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

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

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

  // 重置分页状态（从第 0 页开始）
  currentPage.value = 0
  hasMore.value = true

  listRenderKey.value += 1

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

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

/**
 * 页面加载时初始化数据
 */
useLoad(() => {
  // 加载第一页数据（page = 0）
  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) => {
  await viewProposal(item, {
    onViewSuccess: () => {
      // 列表页本地同步为已查看，避免用户返回后还看到旧状态。
      item.status = 'viewed'
    }
  })
}

/**
 * 删除计划书
 * @description 调用删除API删除计划书
 *
 * **用户体验优化**：删除后保持在当前页，避免跳回第1页
 * - 本地立即移除删除的项（用户马上看到效果）
 * - 如果当前页删空了，自动回到上一页
 * - 否则静默刷新当前页（后台同步数据，用户无感知）
 */
const onDelete = async (item) => {
  Taro.showModal({
    title: '确认删除',
    content: `确定要删除"${item.title}"吗？`,
    success: async (res) => {
      if (res.confirm) {
        try {
          // 调用删除API
          const deleteRes = await deleteAPI({ i: item.id })

          if (deleteRes.code === 1) {
            Taro.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 1500
            })

            // ✅ 改进：从本地列表中立即移除（用户马上看到效果）
            const index = currentList.value.findIndex(i => i.id === item.id)
            if (index !== -1) {
              currentList.value.splice(index, 1)
            }

            // ✅ 处理边界：如果当前页删空了，回到上一页
            if (currentList.value.length === 0 && currentPage.value > 0) {
              currentPage.value--
              await fetchPlanList(currentPage.value, pageSize, false)
            } else {
              // ✅ 否则静默刷新当前页（后台同步数据，用户无感知）
              fetchPlanList(currentPage.value, pageSize, false)
                .then(() => {
                  // 刷新成功，数据已同步
                })
                .catch((err) => {
                  // 即使刷新失败也没关系，本地已经移除了
                  // 下次用户翻页或刷新时会自动同步
                  console.warn('静默刷新失败:', err)
                })
            }
          } else {
            Taro.showToast({
              title: deleteRes.msg || '删除失败',
              icon: 'none'
            })
          }
        } catch (error) {
          console.error('删除失败:', error)
          Taro.showToast({
            title: '网络异常，请重试',
            icon: 'none'
          })
        }
      }
    }
  })
}

/**
 * 切换驳回理由展开状态
 * @param {Object} item - 计划书对象
 */
const toggleRejectReason = (item) => {
  item.rejectReasonExpanded = !item.rejectReasonExpanded
}
</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;
}

// 状态标记样式
.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 9999rpx;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
}

.status-pending {
  background-color: #FEF3C7;
  color: #D97706;
}

.status-processing {
  background-color: #DBEAFE;
  color: #2563EB;
}

.status-generated {
  background-color: #D1FAE5;
  color: #059669;
}

.status-viewed {
  background-color: #E5E7EB;
  color: #6B7280;
}

.status-rejected {
  background-color: #FEE2E2;
  color: #DC2626;
}

.reject-reason-box {
  background-color: #F8F4EE;
}

.reject-reason-label {
  color: #8B6B4A;
}

.reject-reason-text {
  color: #5F5A54;
}

.reject-reason-action {
  color: #8A735C;
}

.reject-reason-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.reject-reason-content-with-expand {
  padding-right: 124rpx;
}

.reject-reason-expand {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 36rpx;
  line-height: inherit;
  background: linear-gradient(90deg, rgba(248, 244, 238, 0) 0%, #F8F4EE 30%, #F8F4EE 100%);
}

.reject-reason-measure {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}
</style>