<!--
 * @Date:2026-02-08
 * @Description: 我的消息页 - 使用 LoadMoreList 组件重构版本
-->
<template>
  <LoadMoreList
    :list="currentList"
    :page="currentPage"
    :page-size="pageSize"
    :has-more="hasMore"
    :loading="loading"
    :loading-more="loadingMore"
    :enable-pull-down-refresh="true"
    key-field="id"
    :has-footer="false"
    @load-more="handleLoadMore"
    @refresh="handleRefresh"
  >
    <!-- 头部 -->
    <template #header>
      <NavHeader title="我的消息" />
    </template>

    <!-- 列表项 -->
    <template #item="{ item }">
      <view
        class="message-item bg-white rounded-xl p-4 mb-3 shadow-sm active:opacity-70 transition-opacity"
        @tap="handleItemClick(item)"
      >
        <!-- 第一行：内容（带红点） -->
        <view class="text-base font-bold text-gray-900 line-clamp-1 mb-3 flex items-center">
          <view v-if="item.status === 'send'" class="w-2 h-2 bg-red-500 rounded-full mr-2 shrink-0"></view>
          {{ getItemTitle(item.note) }}
        </view>

        <!-- 第二行：时间（左）与 状态（右） -->
        <view class="flex justify-between items-center">
          <!-- 左边：时间 -->
          <text class="text-xs text-gray-400 font-medium">{{ item.created_time }}</text>

          <!-- 右边：状态 -->
          <view class="flex items-center">
            <view v-if="item.status === 'send'" class="px-2 py-0.5 bg-red-50 text-red-500 rounded text-xs font-medium">
              未读
            </view>
            <view v-else-if="item.status === 'read'" class="px-2 py-0.5 bg-gray-100 text-gray-400 rounded text-xs">
              已读
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 空状态 -->
    <template #empty>
      <nut-empty description="暂无消息" image="empty" />
    </template>
  </LoadMoreList>
</template>

<script setup>
import Taro from '@tarojs/taro'
import { ref } from 'vue'
import { useLoad } from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import LoadMoreList from '@/components/list/LoadMoreList'
import NavHeader from '@/components/navigation/NavHeader.vue'
import IconFont from '@/components/icons/IconFont.vue'
import { myListAPI } from '@/api/news'
import { mockMessageListAPI } from '@/utils/mockData'

// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
// const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
const USE_MOCK_DATA = false

const go = useGo()

// 响应式状态
const currentList = ref([])
const currentPage = ref(0)
const pageSize = 10
const hasMore = ref(true)
const loading = ref(false)
const loadingMore = ref(false)

/**
 * 提取消息标题（第一行或截取）
 *
 * @param {string} note - 消息内容
 * @returns {string} 标题
 */
const getItemTitle = (note) => {
  if (!note) return '暂无消息内容'

  // 提取第一行作为标题
  const firstLine = note.split('\n')[0]

  // 移除富文本标签（简单处理）
  const textOnly = firstLine.replace(/<[^>]+>/g, '').trim()

  // 如果第一行太长，截取前50个字符
  return textOnly.length > 50 ? textOnly.substring(0, 50) + '...' : textOnly
}

/**
 * 提取消息预览（移除第一行后的内容）
 *
 * @param {string} note - 消息内容
 * @returns {string} 预览内容
 */
const getItemPreview = (note) => {
  if (!note) return ''

  // 移除第一行（已在标题显示）
  const lines = note.split('\n')
  if (lines.length > 1) {
    // 移除富文本标签（简单处理）
    const preview = lines.slice(1).join('\n').replace(/<[^>]+>/g, '').trim()
    return preview.substring(0, 100) // 限制预览长度
  }

  return '' // 只有一行时不显示预览
}

/**
 * 获取消息列表
 *
 * @param {Object} params - 请求参数
 * @param {number} params.page - 页码（从0开始）
 * @param {number} params.limit - 每页数量
 * @param {boolean} isLoadMore - 是否为加载更多
 * @returns {Promise<void>}
 */
const fetchMessageList = async (params = {}, isLoadMore = false) => {
  try {
    // 如果是加载更多，使用 loadingMore 状态，否则使用 loading 状态
    if (isLoadMore) {
      loadingMore.value = true
    } else {
      loading.value = true
    }

    console.log('[Message] 请求参数:', params)
    console.log('[Message] 使用 Mock 数据:', USE_MOCK_DATA)

    // 根据开关选择使用真实 API 或 Mock 数据
    const res = USE_MOCK_DATA
      ? await mockMessageListAPI(params)
      : await myListAPI(params)

    if (res.code === 1 && res.data) {
      console.log('[Message] 数据:', res.data)

      // 处理列表数据
      if (res.data.list?.length) {
        const listData = res.data.list

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

        // 判断是否还有更多数据
        // 如果返回的数据量少于请求的量，说明没有更多了
        hasMore.value = listData.length >= params.limit
      } else {
        // 没有数据了
        if (isLoadMore) {
          hasMore.value = false
        } else {
          currentList.value = []
        }
      }
    } else {
      console.error('[Message] API 返回错误:', res.msg)
      Taro.showToast({
        title: res.msg || '获取消息列表失败',
        icon: 'none',
        duration: 3000
      })
    }
  } catch (error) {
    console.error('[Message] 获取消息列表失败:', error)
  } finally {
    if (isLoadMore) {
      loadingMore.value = false
    } else {
      loading.value = false
    }
  }
}

/**
 * 页面加载时获取数据
 */
useLoad(async (options) => {
  console.log('[Message] 页面参数:', options)

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

  // 获取消息列表
  await fetchMessageList({ page: 0, limit: pageSize })
})

/**
 * 处理加载更多事件
 *
 * @param {number} page - 下一页页码
 * @returns {Promise<void>}
 */
const handleLoadMore = async (page) => {
  console.log('[Message] 加载更多，页码:', page)

  // 更新页码
  currentPage.value = page

  // 加载下一页数据
  await fetchMessageList(
    { page: page, limit: pageSize },
    true  // 标记为加载更多
  )
}

/**
 * 处理下拉刷新事件
 */
const handleRefresh = async () => {
  console.log('[Message] 下拉刷新')

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

  // 刷新数据
  await fetchMessageList({ page: 0, limit: pageSize })
}

/**
 * 跳转到详情页
 *
 * @param {Object} item - 消息对象
 */
const handleItemClick = (item) => {
  go('/pages/message-detail/index', { id: item.id })
}
</script>

<style lang="less">
/* LoadMoreList 组件已内置样式，此处无需额外样式 */
</style>