<template>
  <div class="flex flex-col bg-[#F5F5F5]">
    <img src="/images/travel/background.png" alt="background" class="w-full h-[584rpx]" />

    <div class="flex flex-col pt-[28rpx] bg-white mt-[22rpx] custom-tabs rounded-[28rpx_28rpx_0_0] flex-auto">
      <nut-tabs v-model="activeTab" :swipeable="true" title-scroll>
        <template #titles>
          <div
            v-for="item in travelCategory"
            :key="item.paneKey"
            class="mr-[60rpx] text-[#999] text-[36rpx] font-400 flex items-center ml-[28rpx]"
            :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="" :class="[activeTab === item.paneKey ? 'text-[#000] font-600 text-[40rpx]' : 'text-[36rpx]']">
              {{ item.title }}
            </div>
          </div>
        </template>
        <nut-tab-pane v-for="item in travelCategory" :key="item.paneKey" :pane-key="item.paneKey">
          <div class="grid grid-cols-2 gap-[18rpx_14rpx]">
            <div class="rounded-[16rpx] bg-white pb-[20rpx]" v-for="item in travelList" :key="item.id">
              <img :src="item.image" alt="" class="w-full h-[248rpx] rounded-[16rpx+16rpx_0_0]" />
              <p class="text-[36rpx] font-600 mt-[20rpx] px-[20rpx] line-clamp-2">{{ item.title }}</p>
              <p class="text-[26rpx] font-400 text-[#666] my-[20rpx] px-[20rpx]">{{ item.tags.join("·") }}</p>
              <nut-price :price="item.price" size="large" class="font-700 px-[20rpx]" />
            </div>
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>


  </div>
</template>

<script lang="ts" setup>
  import { useTravelList } from "@/composables/useTravel";
  // import { useRouter } from "vue-router";

  // const router = useRouter();

  const activeTab = ref("0");
  const { travelList, travelCategory } = useTravelList();


</script>

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

  :deep(.nut-tab-pane) {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 9%);
  }

  :deep(.nut-tabs) {
    height: 100%;
  }

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