<!--
 * @Date: 2026-02-27
 * @Description: v-html 测试页面 - 使用 RichTextRenderer 组件
 *
 * @purpose
 *   测试 RichTextRenderer 组件的富文本渲染功能
 *   对比 index1.vue 中 mp-html 组件的绑定方式
 *
 * @test-cases
 *   1. 组件渲染响应式变量
 *   2. 内容切换响应性
 *   3. HTML 实体解析
 *   4. 图片长按预览
 *   5. 文件链接点击
 *   6. 链接长按复制
-->
<template>
  <view class="rich-text-test-page">
    <!-- 导航栏 -->
    <NavHeader title="RichTextRenderer 测试" />

    <view class="test-container">
      <!-- 测试说明 -->
      <view class="test-info">
        <text class="test-title">测试项目：</text>
        <text class="test-item">1. 组件渲染 {{ renderTest ? '✅' : '❌' }}</text>
        <text class="test-item">2. 内容切换 {{ contentSwitchTest ? '✅' : '❌' }}</text>
        <text class="test-item">3. 图片预览 {{ imagePreviewTest ? '✅' : '❌' }}</text>
        <text class="test-item">4. 文件链接 {{ fileLinkTest ? '✅' : '❌' }}</text>
        <text class="test-item">5. 长按复制 {{ linkCopyTest ? '✅' : '❌' }}</text>
      </view>

      <!-- RichTextRenderer 渲染区域 -->
      <view class="renderer-container">
        <text class="container-title">RichTextRenderer 渲染区域：</text>
        <view class="renderer-wrapper">
          <RichTextRenderer
            :content="testHtml"
            :enable-transform="transformEnabled"
            @image-preview="handleImagePreview"
            @file-click="handleFileClick"
            @link-copy="handleLinkCopy"
          />
        </view>
      </view>

      <!-- 测试结果 -->
      <view class="test-results">
        <text class="result-title">测试结果：</text>
        <text class="result-item">当前内容: {{ currentContentType }}</text>
        <text class="result-item">内容长度: {{ contentLength }} 字符</text>
        <text class="result-item">切换次数: {{ switchCount }}</text>
        <text class="result-item">最后操作: {{ lastAction }}</text>
      </view>

      <!-- 切换测试内容 -->
      <view class="test-actions">
        <view class="action-btn primary" @tap="switchTestContent(1)">测试1: 纯文本</view>
        <view class="action-btn primary" @tap="switchTestContent(2)">测试2: HTML标签</view>
        <view class="action-btn primary" @tap="switchTestContent(3)">测试3: 图片</view>
        <view class="action-btn warning" @tap="clearContent">清空内容</view>
        <view class="action-btn success" @tap="loadFromAPI">模拟API加载</view>
        <view class="action-btn danger" @tap="loadRealApiData">📄 真实API</view>
        <view class="action-btn" :class="transformEnabled ? 'enabled' : ''" @tap="toggleTransform">
          {{ transformEnabled ? '✅' : '⚪' }} 图片自动处理
        </view>
      </view>

      <!-- 对比说明 -->
      <view class="compare-note">
        <text class="note-title">组件说明：</text>
        <text class="note-item">• RichTextRenderer 基于 Taro v-html</text>
        <text class="note-item">• 自动解析 HTML 实体（&nbsp; &amp; 等）</text>
        <text class="note-item">• 自动替换 &lt;a&gt; 为 &lt;div data-href=""&gt;</text>
        <text class="note-item">• 支持图片长按预览、文件链接点击、链接长按复制</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Taro, { definePageConfig } from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
import RichTextRenderer from '@/components/RichTextRenderer.vue'

// 配置页面
definePageConfig({
  navigationBarTitleText: 'RichTextRenderer 测试'
})

// 测试状态
const renderTest = ref(false)
const contentSwitchTest = ref(false)
const imagePreviewTest = ref(false)
const fileLinkTest = ref(false)
const linkCopyTest = ref(false)
const switchCount = ref(0)
const currentContentType = ref('未加载')
const contentLength = ref(0)
const lastAction = ref('页面初始化')
const transformEnabled = ref(true)

// 测试 HTML 内容
const testHtml = ref('')

