<template>
  <view class="container">
    <!-- 最近新闻容器 -->
    <view class="recent-news">
      <!-- 使用 v-for 指令循环渲染 news 数组中的每一个项目 -->
      <block v-for="(item, index) in news" :key="index">
        <!-- 新闻项，点击时触发 toNewsDetail 方法 -->
        <view class="news-item" :data-id="item.id" @tap="toNewsDetail">
          <!-- 新闻标题 -->
          <view class="news-item-title">{{ item.title }}</view>
          <!-- 新闻发布时间 -->
          <view class="news-item-date">{{ item.publishTime }}</view>
        </view>
      </block>
      <!-- 当 news 数组为空或不存在时显示的空状态提示 -->
      <view v-if="!news || !news.length" class="empty">暂无数据</view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onShow } from 'vue'; // 导入 Vue 的响应式引用和生命周期钩子
  import http from '@/utils/http';   // 假设这是用于发送 HTTP 请求的工具

  // 定义一个响应式的数组来存储新闻列表
  const news = ref([]);

  /**
   * 生命周期函数--监听页面显示
   * 当页面显示时调用此函数，通常用于加载初始数据。
   */
  onShow(() => {
    // 发送 HTTP GET 请求到服务器以获取公告列表
    http.request({
      url: '/shop/notice/noticeList', // API 地址
      method: 'GET'                    // 请求方法
    })
      .then(({ data }) => {
        // 将从服务器接收到的数据赋值给 news 数组
        news.value = data.records;
      })
      .catch((error) => {
        console.error('Failed to fetch news:', error); // 错误处理
      });
  });

  /**
   * 跳转公告详情页
   * @param e - 触发事件对象，包含当前元素的数据集（dataset）
   */
  const toNewsDetail = (e) => {
    // 使用 uni.navigateTo 方法导航到新闻详情页面，并传递新闻 ID 作为查询参数
    uni.navigateTo({
      url: `/pages/news-detail/news-detail?id=${e.currentTarget.dataset.id}`
    });
  };
</script>

<style scoped lang="scss">
  /* 引入外部样式文件，这里的样式将仅应用于本组件 */
  @use './recent-news.scss';
</style>
