<template>
  <view class="container">
    <!-- 头部搜索区 -->
    <view class="search-bar">
      <view class="search-box"
            @tap="toSearchPage">
        <image src="@/static/images/icon/search.png"
               class="search-img" />
        <text class="sear-input">
          搜索您想要的商品
        </text>
      </view>
    </view>
    <!-- 滚动内容区 -->
    <view class="main">
      <!-- 左侧菜单start -->
      <scroll-view scroll-y="true"
                   class="leftmenu">
        <block v-for="(item, index) in categoryList"
               :key="index">
          <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '"
                :data-index="index"
                :data-id="item.categoryId"
                @tap="onMenuTab">
            {{ item.categoryName }}
          </view>
        </block>
        <view v-if="!categoryList ||!categoryList.length"
              class="ca-empty">
          {{ categoryList && categoryList.length? '该分类下暂无商品' : '暂无商品' }}
        </view>
      </scroll-view>
      <!-- 左侧菜单end -->
      <!-- 右侧内容start -->
      <scroll-view scroll-y="true"
                   class="rightcontent">
        <view class="adver-map">
          <view class="item-a">
            <image :src="util.checkFileUrl(categoryImg)"
                   mode="widthFix" />
          </view>
        </view>
        <!-- 子分类 -->
        <!-- 这是一个条件渲染的视图元素，只有当subCategoryList数组的长度大于0时才会显示 -->
        <view v-if="subCategoryList.length"
              class="th-cate-con">
          <!-- 使用v-for指令循环遍历subCategoryList数组，index为当前项的索引，thCateItem代表数组中的每个子分类项对象 -->
          <block v-for="(thCateItem, index) in subCategoryList"
                 :key="index">
            <!-- 每个子分类的外层视图容器，用于包裹子分类相关的内容，设置了类名为sub-category -->
            <view class="sub-category">
              <!-- 子分类具体项的视图容器，绑定了点击事件toCatePage，并且通过自定义属性传递了子分类相关的ID信息 -->
              <view class="sub-category-item"
                    :data-categoryid="thCateItem.categoryId"
                    :data-parentid="thCateItem.parentId"
                    @tap="toCatePage">
                <!-- 展示子分类对应的图片，通过util.checkFileUrl方法对图片路径进行处理（可能是检查路径合法性、添加域名等操作），并设置了类名为more-pic以及图片的显示模式为widthFix，widthFix模式可以让图片宽度自适应容器宽度，高度按比例缩放 -->
                <image :src="util.checkFileUrl(thCateItem.pic)"
                       class="more-pic"
                       mode="widthFix" />
                <!-- 展示子分类的名称，通过双括号插值表达式绑定子分类项对象中的categoryName属性来显示具体的名称文本 -->
                <text>{{ thCateItem.categoryName }}</text>
              </view>
            </view>
          </block>
        </view>
        <!-- 当subCategoryList数组长度为0时，显示这个视图元素，用于给用户提示当前分类下暂无子分类的信息 -->
        <view v-else
              class="cont-item empty">
          该分类下暂无子分类~
        </view>

        <script setup>
          import util from '@/utils/util.js'
          import { ref, onLoad } from 'vue'
          import { uni } from '@dcloudio/uni-app'
          import { http } from '@/utils/http.js' // 假设http请求相关的配置在这里引入，实际根据你的项目结构调整

          // 响应式变量，用于存储分类列表数据，初始值为空数组
          const categoryList = ref([])
          // 响应式变量，用于存储子分类列表数据，初始值为空数组
          const subCategoryList = ref([])
          // 响应式变量，用于存储分类图片的路径，初始值为空字符串
          const categoryImg = ref('')
          // 响应式变量，用于存储父分类ID，初始值为空字符串
          const parentId = ref('')
          // 响应式变量，用于记录当前选中的分类菜单项索引，初始值为0
          const selIndex = ref(0)

          // 生命周期函数 - 在页面加载时触发，一般用于初始化页面数据等操作
          onLoad(() => {
            // 加载分类列表
            http.request({
              url: '/category/categoryInfo',
              method: 'GET',
              data: {
                parentId: ''
              }
            })
              .then(({ data }) => {
                categoryImg.value = data[0].pic
                categoryList.value = data
                getProdList(data[0].categoryId)
                parentId.value = categoryList.value[0].categoryId
              })
          })

          // 分类点击事件处理函数
          const onMenuTab = (e) => {
            const index = e.currentTarget.dataset.index
            getProdList(categoryList.value[index].categoryId)
            parentId.value = categoryList.value[index].categoryId
            categoryImg.value = categoryList.value[index].pic
            selIndex.value = index
          }

          // 跳转搜索页函数
          const toSearchPage = () => {
            uni.navigateTo({
              url: '/pages/search-page/search-page'
            })
          }

          // 获取产品列表的函数
          const getProdList = (categoryId) => {
            // 加载分类列表
            http.request({
              url: '/category/categoryInfo',
              method: 'GET',
              data: {
                parentId: categoryId
              }
            })
              .then(({ data }) => {
                subCategoryList.value = data
              })
          }

          // 跳转子分类商品页面的函数
          const toCatePage = (e) => {
            const { categoryid } = e.currentTarget.dataset
            uni.navigateTo({
              url: `/pages/sub-category/sub-category?parentId=${parentId.value}&categoryId=${categoryid}`
            })
          }

        </script>

        <style scoped lang="scss">
          @import "./category.scss";
        </style>
