<template>
  <view class="Mall4j container">
    <!-- 顶部子分类tab -->
    <scroll-view scroll-x="true" <!-- 允许水平滚动 -->
      class="category-tit" <!-- 应用样式类 category-tit -->
      :scroll-into-view="intoView" <!-- 滚动到指定元素，确保选中的分类项可见 -->
      :scroll-with-animation="true" <!-- 滚动时启用动画效果 -->
    >
      <block
        v-for="(item, index) in subCategoryList" <!-- 遍历子分类列表，动态生成每个分类项 -->
        :key="index" <!-- 使用索引作为唯一标识 -->
      >
        <view
          :id="'sw' + item.categoryId" <!-- 动态设置每个分类项的ID -->
          :class="'category-item ' + (item.categoryId == categoryId ? 'on' : '')" <!-- 动态绑定类名，当前选中的分类项添加 'on' 类 -->
          :data-id="item.categoryId" <!-- 传递分类ID -->
          @tap="onSubCategoryTap" <!-- 点击分类项时触发切换分类的方法 -->
        >
          {{ item.categoryName }} <!-- 显示分类名称 -->
        </view>
      </block>
    </scroll-view>

    <!-- 商品列表 -->
    <view class="prod-item">
      <!-- 商品列表容器 -->
      <block v-if="prodList.length">
        <!-- 条件渲染，只有当商品列表不为空时显示商品项 -->
        <block v-for="(prod, key) in prodList" <!-- 遍历商品列表，动态生成每个商品项 -->
          :key="key" <!-- 使用索引作为唯一标识 -->
        >
          <view
            class="prod-items" <!-- 商品项容器 -->
            :data-prodid="prod.prodId" <!-- 传递商品ID -->
            @tap="toProdPage" <!-- 点击商品项时跳转到商品详情页 -->
          >
            <view class="hot-imagecont"> <!-- 商品图片容器 -->
              <image
                :src="prod.pic" <!-- 动态绑定商品图片路径 -->
                class="hotsaleimg" <!-- 应用样式类 hotsaleimg -->
              />
            </view>
            <view class="hot-text"> <!-- 商品文本信息容器 -->
              <view class="hotprod-text"> <!-- 商品名称 -->
                {{ prod.prodName }} <!-- 显示商品名称 -->
              </view>
              <view class="prod-info"> <!-- 商品简介 -->
                {{ prod.brief }} <!-- 显示商品简介 -->
              </view>
              <view class="prod-text-info"> <!-- 商品价格信息 -->
                <view class="price"> <!-- 价格容器 -->
                  <text class="symbol">￥</text> <!-- 人民币符号 -->
                  <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text> <!-- 显示整数部分价格 -->
                  <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text> <!-- 显示小数部分价格 -->
                </view>
              </view>
            </view>
          </view>
        </block>
      </block>
      <view v-else <!-- 条件渲染，只有当商品列表为空时显示空状态提示 -->
        class="empty-wrap" <!-- 应用样式类 empty-wrap -->
      >
        暂无商品数据~
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, nextTick } from 'vue'; // 导入 Vue 的 ref 和 nextTick 函数

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

  // 定义响应式变量，用于存储父分类ID
  const parentId = ref('');

  // 定义响应式变量，用于存储当前选中的子分类ID
  const categoryId = ref(0);

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    // 将页面加载时传递的参数赋值给响应式变量
    parentId.value = options.parentId;
    categoryId.value = options.categoryId;

    // 获取子分类数据和商品列表数据
    getSubCategory();
    getProdList();
  });

  // 定义响应式变量，用于存储当前页码
  const current = ref(1);

  // 定义响应式变量，用于存储总页数
  const pages = ref(0);

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(() => {
    // 如果当前页码小于总页数，则加载下一页商品
    if (current.value < pages.value) {
      current.value = current.value + 1;
      getProdList();
    }
  });

  // 定义响应式变量，用于控制滚动到哪个分类项
  const intoView = ref('');

  // 定义响应式变量，用于存储子分类列表
  const subCategoryList = ref([]);

  /**
   * 获取顶栏子分类数据
   */
  const getSubCategory = () => {
    // 发送请求获取子分类数据
    http.request({
      url: '/category/categoryInfo', // API 请求地址
      method: 'GET', // 请求方法为 GET
      data: {
        parentId: parentId.value // 传递父分类ID
      }
    })
      .then(({ data }) => {
        // 将获取到的数据赋值给 subCategoryList
        subCategoryList.value = data;

        // 使用 nextTick 确保 DOM 更新后执行滚动操作
        nextTick(() => {
          intoView.value = 'sw' + categoryId.value; // 滚动到当前选中的分类项
        });
      });
  };

  // 定义响应式变量，用于存储商品列表
  const prodList = ref([]);

  // 定义响应式变量，用于标记列表是否加载完毕
  const isLoaded = ref(false);

  /**
   * 根据分类ID获取商品列表数据
   */
  const getProdList = () => {
    isLoaded.value = false; // 标记列表正在加载

    // 发送请求获取商品列表数据
    http.request({
      url: '/prod/pageProd', // API 请求地址
      method: 'GET', // 请求方法为 GET
      data: {
        categoryId: categoryId.value, // 传递当前选中的分类ID
        current: current.value, // 当前页码
        size: 10, // 每页显示的商品数量
        sort: 0, // 排序方式（这里固定为0）
        isAllProdType: true // 是否获取所有类型的商品
      }
    })
      .then(({ data }) => {
        isLoaded.value = true; // 标记列表加载完毕

        // 如果是第一页，则直接赋值；否则将新数据追加到已有数据中
        prodList.value = data.current == 1 ? data.records : prodList.value.concat(data.records);

        // 更新当前页码和总页数
        current.value = data.current;
        pages.value = data.pages;
      });
  };

  /**
   * 切换顶部分类
   * @param e - 事件对象
   */
  const onSubCategoryTap = (e) => {
    // 更新当前选中的分类ID
    categoryId.value = e.currentTarget.dataset.id;

    // 重置分页参数
    current.value = 1;
    pages.value = 0;

    // 更新滚动位置，确保选中的分类项可见
    intoView.value = 'sw' + e.currentTarget.dataset.id;

    // 重新加载商品列表数据
    getProdList();
  };

  /**
   * 跳转商品详情页
   * @param e - 事件对象
   */
  const toProdPage = (e) => {
    const prodid = e.currentTarget.dataset.prodid; // 获取商品ID

    // 如果商品ID存在，则跳转到商品详情页
    if (prodid) {
      uni.navigateTo({
        url: `/pages/prod/prod?prodid=${prodid}`
      });
    }
  };
</script>

<style lang="scss" scoped>
  @import "./sub-category.scss"; /* 引入外部样式文件 */
</style>
