<template>
  <div class="flex justify-center">
    <div class="w-wrap">
      <div class="flex flex-col items-center space-y-5">
        <div class="font-bold text-black-3 text-xl">热门目的地</div>
        <div class="h-4 w-38 rounded-full bg-primary"></div>
      </div>
      <div class="grid grid-cols-2 gap-10 mt-20">
        <NuxtLink
          v-for="item in hotCountryData"
          :to="`/travel-notes?area=${item.parentId}&country=${item.id}`"
          class="relative cursor-pointer overflow-hidden rounded-lg transition-all"
        >
          <van-image
            :src="formatImgSrc(item.hotPictureUrlsAfterConvert)"
            fit="cover"
            class="w-full aspect-[224/215] object-cover"
            alt=""
            srcset=""
          />
          <div
            class="absolute bottom-0 left-0 right-0 flex h-37 items-center bg-gradient-to-b from-transparent to-[#020202] pl-10"
          >
            <span class="text-l text-white"> {{ item.menuName }}</span>
          </div>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>
const { data } = await useMyFetch(`website/basic/directoryList?isHotspot=1`);
const hotCountryData = computed(() => (data.value?.dataList ?? []).slice(0, 4));
</script>

<style lang="scss" scoped></style>
