<!--
 * @Date:2026-02-03 21:26:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-12 18:24:35
 * @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="rich-text-content">
        <rich-text :nodes="formattedContent" />
      </view>

      <!-- 顶部时间 -->
      <view class="mt-4 text-right">
        <text class="text-xs text-gray-400">{{ detail.created_time }}</text>
      </view>

      <!-- 关联计划书（可选） -->
      <!-- <view v-if="detail.pk_id" class="mt-2 pt-4 border-t border-gray-200">
        <view class="text-sm text-gray-500 mb-2">关联计划书</view>
        <view class="text-xs text-gray-400">订单ID: {{ detail.pk_id }}</view>
      </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?.note) return ''

  // 简单的正则替换，确保图片宽度不超过容器
  const content = detail.value.note.replace(
    /<img/g,
    '<img style="max-width:100%;height:auto;display:block;"'
  )

  return content
})

/**
 * @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>