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

    <view v-if="detail" class="p-4">
      <!-- 消息卡片 -->
      <view class="bg-white rounded-lg p-5 shadow-sm">
        <!-- 标题区域 (模拟) -->
        <view class="mb-3">
          <text class="text-xl font-bold text-gray-900 leading-snug block">
            {{ detail.title || '系统消息通知' }}
          </text>
        </view>

        <!-- 发布时间 -->
        <view class="mb-6 flex items-center">
          <text class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
            {{ detail.created_time }}
          </text>
        </view>

        <!-- 分割线 -->
        <view class="h-px bg-gray-100 w-full mb-6"></view>

        <!-- 内容区域 -->
        <view class="rich-text-content">
          <rich-text :nodes="formattedContent" />
        </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;border-radius:8px;margin:10px 0;"'
  )

  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) {
      // 模拟标题数据，实际项目中应由后端返回
      // 这里为了演示效果，如果后端没有返回 title，就模拟一个
      const mockTitle = '关于系统维护升级的通知公告'
      detail.value = {
        ...res.data,
        title: res.data.title || mockTitle
      }
    }
  } 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: 30rpx; /* 稍微调大字号提升阅读体验 */
  color: #333;
  line-height: 1.8;
  text-align: justify; /* 两端对齐 */

  /* 确保富文本样式正确 */
  p {
    margin-bottom: 24rpx;
  }

  /* 列表样式优化 */
  ul, ol {
    padding-left: 20px;
    margin-bottom: 20rpx;
  }

  li {
    margin-bottom: 10rpx;
  }
}
</style>