<template>
  <view class="container">
    <!-- 新闻详情容器 -->
    <view class="news-detail">
      <!-- 动态绑定新闻标题，使用双大括号语法插值显示 news 对象中的 title 属性 -->
      <view class="news-detail-title">
        {{ news.title }}
      </view>
      <!-- 使用 rich-text 组件来解析并渲染 HTML 内容，动态绑定 news 对象中的 content 属性 -->
      <rich-text class="content"
                 :nodes="news.content"  <!-- :nodes 是 v-bind:nodes 的缩写，用于绑定 HTML 字符串 -->
      />
    </view>
  </view>
</template>

<script setup>
  // 导入 ref 以创建响应式数据对象
  import { ref } from 'vue';
  // 假设 http 和 onLoad 已经通过适当的插件或框架特性导入

  // 定义一个响应式的 news 对象，初始值为一个空的对象，包含 title, content 和 id 属性
  const news = ref({
    title: '',  // 新闻标题
    content: '', // 新闻内容（HTML 格式）
    id: null    // 新闻ID
  });

  /**
   * 页面加载生命周期钩子，当页面加载时调用
   * @param options - 包含页面加载参数的对象
   */
  onLoad((options) => {
    // 发起 HTTP 请求以获取公告详情，使用传入的 options.id 作为请求参数
    http.request({
      url: '/shop/notice/info/' + options.id, // API 端点 URL
      method: 'GET' // 请求方法
    })
      .then(({ data }) => {
        // 修改返回的数据，移除 img 标签中的 width 和 height 属性，防止图片过大
        // 并添加样式以确保图片宽度不超过父容器，并且以块级元素显示
        data.content = data.content.replace(/width=/gi, 'sss=') // 移除 width 属性
        data.content = data.content.replace(/height=/gi, 'sss=') // 移除 height 属性
        data.content = data.content.replace(/ \/>/gi, ' style="max-width:100% !important;display:block;" />') // 添加样式

        // 将从服务器获取的数据赋值给响应式的 news 对象
        news.value = data;
      })
      .catch(error => {
        // 处理可能发生的错误 (这里可以添加错误处理逻辑)
        console.error('Failed to fetch news detail:', error);
      });
  });
</script>

<style scoped lang="scss">
  /* 引入外部的 SCSS 文件，以定义组件的样式 */
  @use './news-detail.scss';
</style>
