<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="fixed-box">
      <!-- 固定定位的盒子，通常用于页面顶部导航栏或标签栏 -->
      <view class="search-bar">
        <!-- 搜索栏容器 -->
        <view class="search-box">
          <!-- 搜索输入框容器 -->
          <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
          class="sear-input" <!-- 应用样式类 sear-input -->
          :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
          confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
          @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
          @confirm="toSearchConfirm" <!-- 监听用户按下确认键时触发搜索 -->
          />
          <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
            class="search-img" <!-- 应用样式类 search-img -->
          />
        </view>
        <view class="search-list-img" <!-- 切换显示类型的图标容器 -->
          @tap="changeShowType" <!-- 点击切换显示类型 -->
        >
          <image
            v-if="showType == 1" <!-- 当 showType 为 1 时显示此图标 -->
            src="@/static/images/icon/search-col.png" <!-- 图标图片路径 -->
          />
          <image
            v-if="showType == 2" <!-- 当 showType 为 2 时显示此图标 -->
            src="@/static/images/icon/search-col2.png" <!-- 图标图片路径 -->
          />
        </view>
      </view>
      <view class="tabs">
        <!-- 标签栏容器 -->
        <text :class="'tab-item complete ' + (sts == 0 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
          data-sts="0" <!-- 数据属性，用于标识当前标签 -->
          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
        >
          综合
        </text>
        <text :class="'tab-item ' + (sts == 1 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
          data-sts="1" <!-- 数据属性，用于标识当前标签 -->
          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
        >
          销量
        </text>
        <text :class="'tab-item ' + (sts == 2 ? 'on' : '')" <!-- 动态绑定类名，根据 sts 值决定是否添加 'on' 类 -->
          data-sts="2" <!-- 数据属性，用于标识当前标签 -->
          @tap="onStsTap" <!-- 点击标签时触发排序方式切换 -->
        >
          价格
        </text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="prod-list">
      <!-- 商品列表容器 -->
      <!-- 横向列表 -->
      <view v-if="showType == 1" <!-- 条件渲染，只有当 showType 为 1 时显示横向列表 -->
        class="prod-show"
      >
        <view class="hotsale-item-cont"> <!-- 热销商品容器 -->
          <block
            v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
            :key="index" <!-- 使用索引作为唯一标识 -->
          >
            <production
              :item="item" <!-- 传递商品项数据 -->
              sts="6" <!-- 传递状态码，可能是用于样式或其他逻辑 -->
            />
          </block>
        </view>
      </view>

      <!-- 纵向列表 -->
      <view v-if="showType == 2" <!-- 条件渲染，只有当 showType 为 2 时显示纵向列表 -->
        class="cont-item"
      >
        <block
          v-for="(item, index) in searchProdList" <!-- 遍历搜索结果列表 -->
          :key="index" <!-- 使用索引作为唯一标识 -->
        >
          <view
            class="show-item" <!-- 商品项容器 -->
            :data-prodid="item.prodId" <!-- 传递商品ID -->
            @tap="toProdPage" <!-- 点击商品项时跳转到商品详情页 -->
          >
            <view class="more-prod-pic"> <!-- 商品图片容器 -->
              <image
                :src="item.pic" <!-- 动态绑定图片路径 -->
                class="more-pic" <!-- 应用样式类 more-pic -->
              />
            </view>
            <view class="prod-text-right"> <!-- 商品文本信息容器 -->
              <view class="prod-text more"> <!-- 商品名称 -->
                {{ item.prodName }} <!-- 显示商品名称 -->
              </view>
              <view class="cate-prod-info"> <!-- 商品评价信息 -->
                {{ item.praiseNumber }}评价 {{ item.positiveRating }}%好评 <!-- 显示评价数量和好评率 -->
              </view>
              <view class="prod-price more"> <!-- 商品价格 -->
                <text class="symbol">￥</text> <!-- 人民币符号 -->
                <text class="big-num">{{ wxs.parsePrice(item.price)[0] }}</text> <!-- 显示整数部分价格 -->
                <text class="small-num">.{{ wxs.parsePrice(item.price)[1] }}</text> <!-- 显示小数部分价格 -->
              </view>
            </view>
          </view>
        </block>
      </view>

      <!-- 空占位 -->
      <view v-if="!searchProdList.length" <!-- 条件渲染，只有当搜索结果为空时显示空占位 -->
        :class="['empty', showType == 1 ? 'empty-top' : '']" <!-- 动态绑定类名，根据 showType 决定是否添加 'empty-top' 类 -->
      >
        暂无结果
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'; // 导入 Vue 的 ref 函数，用于创建响应式变量

  // 定义一个工具函数对象，假设它是从某个模块导入的
  const wxs = number(); // 这里假设 `number` 是一个函数，返回一个包含解析价格方法的对象

  // 定义响应式变量，用于存储用户输入的商品名称
  const prodName = ref('');

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    // 如果页面加载时有传递参数，则将参数中的 prodName 赋值给 prodName 变量
    prodName.value = options.prodName;
  });

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 页面每次显示时调用 toLoadData 方法加载数据
    toLoadData();
  });

  // 定义响应式变量，用于控制商品列表的显示类型（1: 横向列表, 2: 纵向列表）
  const showType = ref(2);

  // 切换商品列表显示类型的方法
  const changeShowType = () => {
    // 切换 showType 的值，实现横向和纵向列表之间的切换
    if (showType.value == 1) {
      showType.value = 2;
    } else {
      showType.value = 1;
    }
  };

  /**
   * 输入商品获取数据
   * @param e - 事件对象
   */
  const getSearchContent = (e) => {
    // 更新 prodName 的值为用户输入的内容
    prodName.value = e.detail.value;
  };

  // 定义响应式变量，用于存储当前排序方式（0: 综合, 1: 销量, 2: 价格）
  const sts = ref(0);

  // 定义响应式变量，用于存储搜索结果列表
  const searchProdList = ref([]);

  /**
   * 请求热门搜索商品接口
   */
  const toLoadData = () => {
    // 发送请求获取搜索结果数据
    http.request({
      url: '/search/searchProdPage', // API 请求地址
      method: 'GET', // 请求方法为 GET
      data: {
        current: 1, // 当前页码
        prodName: prodName.value, // 搜索关键词
        size: 10, // 每页显示的商品数量
        sort: sts.value // 排序方式
      }
    })
      .then(({ data }) => {
        // 将获取到的数据赋值给 searchProdList
        searchProdList.value = data.records;
      });
  };

  /**
   * 当前搜索页二次搜索商品
   * @param e - 事件对象
   */
  const toSearchConfirm = (e) => {
    // 检查输入框内容是否为空
    if (e.detail.value) {
      // 获取最近搜索历史
      let recentSearch = uni.getStorageSync('recentSearch') || [];
      // 移除重复的搜索关键词
      recentSearch = recentSearch.filter(item => item !== prodName.value);
      // 将新的搜索关键词添加到数组开头
      recentSearch.unshift(prodName.value);
      // 如果超过10个记录，移除最后一个
      if (recentSearch.length > 10) {
        recentSearch.pop();
      }
      // 更新本地存储中的最近搜索历史
      uni.setStorageSync('recentSearch', recentSearch);
    }
    // 跳转到商品列表页，并传递搜索关键词
    uni.redirectTo({
      url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(e.detail.value)}`
    });
  };

  /**
   * 状态点击事件
   * @param e - 事件对象
   */
  const onStsTap = (e) => {
    // 更新 sts 的值为当前点击的标签对应的排序方式
    sts.value = e.currentTarget.dataset.sts;
    // 重新加载数据
    toLoadData();
  };

  /**
   * 跳转到商品详情页
   * @param e - 事件对象
   */
  const toProdPage = (e) => {
    // 跳转到商品详情页，并传递商品ID
    uni.navigateTo({
      url: `/pages/prod/prod?prodid=${e.currentTarget.dataset.prodid}`
    });
  };
</script>

<style scoped lang="scss">
  @use './search-prod-show.scss'; /* 引入外部样式文件 */
</style>
