<template>
  <div class="flex flex-col bg-[#F5F5F5] custom-tabs flex-auto">
    <nut-tabs v-model="activeTab" :swipeable="true" title-scroll>
      <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' : '']">
            {{ item.title }}
          </div>
        </div>
      </template>
      <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey">
        <div class="flex flex-col p-[30rpx] flex-auto min-h-0 overflow-auto">
          <div class="text-[32rpx] text-[#666] mb-[20rpx]">共{{ nursingDetail.album?.total }}张图片</div>
          <ul class="grid grid-cols-2 gap-[18rpx_14rpx]">
            <li v-for="(item, index) in nursingDetail.album?.images" :key="index">
              <img :src="item" alt="" class="w-full h-[240rpx]" />
            </li>
          </ul>
        </div>
      </nut-tab-pane>
    </nut-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { useNursingDetail } from "@/composables/useNursing";

  const { nursingDetail } = useNursingDetail();

  const activeTab = ref("0");

  //   const list = ref(nursingDetail.value?.albums?.categories.map((item:any,index:number)=>({title:item,paneKey:index})));
  const list = computed(() => {
    return nursingDetail.value?.album?.categories.map((item: any, index: number) => ({ title: item, paneKey: index.toString() }));
  });
</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;
    }
  }
</style>