// 真实 API 数据（来自 raw.md）
const realApiData = {
  id: 3185667,
  post_title: "IANG Profile入职指引",
  post_content: `<p><img src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="微信图片_20260227170749.jpg" width="800" height="340" /></p>
<p>&nbsp;</p>
<p>📝IANG&nbsp;Profile入职指引💡</p>
<hr />
<p>&nbsp;</p>
<p>符合IANG&nbsp;计划的招募对象👥</p>
<p>1️⃣年龄：21-55岁</p>
<p>2️⃣持IANG、高才通B/C类 VISA及大学毕业或以上学历</p>
<p>3️⃣非香港永久性居民</p>
<p>4️⃣并非宏利前代理人</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>📑📌IANG Profile需注意事项：</p>
<p>1.此计划提供18个月每月津贴（底薪），并设有3年约束期；每月津贴申请金额：本科毕业生每月津贴为港元 10,000-港元 20,000; 硕士毕业生每月津贴为港元 15,000-港元 25,000; 博士毕业生：每月津贴为港元 20,000-港元 30,000</p>
<p>2.如代理人业绩未达到该月的业绩规定，将不會获发放该月的每月津貼。代理人可于第三个、第六个、第九个、第十二个、第十五个及第十八个合約月份结束时达到相应的的业绩规定及课程规定（第四个合约月内完成财富管家课程），将可获补发未获发放的每月津贴；</p>
<p>3.若于第36个合约月内合约因任何原因被终止，需全数退还已收取的每月津贴；</p>
<p>4.若首 18 个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的每月津贴；</p>
<p>5. 若首 12 个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的特别业绩表现奖金 I；</p>
<p>6. 若首 13个合约月份至第24个合约月份代理人所销售保单续保率为55%以上及 80%以下，须按比例退回已收取的特别业绩表现奖金 II 。</p>
<p>&nbsp;</p>
<p>其余规定请查看以下公司IANG计划之规定文件！</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/2-hk-prog_IANG_Profile_Program_C_Fj2lebJPQj71S8LhhOtgmcYVnpBD.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">2-hk-prog_IANG_Profile....pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">384.34 KB</span></span></a></p>
<p>&nbsp;</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/IANG Profile illustration_FriOxAVusDKilewqIqFo_OHdc84X.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">IANG Profile illustration.pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">1.82 MB</span></span></a></p>
<p>&nbsp;</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/IANG对数表_Fq3IQGJuM0SP4zAkKZDK803xVeQK.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">IANG对数表.pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">65.73 KB</span></span></a></p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>📑📌IANG Profile入职资料</p>
<p>1.香港身份证</p>
<p>2.Visa</p>
<p>3.首次入境小票</p>
<p>4.申请VISA时登记的有效港澳通行证正反面或护照个人信息页</p>
<p>5.近三个月内由港府、香港银行、香港电话公司发出的【香港住宅英文地址证明】（注1️⃣）</p>
<p>6.毕业证及近三个月学信网学历认证，国外学历须提供留服认证或香港资历架构认证（注2️⃣）</p>
<p>7.卷一及卷三合格证明</p>
<p>8.香港电话号码（注3️⃣）</p>
<p>9.在港申请的香港银行卡</p>
<p>10.一寸证件照两张，底色无要求</p>
<p>11.简历</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>⚠️入职资料注意事项：</p>
<p>1️⃣香港住宅英文地址证明，例如：水电煤气通知单、银行月结单或电话费月结单等；证券接单不可作为有效地址证明。</p>
<p>2️⃣艺术类，语言类或文科专业毕业，还需提供成绩单，且成绩单里包含中文、英语及数学成绩、成绩须达第二级/达E级或以上，IA看情况要求提供成绩认证。</p>
<p>3️⃣香港电话号码尽量不提供在内地申请的两地号码，两地号码在内地没办法收验证码，不便于办理挂牌手续。</p>
<p>&nbsp;</p>
<hr />
<p>&nbsp;</p>
<p>入职办理流程⤵️：</p>
<p>1.准招募递交入职申请后，由DD核实审批</p>
<p>2.审批完毕后，入职流程递交至AR部门，AR部门核实签证类型，没问题后Pass至AD部门</p>
<p>3.AD核实后，出Offer&nbsp;Letter</p>
<p>4.准招募签署完Offer&nbsp;Letter后，流程Pass至C&amp;B部门做资料综合审核及背景调查</p>
<p>5.审查完毕，C&amp;B同事帮准招募向保監提出挂牌申请</p>
<p>6.准招募收到保監发出的【保險中介一站通-啟動個人賬戶】郵件及公司發出的纸本AOP啟動碼</p>
<p>7.联系秘书填写一站通资料</p>
<p>8.公司审核一站通资料无误后，准招募支付挂牌费用（3年挂牌费为港元810）</p>
<p>9.挂牌后，公司生成专属Agent&nbsp;code，并发出代理人合约及奖金合约</p>
<p>10.准招募签署合约并递交给公司</p>
<p>11.收到公司配送的Welcome&nbsp;Kit，内含工牌、门卡及邮件激活密码</p>
<p>12.激活邮件及Manutouch账号后，可开始签单</p>
<p>&nbsp;</p>
<p><img src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227171202_FhZfGYQAKK_04-E_Td5TzNosjlXm.jpg" alt="微信图片_20260227171202.jpg" width="1200" height="596" /></p>
<hr />
<p>&nbsp;</p>
<p>⭐入职需完成课程✅：</p>
<p>1.【新人课】，完成后方可发第1期底薪，建议在递交完入职资料，等待出Code过程中，联系秘书报名，最迟在入职第一个合约月内完成，完成后方可发第1个月底薪。</p>
<p>2.【财富管家课程】，入职后4个月内需上完，否则会影响底薪及佣金发放，建议出code后，尽快安排时间联系秘书报名。</p>
<p>&nbsp;</p>
<p>🕹️签署合约后，每月需交给公司200元/月行政费！</p>
<hr />
<p>&nbsp;</p>
<p>🔗相关链接（长按可复制）：</p>
<p>• <a href="https://www.manulife.com" target="_blank" rel="noopener">宏利官网</a> - 了解公司最新动态</p>
<p>• <a href="https://www.hkma.org.hk" target="_blank" rel="noopener">香港保险业监管局</a> - 查询保险中介人资质</p>
<p>• <a href="https://www.ia.org.hk" target="_blank" rel="noopener">保监局一站通</a> - 在线申请挂牌</p>
<p>• <a href="https://www.example.com/courses" target="_blank" rel="noopener">培训课程报名</a> - 新人课和财富管家课程</p>
<p>&nbsp;</p>
<p>💡提示：长按上方链接可以复制链接地址</p>
<hr />
<p>&nbsp;</p>
<p>入职资料Sample</p>
<p><a class="_file_list" style="display: inline-block; padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; margin: 8px; background: #f8f9fa; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 400px; transition: all 0.3s ease; text-decoration: none; color: inherit; cursor: pointer; font-family: -apple-system,BlinkMacSystemFont,;" href="https://cdn.ipadbiz.cn/space_3079606/需提供的部分个人资料SAMPLE（不含流水SAMPLE）_扫描版_lkAqOTlyK-jZ7RbBN43oiG5QPfr-.pdf" target="_blank" rel="noopener"><span style="display: inline-block; font-size: 24px; margin-right: 12px; color: #6c757d; vertical-align: middle;"><img style="width: 30px; height: 30px; vertical-align: text-bottom;" src="https://cdn.ipadbiz.cn/img%2Ftinymce_icon%2Foffice-pdf.png" /></span><span style="display: inline-block; vertical-align: middle;"><span style="display: block; font-weight: 600; font-size: 14px; color: #2c3e50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2;">需提供的部分个人资料SAMPLE（不含流水S....pdf</span><span style="display: block; font-size: 12px; color: #6c757d; margin-top: 4px; line-height: 1.2;">101.91 MB</span></span></a></p>
<p>&nbsp;</p>`
}

