<template>
  <view class="Mall4j shop-page">
    <view class="shop-category">
      <!-- 头部 -->
      <shop-head
        ref="shopHeadRef"
        :shop-id="shopId"
        :is-products-page="false"
      />

      <!-- 分类 -->
      <view class="category  page-shop-category">
        <!-- 内容区 -->
        <view class="main">
          <!-- 左侧内容 -->
          <view class="first-menu">
            <view
              v-for="(item, index) in categoryList"
              :key="index"
              :class="['item', selectedCategoryId === item.categoryId ? 'active' : '']"
              @tap="switchCategory(item.categoryId)"
            >
              {{ item.name }}
            </view>
          </view>
          <!-- 右侧内容 -->
          <view class="subclass">
            <view class="adv-img">
              <img-show :src="banner" />
            </view>
            <view class="sub-con">
              <!-- <view class="second-menu">二级分类名称</view> -->
              <view class="third-menu">
                <view
                  v-for="(subItem, subIndex) in subCategory"
                  :key="subIndex"
                  class="item"
                  @tap="toShopProdOfCategoryId(subItem.categoryId, subItem.name)"
                >
                  <view class="img">
                    <img-show :src="subItem.imgUrl" />
                  </view>
                  <view class="text">
                    {{ subItem.name }}
                  </view>
                </view>
                <!-- 空数据 -->
                <empty-all-tips
                  v-if="loading&&!subCategory.length"
                  :is-empty="true"
                  empty-tips="该分类下暂无子分类"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 店铺tabbar -->
      <shop-tabbar
        style="position:fixed;bottom:0;width:100%;left:0;right:0;"
        :shop-id="shopId"
        current-tab="3"
      />
    </view>
  </view>
</template>

<script setup>
import shopHead from '@/package-shop/components/shop-head/index.vue'

const shopId = ref(0)
onLoad((options) => {
  // options = { ...$Route.query }
  const shopInfo = uni.getStorageSync('cloudShopInfo') || {}
  shopId.value = options.shopId || shopInfo.shopId
  queryCategoryData()
})

const categoryList = ref([]) // 分类列表
const banner = ref('')
const selectedCategoryId = ref(0)
/**
 * 获取分类数据（请求全部分类）
 */
const queryCategoryData = () => {
  http.request({
    url: '/tmerclub_product/ua/category/category_list',
    method: 'GET',
    data: {
      shopId: shopId.value,
      parentId: 0
    }
  }).then((res) => {
    categoryList.value = res
    if (res.length) {
      banner.value = res[0].imgUrl
      selectedCategoryId.value = res[0].categoryId // 默认选中分类第一项
      switchCategory(res[0].categoryId)
    } else {
      loading.value = true
    }
  })
}

const loading = ref(false)

const subCategory = ref([]) // 二级分类
/**
 * 切换分类
 */
const switchCategory = (categoryId) => {
  selectedCategoryId.value = categoryId
  categoryList.value.some((item) => {
    if (item.categoryId === categoryId) {
      banner.value = item.imgUrl
      return true
    } else {
      return false
    }
  })
  http.request({
    url: '/tmerclub_product/ua/category/category_list',
    method: 'GET',
    data: {
      shopId: shopId.value,
      parentId: categoryId
    }
  }).then((res) => {
    subCategory.value = res
    loading.value = true
  })
}

/**
 * 点击分类跳转
 */
const toShopProdOfCategoryId = (categoryId, name) => {
  uni.redirectTo({
    url: '/package-shop/shop-page/shop-prods/shop-prods?secondCategoryId=' + categoryId + '&categoryName=' + name
  })
}

</script>

<style lang="scss" scoped>
@use "../shop-page";
</style>

<style lang="scss" scoped>
@use "shop-category";
</style>
