<!--
 * @Date: 2026-02-03 21:26:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-03 21:30:21
 * @FilePath: /manulife-weapp/src/pages/message-detail/index.vue
 * @Description: 文件描述
-->
<template>
  <view class="min-h-screen bg-white pb-safe">
    <NavHeader title="消息详情" />

    <view v-if="detail" class="p-5">
      <!-- 标题 -->
      <view class="text-xl font-bold text-gray-900 mb-3 leading-tight">
        {{ detail.title }}
      </view>

      <!-- 元信息 -->
      <view class="flex items-center text-xs text-gray-400 mb-6">
        <text>{{ detail.create_time }}</text>
        <text class="mx-2">·</text>
        <text>Manulife</text>
      </view>

      <!-- 内容区域 -->
      <view class="rich-text-content">
        <rich-text :nodes="formattedContent" />
      </view>
    </view>

    <!-- 加载中 -->
    <view v-else-if="loading" class="flex justify-center py-10">
      <view class="w-8 h-8 border-4 border-gray-200 border-t-blue-600 rounded-full animate-spin"></view>
    </view>

    <!-- 错误/空状态 -->
    <nut-empty v-else description="未找到消息内容" image="error" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import { detailAPI } from '@/api/news'

const detail = ref(null)
const loading = ref(true)

/**
 * @description 格式化富文本内容，处理图片宽度等问题
 */
const formattedContent = computed(() => {
  if (!detail.value?.content) return ''
  // 简单的正则替换，确保图片宽度不超过容器
  return detail.value.content.replace(
    /<img/g,
    '<img style="max-width:100%;height:auto;display:block;"'
  )
})

/**
 * @description 获取消息详情
 * @param {string|number} id 消息ID
 */
const fetchDetail = async (id) => {
  loading.value = true
  try {
    const res = await detailAPI({ i: id })
    if (res.code === 1) {
      detail.value = res.data
    }
  } catch (err) {
    console.error('获取消息详情失败:', err)
  } finally {
    loading.value = false
  }
}

useLoad((options) => {
  if (options.id) {
    fetchDetail(options.id)
  }
})
</script>

<style lang="less">
.rich-text-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.8;

  /* 确保富文本样式正确 */
  p {
    margin-bottom: 20rpx;
  }
}
</style>