<template>
  <view class="app">
    <view class="container" v-for="(item, index) in list" :key="index">
      <view class="title">{{ item.name }}</view>
      <view class="navbar" v-if="Array.isArray(item.Classify)">
        <nut-grid :border="false" column-num="5">
          <nut-grid-item
            v-for="itm in item.Classify"
            :key="itm.ID"
            :text="itm.name"
            @click="toDetails(itm)"
          >
            <image :src="itm.icon" />
          </nut-grid-item>
        </nut-grid>
      </view>
      <nut-empty v-else description="该分类暂无类目" image-size="0"></nut-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Taro from "@tarojs/taro";
import { getAllMerCategory } from "@/api/goods";

const list = ref<
  {
    ID?: number;
    name?: string;
    Classify: {
      ID?: number;
      name?: string;
      icon?: string;
    }[];
  }[]
>([]);

Taro.useLoad(() => {
  get_all_mer_category();
});

const get_all_mer_category = async () => {
  const res = await getAllMerCategory();
  list.value = res.data.data || [];
};

const toDetails = (item: any) => {
  Taro.navigateTo({
    url: `/pages/search/index?id=${item.ID}&name=${item.name}`,
  });
};
</script>

<style lang="scss">
.app {
  padding: 20px;
}

.container {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;

  .title {
    font-weight: bold;
    margin: 10px;
  }

  .navbar {
    background-color: #ffffff;

    .nut-grid-item__content {
      padding: 15px;
    }

    image {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
