<template>
  <div class="flex flex-col h-screen">
    <HomeBanner class="h-250 shrink" />
    <div
      class="z-[999] flex-1 flex overflow-auto pt-20 -mt-15 bg-white rounded-t-2xl"
    >
      <TravelFirstLevelDirectoryMenu
        class="shrink"
        @change="handleMenuChange"
      />
      <div class="flex-1 pt-10 flex flex-col">
        <div class="text-black-3 pl-10 text-base font-semibold shrink">
          热门目的地
        </div>
        <div
          class="flex flex-wrap px-10 items-start gap-x-10 gap-y-15 mt-15 pb-30 flex-1 content-start overflow-auto"
        >
          <NuxtLink
            v-for="item in rightData"
            :key="item"
            :to="`/travel-notes?menuName=${item.menuName}&areaId=${item.parentId}&countryId=${item.id}`"
            class="flex flex-col w-83 aspect-1 space-y-8 art items-center"
          >
            <van-image
              :src="
                item.hotPictureUrlsAfterConvert?.length
                  ? item.hotPictureUrlsAfterConvert[0]
                  : ''
              "
              class="aspect-[84/63] w-full object-cover rounded-lg overflow-hidden"
            />
            <span class="text-sm text-black-3 truncate">{{
              item.menuName
            }}</span>
          </NuxtLink>
        </div>
      </div>
    </div>
    <Tabbar />
  </div>
</template>

<script setup>
function handleMenuChange(menu) {
  getRightData(menu.areaId);
}

const rightData = ref([]);

async function getRightData(id) {
  console.log(id);

  const { data } = await request(`website/basic/directoryList`, {
    query: { parentId: id ?? null, isAll: !id ? 1 : 0 },
  });
  rightData.value = data.dataList;
}

onMounted(() => {
  getRightData();
});
</script>

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