<template>
  <div class="flex flex-col bg-[#F5F5F5]">
    <ul class="flex items-center justify-between px-[30rpx] py-[20rpx] overflow-x-auto gap-[54rpx] min-h-[200rpx]">
      <li class="flex flex-col items-center min-w-max" 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="" :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] rounded-[20rpx_0_0_20rpx]" />
            <div class="flex flex-col p-[30rpx] flex-auto justify-between">
              <div class="text-[40rpx] font-500">{{ item.title }}</div>
              <div class="flex items-baseline text-[#F68E1D] font-700">
                <img src="/images/nursing/rate.png" alt="rate.png" class="w-[48rpx] h-[48rpx]">
                <div class="text-[40rpx]">{{ item.rating }}</div>
                <div class="text-[28rpx]">分</div>
              </div>
              <div class="flex justify-between items-end">
                <div class="flex items-end">
                  <nut-price :price="item.price" size="large" class="text-[56rpx] text-[#F03B25] font-600 leading-[1]" />
                  <span class="text-[32rpx] text-[#b7b9b9] font-400">起</span>
                </div>
                <div class="text-[24rpx] text-[#999] font-400">{{ item.purchasedCount }}人已购</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </nut-list>
    <div class="h-[76rpx] w-[486rpx] rounded-full bg-[#1D86FF] flex items-center justify-center self-center text-[#fff] text-[32rpx] font-500 my-[20rpx]">
      <span>没有您要的服务，请联系</span>
      <PhoneCall :stroke-width="1.5" class="ml-[12rpx]" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { getRequest } from "@/api/customFetch";
  import { getHospitalCompanionList } from "@/api/interfaceDocument";
  import { useGetUserAddressList } from "@/composables/useUserAddress";
  import { useRouter } from "vue-router";
  import { PhoneCall } from "lucide-vue-next";

  useGetUserAddressList();
  const router = useRouter();
  const filterList = [
    { id: 0, name: "居家照护", icon: "/images/shop/care.png" },
    { id: 1, name: "住院陪护", icon: "/images/shop/hospital.png" },
    { id: 3, name: "上门助浴", icon: "/images/shop/bath.png" },
    { id: 4, name: "陪诊陪检", icon: "/images/shop/medic.png" },
  ];
  const activeMenu = ref(0);



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

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

  const toProductInfo = (product: any) => {
    router.push({
      name:"health-care-order",
      params:{
        id:product.id
      }
    });
  };
</script>
