<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-bar">
      <!-- 搜索输入框 -->
      <view class="search-box">
        <input placeholder="输入关键字搜索" <!-- 输入框占位符文本 -->
        class="sear-input" <!-- 应用样式类 sear-input -->
        confirm-type="search" <!-- 设置确认按钮类型为“搜索” -->
        :value="prodName" <!-- 绑定输入框的值到 prodName 变量 -->
        @confirm="toSearchProdPage" <!-- 监听用户按下确认键时触发搜索 -->
        @input="getSearchContent" <!-- 监听用户输入内容并更新 prodName -->
        />
        <!-- 搜索图标 -->
        <image src="@/static/images/icon/search.png" <!-- 图标图片路径 -->
          class="search-img" <!-- 应用样式类 search-img -->
        />
      </view>
      <!-- 取消按钮 -->
      <text class="search-hint" <!-- 应用样式类 search-hint -->
        @tap="goBackIndex" <!-- 点击取消按钮返回首页 -->
      >
        取消
      </text>
    </view>

    <!-- 搜索结果显示区域 -->
    <view class="search-display">
      <!-- 热门搜索 -->
      <view class="hot-search">
        <view class="title-text">
          <!-- 热门搜索标题 -->
          热门搜索
        </view>
        <!-- 如果有热门搜索数据，则显示标签 -->
        <view v-if="hotSearchList && hotSearchList.length" <!-- 条件渲染，只有当 hotSearchList 存在且非空时显示 -->
          class="hot-search-tags"
        >
          <block
            v-for="(item, index) in hotSearchList" <!-- 遍历热门搜索列表 -->
            :key="index" <!-- 使用索引作为唯一标识 -->
          >
            <text
              class="tags" <!-- 应用样式类 tags -->
              :data-name="item.content" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
              @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
            >
              {{ item.title }} <!-- 显示标签文本 -->
            </text>
          </block>
        </view>
        <!-- 如果没有热门搜索数据，显示暂无数据提示 -->
        <view v-else
              class="search-tit-empty">
          暂无数据
        </view>
      </view>

      <!-- 搜索历史 -->
      <view v-if="recentSearch && recentSearch.length" <!-- 条件渲染，只有当 recentSearch 存在且非空时显示 -->
        class="history-search"
      >
        <view class="title-text history-line"> <!-- 搜索历史标题 -->
          搜索历史
          <!-- 清除历史记录按钮 -->
          <view class="clear-history">
            <image
              src="@/static/images/icon/clear-his.png" <!-- 清除图标图片路径 -->
              @tap="clearSearch" <!-- 点击清除图标时清空历史记录 -->
            />
          </view>
        </view>
        <!-- 遍历最近搜索历史并显示 -->
        <block
          v-for="(item, index) in recentSearch" <!-- 遍历最近搜索历史列表 -->
          :key="index" <!-- 使用索引作为唯一标识 -->
        >
          <view class="his-search-tags">
            <text
              class="tags" <!-- 应用样式类 tags -->
              :data-name="item" <!-- 绑定 data-name 属性，用于传递搜索关键词 -->
              @tap="onHistSearch" <!-- 点击标签时触发搜索 -->
            >
              {{ item }} <!-- 显示历史记录文本 -->
            </text>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

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

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    // 发送请求获取热门搜索数据
    http.request({
      url: '/search/hotSearchByShopId', // API 请求地址
      method: 'GET', // 请求方法为 GET
      data: {
        number: 10, // 获取前10个热门搜索
        shopId: 1, // 商店ID
        sort: 1 // 排序方式
      }
    })
      .then(({ data }) => {
        hotSearchList.value = data; // 将获取到的数据赋值给 hotSearchList
      });

    // 获取历史搜索记录
    getRecentSearch();
  });

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

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide(() => {
    prodName.value = ''; // 当页面隐藏时清空输入框内容
  });

  // 定义响应式变量，用于存储最近搜索历史
  const recentSearch = ref([]);

  /**
   * 获取历史搜索记录
   */
  const getRecentSearch = () => {
    // 从本地存储中获取最近搜索历史
    recentSearch.value = uni.getStorageSync('recentSearch') || [];
  };

  /**
   * 搜索提交
   */
  const toSearchProdPage = () => {
    if (prodName.value.trim()) { // 检查输入框内容是否为空或仅包含空白字符
      // 记录最近搜索
      let recentSearchStorage = uni.getStorageSync('recentSearch') || []; // 从本地存储获取最近搜索历史
      recentSearchStorage = recentSearchStorage.filter(item => item !== prodName.value); // 移除重复的搜索关键词
      recentSearchStorage.unshift(prodName.value); // 将新的搜索关键词添加到数组开头
      if (recentSearchStorage.length > 10) { // 如果超过10个记录，移除最后一个
        recentSearchStorage.pop();
      }
      uni.setStorageSync('recentSearch', recentSearchStorage); // 更新本地存储中的最近搜索历史

      // 跳转到商品列表页，并传递搜索关键词
      uni.navigateTo({
        url: `/pages/search-prod-show/search-prod-show?prodName=${encodeURIComponent(prodName.value)}`
      });
    }
  };

  /**
   * 清空搜索历史
   */
  const clearSearch = () => {
    // 从本地存储中移除最近搜索历史
    uni.removeStorageSync('recentSearch');
    // 重新获取最近搜索历史（此时应为空）
    getRecentSearch();
  };

  /**
   * 返回首页
   */
  const goBackIndex = () => {
    // 返回上一页
    uni.navigateBack({
      delta: 1 // 返回一级页面
    });
  };

  /**
   * 输入商品名获取数据 || 绑定输入值
   */
  const getSearchContent = (e) => {
    // 更新 prodName 的值为用户输入的内容
    prodName.value = e.detail.value;
  };

  /**
   * 点击搜素历史
   */
  const onHistSearch = (e) => {
    // 将点击的历史记录设置为当前输入框的值
    prodName.value = e.currentTarget.dataset.name;
    // 触发搜索操作
    toSearchProdPage();
  };
</script>

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