<template>
  <div class="flex flex-col bg-[#F5F5F5] custom-tabs flex-auto">
    <nut-tabs v-model="activeTab" :swipeable="true" class="flex-auto">
      <template #titles>
        <div
          v-for="item in list"
          :key="item.paneKey"
          class="mr-[18rpx] text-[#999] text-[36rpx] font-400 flex items-center ml-[30rpx] my-[22rpx]"
          :class="[activeTab === item.paneKey ? 'bg-[url(/images/product/tab-line.png)] bg-no-repeat bg-bottom-center bg-contain' : '']"
          @click="activeTab = item.paneKey">
          <div class="custom-title" :class="[activeTab === item.paneKey ? 'text-[#000] font-600 text-[40rpx]' : '']">
            {{ item.title }}
          </div>
        </div>
      </template>
      <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey">
        <ul class="flex flex-col p-[30rpx] flex-auto min-h-0 overflow-auto">
          <li v-for="(item, index) in cleaningList" :key="index" class="rounded-[20rpx] h-[256rpx] flex bg-white mb-[30rpx]" @click="toDetail(item.id)">
            <img :src="item.cover" alt="" class="w-[256rpx] h-[256rpx] rounded-[20rpx_0_0_20rpx]">
            <div class="p-[30rpx] flex flex-col flex-auto justify-between">
                <p class="text-[40rpx]">{{ item.title }}</p>
                <div class="text-[26rpx] text-[#1D86FF] font-400 bg-[#edf6ff] px-[10rpx] py-[6rpx] w-[242rpx] mt-[12rpx] mb-[24rpx]">{{ item.tag }}</div>
                <div class="flex items-end justify-between">
                    <div>
                        <nut-price :price="item.price" size="large" class="font-700"/>
                        <span class="text-[#666] text-[28rpx] ml-[4rpx]">起</span>
                    </div>
                    <div class="text-[#999] text-[24rpx]">{{item.purchased}}人已购</div>
                </div>
            </div>
          </li>
        </ul>
      </nut-tab-pane>
    </nut-tabs>
    <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] py-[10rpx]">
      <span>没有您要的服务，请联系</span>
      <PhoneCall :stroke-width="1.5" class="ml-[12rpx]" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { PhoneCall } from "lucide-vue-next";
  import { useRouter } from "vue-router";
  import { useGetHousekeepingCleaningList } from "@/composables/useHousekeeping";

  const router = useRouter();


  const activeTab = ref("0");

  const list = [{title:'优质保姆',paneKey:'0'},{title:'日常保洁',paneKey:'1'},{title:'上门维修',paneKey:'2'}];
  
  const {cleaningList} = useGetHousekeepingCleaningList();

  const toDetail = (tId:string) => {    
    router.push({name:'housekeeping-detail',params:{id:tId}})
  }
</script>

<style lang="scss" scoped>
  .custom-tabs {
    --nut-tabs-titles-background-color: #fff;
    --nut-tabs-horizontal-titles-height: 50px;

    :deep(.nut-tab-pane) {
      padding: 0;
      background-color: #f5f5f5;
    }
    :deep(.nut-tabs__titles){
        justify-content: space-evenly;
    }

    :deep(.nut-tabs__content){
        min-height: 0;
        flex: 1 1 auto;
    }
  }
</style>
