<template>
  <div class="flex flex-col">
    <ul class="flex items-center justify-between px-[30rpx] py-[20rpx]">
      <li class="flex flex-col items-center" v-for="(item, index) in filterList" :key="index" @click="activeMenu = item.id">
        <img
          :src="item.icon"
          alt="icon"
          class="w-[96rpx] h-[96rpx] rounded-[40rpx] mb-[10rpx] border-solid border-[4rpx]"
          :class="[activeMenu === item.id ? 'border-[#28BEBB] ' : 'border-[transparent]']" />
        <span class="text-[40rpx] font-500" :class="[activeMenu === item.id ? 'text-[#28BEBB]' : '']">{{ item.name }}</span>
      </li>
    </ul>
    <nut-list class="bg-[#F5F5F5]" :list-data="products" @scroll-bottom="onScrollBottom">
      <template #default="{ item }">
        <div class="flex items-center justify-center mt-[30rpx] mx-[30rpx]" @click="toProductInfo(item)">
          <div class="w-[690rpx] h-[256rpx] rounded-[20rpx] bg-[#fff] flex">
            <img :src="item.image" alt="thumb" class="h-full object-cover w-[256rpx]" />
            <div class="flex flex-col p-[30rpx] flex-auto justify-between">
              <div class="text-[40rpx] font-500">{{ item.name }}</div>
              <div class="flex justify-between items-end">
                <nut-price :price="item.price" size="large" class="text-[56rpx] text-[#F03B25] font-600 leading-[1]" />
                <div class="text-[24rpx] text-[#999] font-400">{{ item.soldCount }}人已购</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </nut-list>
  </div>
</template>

<script lang="ts" setup>
  import { getRequest } from "@/api/customFetch";
  import { getMallRecommend, getProductCategory } from "@/api/interfaceDocument";
  import { useGetUserAddressList } from "@/composables/useUserAddress";
  import { useRouter } from "vue-router";

  useGetUserAddressList();
  const router = useRouter();
  const filterList = [
    { id: 0, name: "推荐", icon: "/images/shop/recommend.png" },
    { id: 1, name: "居家安全", icon: "/images/shop/wheelchair.png" },
    { id: 3, name: "出行助理", icon: "/images/shop/travel.png" },
    { id: 4, name: "洗护用品", icon: "/images/shop/toiletries.png" },
  ];
  const activeMenu = ref(0);

  const useProductCategory = () => {
    getRequest(getProductCategory()).then((_resp) => {});
  };
  useProductCategory();

  const products = ref<any[]>([]);
  const useProducts = () => {
    getRequest(getMallRecommend()).then((resp) => {
      products.value = (resp.result as { products: any[] }).products;
    });
  };
  useProducts();

  const onScrollBottom = () => {
    // useProducts()
  };

  const toProductInfo = (product: any) => {
    router.push({ path: "/shop/product", query: { id: product.id } });
  };
</script>
