<template>
  <view class="Mall4j page-category">
    <!-- 搜索框 -->
    <view class="search-box">
      <view
        class="search"
        @tap="onToSearchPage"
      >
        <view class="icon">
          <image src="/static/images/search.png" />
        </view>
        <view class="text">
          搜索您想购买的商品或者店铺
        </view>
      </view>
    </view>
    <!-- 内容区 -->
    <view class="main">
      <!-- 左侧内容 -->
      <view class="first-menu">
        <block
          v-for="(firstCategory, firstIndex) in firstCategoryList"
          :key="firstIndex"
        >
          <view
            class="item"
            :class="{active:selectedIndex===firstIndex}"
            @tap="onSwitchCategory(firstIndex)"
          >
            {{ firstCategory.name }}
          </view>
        </block>
      </view>
      <!-- 右侧内容 -->
      <view class="subclass">
        <view
          v-if="categoryPic"
          class="adv-img"
          :style="{background: !categoryError ? '' : '#f8f8f8'}"
        >
          <image
            v-if="!categoryError"
            :src="util.addDomain(categoryPic)"
            @error="onImgError"
          />
          <image
            v-else
            src="/static/images/category.png"
            class="error-image"
          />
        </view>
        <block
          v-for="(secondCategory, index) in secondCategoryList"
          :key="index"
        >
          <view
            v-if="secondCategory.status === 1"
            class="sub-con"
          >
            <view class="second-menu">
              {{ secondCategory.name }}
            </view>
            <view class="third-menu">
              <block
                v-for="(thirdCategory, subIndex) in secondCategory.categories"
                :key="subIndex"
              >
                <view
                  v-if="thirdCategory.status === 1"
                  class="item"
                  @tap="onToSearchListPage(thirdCategory.categoryId, thirdCategory.name, secondCategory.categoryId)"
                >
                  <view class="img">
                    <image
                      v-if="thirdCategory.imgUrl && !categoryThirdError.includes(`${index}-${subIndex}`)"
                      :src="util.addDomain(thirdCategory.imgUrl)"
                      @error="onImgThirdError(index, subIndex)"
                    />
                    <image
                      v-else
                      src="/static/images/category.png"
                    />
                  </view>
                  <view class="text">
                    {{ thirdCategory.name }}
                  </view>
                </view>
              </block>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

// 选中的分类项(默认为第一个分类)
const selectedIndex = ref(0)
// 一级分类内容(一级分类下的categories为二级分类)
const firstCategoryList = ref([])
// 二级分类内容(二级分类下的categories为三级分类)
const secondCategoryList = ref([])
// 当前分类图片
const categoryPic = ref('')
const categoryError = ref(false)
const categoryThirdError = ref([])

/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  onGetPlatformCategoryList()
})

/**
 * 生命周期函数--监听页面
 */
onShow(() => {
  // 获取购物车数字
  getCartCount()
})

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

/**
 * 获取平台分类(直接得到1、2、3级的分类)
 */
const onGetPlatformCategoryList = () => {
  const params = {
    url: '/mall4cloud_product/ua/category/shop_category_list',
    method: 'GET',
    data: {
      shopId: 0,
      parentId: 0
    }
  }
  http.request(params).then((res) => {
    firstCategoryList.value = res.filter(x => {
      x.categories = x.categories.filter(el => el.status && el.categories.some(item => item.status === 1))
      return (x.status === 1 && x.categories.some(val => {
        return (val.status === 1 && val.categories.some(item => item.status === 1))
      }))
    })
    // 默认选择: 第一个一级分类
    secondCategoryList.value = firstCategoryList.value[0].categories
    categoryPic.value = res[0].imgUrl
  })
}

/**
 * 切换分类，改变二级分类内容
 * @param {Number} index 当前选择的一级分类索引
 */
const onSwitchCategory = (index) => {
  categoryError.value = false
  selectedIndex.value = index
  secondCategoryList.value = firstCategoryList.value[index].categories
  categoryPic.value = firstCategoryList.value[index].imgUrl
  categoryThirdError.value = []
}

/**
 * 跳转到搜索页
 */
const onToSearchPage = () => {
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

/**
 * 跳转到商品列表页
 */
const onToSearchListPage = (categoryId, categoryName, secondCategoryId) => {
  // 点击三级分类进入商品搜索页面时，带上二级分类id
  uni.navigateTo({
    url: '/pages/search-list/search-list?cid=' + categoryId + '&cName=' + categoryName + '&cid2=' + secondCategoryId
  })
}
/**
 * 用户点击右上角分享
 */

const onImgError = () => {
  categoryError.value = true
}
const onImgThirdError = (index, subIndex) => {
  categoryThirdError.value.push(`${index}-${subIndex}`)
}

</script>

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