<!--
 * @Date:2026-02-03 21:26:58
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-13
 * @FilePath: /manulife-weapp/src/pages/message-detail/index.vue
 * @Description: 消息详情页 - API 新增 title 字段，添加 Mock 支持，新增计划书查看功能
-->
<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">
        <!-- 标题区域：API 返回 title 字段 -->
        <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
          v-if="detail.proposal"
          class="mt-6 pt-6 border-t border-gray-200"
        >
          <!-- 卡片标题 -->
          <view class="flex justify-between items-center mb-4">
            <text class="text-base font-bold text-gray-900">关联计划书</text>
            <!-- 状态标记 -->
            <view
              :class="[
                'status-badge',
                proposalStatus === 'pending' ? 'status-pending' : '',
                proposalStatus === 'processing' ? 'status-processing' : '',
                proposalStatus === 'generated' ? 'status-generated' : '',
                proposalStatus === 'viewed' ? 'status-viewed' : ''
              ]"
            >
              {{ getProposalStatusText(proposalStatus) }}
            </view>
          </view>

          <!-- 计划书信息 -->
          <view class="bg-gray-50 rounded-lg p-4 mb-4">
            <view class="proposal-info-item mb-3">
              <text class="label text-sm">申请人</text>
              <text class="value text-sm">{{ detail.proposal.customer_name || '-' }}</text>
            </view>
            <view class="proposal-info-item mb-3">
              <text class="label text-sm">产品</text>
              <text class="value text-sm">{{ detail.proposal.product_name || '-' }}</text>
            </view>
            <view class="proposal-info-item">
              <text class="label text-sm">创建时间</text>
              <text class="value text-sm">{{ detail.proposal.created_time || '-' }}</text>
            </view>
          </view>

          <!-- 查看按钮 -->
          <nut-button
            v-if="canViewProposal"
            type="primary"
            color="#2563EB"
            block
            class="!rounded-lg !text-base"
            @tap="handleViewProposal"
          >
            {{ proposalFiles.length > 1
              ? `查看计划书 (${proposalFiles.length}个文件)`
              : '查看计划书' }}
          </nut-button>
        </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'
import { useUserStore } from '@/stores/user'
import { mockDetailAPI } from '@/utils/mockData'
import { USE_MOCK_DATA } from '@/config/app'
import { usePlanView } from '@/composables/usePlanView'

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

// 使用计划书查看 Composable
const { viewProposal } = usePlanView()

/**
 * 计划书状态
 *
 * @description 将 API 返回的 order_status 映射为前端状态
 * @returns {string|null} 'pending' | 'processing' | 'generated' | 'viewed' | null
 */
const proposalStatus = computed(() => {
  if (!detail.value?.proposal) return null

  // 状态映射（与 plan/index.vue 保持一致）
  const statusMap = {
    '3': 'pending',     // 待处理
    '5': 'processing', // 处理中
    '7': 'generated',  // 已生成
    '9': 'viewed'      // 已查看
  }

  return statusMap[detail.value.proposal.order_status] || 'pending'
})

/**
 * 计划书文件列表
 *
 * @description 从 proposal 对象中提取文件列表
 * @returns {Array} 文件列表
 */
const proposalFiles = computed(() => {
  return detail.value?.proposal?.proposal_files || []
})

/**
 * 是否可以查看计划书
 *
 * @description 只有"已生成"和"已查看"状态才能查看
 * @returns {boolean}
 */
const canViewProposal = computed(() => {
  const status = proposalStatus.value
  return status === 'generated' || status === 'viewed'
})

/**
 * 获取状态文本
 *
 * @param {string} status - 前端状态值
 * @returns {string} 状态中文文本
 */
const getProposalStatusText = (status) => {
  const textMap = {
    'pending': '待处理',
    'processing': '处理中',
    'generated': '已生成',
    'viewed': '已查看'
  }
  return textMap[status] || '待处理'
}

/**
 * 格式化富文本内容，处理图片宽度、文本换行等问题
 */
const formattedContent = computed(() => {
  if (!detail.value?.note) return ''

  // 1. 处理文本换行：将真正的换行符替换为 <br> 标签
  let content = detail.value.note.replace(/\n/g, '<br>')

  // 2. 处理图片样式：确保图片宽度不超过容器
  content = content.replace(
    /<img/g,
    '<img style="max-width:100%;height:auto;display:block;border-radius:8px;margin:10px 0;"'
  )

  return content
})

/**
 * 查看计划书
 *
 * @description 调用 usePlanView 的 viewProposal 方法查看计划书
 * 支持单文件直接预览，多文件显示选择弹框
 */
const handleViewProposal = () => {
  viewProposal(detail.value.proposal, {
    onViewSuccess: (proposalId) => {
      // 查看成功后的回调
      console.log('计划书已查看:', proposalId)
    }
  })
}

/**
 * 获取消息详情
 *
 * @description 根据 ID 获取消息详情，API 已返回 title 字段
 * @param {string|number} id 消息ID
 */
const fetchDetail = async (id) => {
  loading.value = true
  try {
    // 根据环境选择使用 Mock 数据还是真实 API
    const res = USE_MOCK_DATA
      ? await mockDetailAPI({ i: id })
      : await detailAPI({ i: id })

    if (res.code === 1) {
      // API 已返回 title 字段，直接使用后端数据
      detail.value = res.data

      // 查看消息后刷新用户信息，更新未读消息数
      const userStore = useUserStore()
      await userStore.fetchUserInfo(true)
    }
  } 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;
  }
}

/* 计划书状态标记样式 */
.status-badge {
  padding: 4rpx 12rpx;
  border-radius: 9999rpx;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
}

/* 计划书信息列表项样式 */
.proposal-info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .label {
    flex-shrink: 0;
    color: #6B7280;
  }

  .value {
    flex: 1;
    margin-left: 24rpx;
    text-align: right;
    color: #111827;
    font-weight: 500;
    word-break: break-all;
    word-wrap: break-word;
  }
}

/* 待处理 - 橙色 */
.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;
}
</style>