// 测试内容模板
const testContents = {
  1: {
    name: '纯文本',
    content: `
      <h1>测试1：纯文本渲染</h1>
      <p>这是一段纯文本内容，测试 RichTextRenderer 是否能正确渲染基本的 HTML 结构。</p>
      <p><strong>加粗文本</strong>和<em>斜体文本</em>测试。</p>
    `
  },
  2: {
    name: 'HTML标签',
    content: `
      <h1>测试2：HTML 标签解析</h1>
      <h2>二级标题</h2>
      <h3>三级标题</h3>
      <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
      </ul>
      <p>段落测试：<span style="color: red;">红色文字</span>和<span style="color: blue;">蓝色文字</span></p>
    `
  },
  3: {
    name: '图片',
    content: `
      <h1>测试3：图片渲染</h1>
      <p>点击图片测试长按预览功能：</p>
      <p class="h5-p">
        <img class="h5-img" src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="测试图片" style="max-width: 100%;" />
      </p>
    `
  }
}

// 处理图片预览事件
const handleImagePreview = ({ src }) => {
  imagePreviewTest.value = true
  lastAction.value = `图片预览: ${src.substring(0, 50)}...`
}

// 处理文件点击事件
const handleFileClick = ({ fileName }) => {
  fileLinkTest.value = true
  lastAction.value = `文件点击: ${fileName}`
}

