<template>
  <layout>
    <uv-navbar
      :fixed="false"
      title="分类"
    />
    <view class="goods-category">
      <uv-vtabs
        :chain="chain"
        :list="categoryData"
        :height="height"
        hdHeight="100rpx"
        @change="change"
      >
        <template
          v-for="(item, index) in categoryData"
          :key="index"
        >
          <uv-vtabs-item :index="index">
            <view class="category-list">
              <view
                class="category"
                @click="navigatorProductList"
              >
                <view class="category-title">
                  <view class="line"></view>
                  <view class="category-title-text">
                    {{ item.name }}
                  </view>
                  <view class="line"></view>
                </view>
                <view class="category-content">
                  <uv-grid
                    :border="false"
                    :col="3"
                  >
                    <uv-grid-item
                      v-for="(goodCategory, goodCategoryIndex) in item.children"
                      :key="goodCategoryIndex"
                    >
                      <view class="category-item">
                        <view class="category-item-icon">
                          <image
                            class="image"
                            :src="goodCategory.picUrl"
                          />
                        </view>
                        <view class="category-item-name">
                          {{ goodCategory.name }}
                        </view>
                      </view>
                    </uv-grid-item>
                  </uv-grid>
                </view>
              </view>

            </view>




            <!-- <view
              class="gap"
              v-if="index < list.length - 1"
            >
              <uv-gap
                bg-color="red"
                height="4"
              ></uv-gap>
            </view> -->
          </uv-vtabs-item>
        </template>
        <uv-gap
          bg-color="#fff"
          height="600"
        ></uv-gap>
      </uv-vtabs>
    </view>
  </layout>
</template>

<script setup>
import { ref } from 'vue'
import { getCategoryList } from '@/api/product'
const active = ref(0);

const categoryData = ref([])

const handleGetCategoryList = async () => {
  const category = await getCategoryList()

  let data = []


  function arrayToTree(items) {
    const rootItems = [];
    const itemMap = {};

    // 首先，将所有项按照id映射到itemMap中，并找到根项（没有父项的项）
    items.forEach(item => {
      itemMap[item.id] = { ...item, children: [] };

      if (item.parentId === 0) {
        rootItems.push(itemMap[item.id]);
      }
    });

    // 然后，将子项添加到父项的children属性中
    items.forEach(item => {
      if (item.parentId !== 0) {
        itemMap[item.parentId].children.push(itemMap[item.id]);
      }
    });

    return rootItems;
  }

  if (category) {
    // 二级分类，需要处理一下
    categoryData.value = arrayToTree(category)
    console.log("--> % handleGetCategoryList % category:\n", categoryData.value)
  }
}

handleGetCategoryList()


const navigatorProductList = () => {
  uni.navigateTo({
    url: '/pages/goodsList/goodsList'
  })
}

const onChange = (index) => showToast(`标签名 ${index + 1}`);
</script>

<style lang="less">
.goods-category {}

.category-list {
  padding: 0 20rpx;
}

.category {
  margin-bottom: 20rpx;

  &-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    margin-bottom: 30rpx;

    &-text {
      line-height: 45rpx;
      font-size: 32rpx;
      color: #333333;
      margin: 0 30rpx;
    }

    .line {
      width: 30rpx;
      height: 1rpx;
      background: #CCCCCC;
    }
  }

  &-content {}

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30rpx;

    .image {
      width: 150rpx;
      height: 110rpx;
      display: block;
      background: #ececec;
    }

    &-name {
      margin-top: 20rpx;
      line-height: 32rpx;
      font-size: 24rpx;
      color: #333333;
    }
  }
}
</style>
