<template>
  <div class="px-20">
    <HomeSectionHeader
      title="热门目的地"
      subTitle="Popular destinations"
      :show-more="false"
    />
    <div class="flex overflow-scroll scrollbar space-x-15">
      <NuxtLink
        :to="`/travel-notes?area=${item.parentId}&country=${item.id}`"
        v-for="item in hotCountryData"
        :key="item"
        class="relative"
      >
        <van-image
          :src="formatImgSrc(item.hotPictureUrlsAfterConvert)"
          fit="cover"
          class="w-135 h-180 object-cover"
          radius="10px"
        />
        <div
          class="text-white text-xl font-semibold absolute left-0 bottom-12 right-0 px-10 flex items-center justify-center"
        >
          <div class="truncate">{{ item.menuName }}</div>
        </div>
      </NuxtLink>
    </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>
.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #ccc;
}
</style>