// 处理链接复制事件
const handleLinkCopy = ({ url, fileName }) => {
  linkCopyTest.value = true
  lastAction.value = `长按复制: ${fileName}`
}

// 切换测试内容
const switchTestContent = (index) => {
  const template = testContents[index]
  if (template) {
    testHtml.value = template.content
    currentContentType.value = template.name
    contentLength.value = template.content.length
    switchCount.value++
    lastAction.value = `切换到测试${index}: ${template.name}`
    contentSwitchTest.value = true
    renderTest.value = true
  }
}

// 清空内容
const clearContent = () => {
  testHtml.value = ''
  currentContentType.value = '已清空'
  contentLength.value = 0
  lastAction.value = '清空内容'
}

// 模拟 API 加载
const loadFromAPI = () => {
  lastAction.value = '模拟 API 加载中...'
  Taro.showLoading({ title: '加载中...' })

  setTimeout(() => {
    const apiData = `
      <div class="api-content">
        <h1>从 API 加载的内容</h1>
        <p>这是模拟从后端 API 获取的富文本内容。</p>
        <p>加载时间：${new Date().toLocaleString()}</p>
        <p class="h5-p">
          <img class="h5-img" src="https://cdn.ipadbiz.cn/space_3079606/微信图片_20260227170749_FhZ6SHYxM9yVKOPo1LeqVO25I35q.jpg" alt="API图片" />
        </p>
      </div>
    `
    testHtml.value = apiData
    currentContentType.value = 'API 数据'
    contentLength.value = apiData.length
    lastAction.value = 'API 加载完成'
    renderTest.value = true
    Taro.hideLoading()
  }, 1000)
}

// 加载真实 API 数据
const loadRealApiData = () => {
  lastAction.value = '加载真实 API 数据...'
  Taro.showLoading({ title: '加载中...' })

  setTimeout(() => {
    testHtml.value = realApiData.post_content
    currentContentType.value = `真实文章: ${realApiData.post_title}`
    contentLength.value = realApiData.post_content.length
    switchCount.value++
    lastAction.value = `加载文章 ID: ${realApiData.id}`
    renderTest.value = true
    Taro.hideLoading()

    Taro.showToast({
      title: '组件自动处理',
      icon: 'success'
    })
  }, 500)
}

// 切换 transformElement
const toggleTransform = () => {
  transformEnabled.value = !transformEnabled.value
  lastAction.value = transformEnabled.value ? '已启用图片自动处理' : '已禁用图片自动处理'
  Taro.showToast({
    title: transformEnabled.value ? '已启用' : '已禁用',
    icon: transformEnabled.value ? 'success' : 'none'
  })
}

// 初始化
onMounted(() => {
  switchTestContent(1)
})
</script>

<style lang="less">
.rich-text-test-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.test-container {
  padding: 32rpx;
}

.test-info {
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.test-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.test-item {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin: 8rpx 0;
}

.renderer-container {
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  min-height: 200rpx;
}

.container-title {
  display: block;
  font-size: 28rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.test-results {
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.result-title {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.result-item {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin: 8rpx 0;
}

.test-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-bottom: 24rpx;
}

.action-btn {
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  background: #f0f0f0;
  color: #333;

  &.primary {
    background: #1989fa;
    color: #fff;
  }

  &.warning {
    background: #ff976a;
    color: #fff;
  }

  &.success {
    background: #07c160;
    color: #fff;
  }

  &.danger {
    background: #ee0a24;
    color: #fff;
    font-weight: bold;
  }

  &.enabled {
    background: #07c160;
    color: #fff;
  }
}

.compare-note {
  background: #f0f9ff;
  padding: 24rpx;
  border-radius: 12rpx;
  border-left: 8rpx solid #1989fa;
}

.note-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 16rpx;
}

.note-item {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin: 8rpx 0;
  line-height: 1.5;
}
</style>