<template>
  <div class="px-20 relative">
    <HomeSectionHeader
      title="旅行游记"
      subTitle="Hot items"
      more-to-url="/travel-notes"
    />
    <swiper-container ref="containerRef" class="swiper">
      <swiper-slide v-for="(item, index) in travelNotesList" :key="item.id">
        <HomeTravelNotesItem :itemData="item" />
      </swiper-slide>
      <swiper-slide>
        <NuxtLink
          to="/travel-notes"
          class="border aspect-[267/230] border-[#DFE0E4] rounded-xl bg-[#FAFAFA] flex flex-col items-center justify-center text-xl text-black-3"
        >
          <span
            class="iconfont icon-arrow_right"
            style="font-size: 24px"
          ></span>
          <span>了解更多</span>
        </NuxtLink>
      </swiper-slide>
    </swiper-container>
    <div
      @click="handleLeftClick"
      class="w-30 h-30 bg-white flex shadow-sm items-center justify-center absolute left-10 top-140 z-50 rounded-full"
    >
      <span class="iconfont icon-left text-[#b0b0b0]"></span>
    </div>
    <div
      @click="handleRightClick"
      class="w-30 h-30 bg-white flex shadow-sm items-center justify-center absolute right-10 top-140 z-50 rounded-full"
    >
      <span class="iconfont icon-right text-[#b0b0b0]"></span>
    </div>
    <!-- <div class="relative">
      <div class="flex w-full overflow-scroll space-x-20 scrollbar">
        <HomeTravelNotesItem
          v-for="item in travelNotesList"
          :key="item.id"
          :itemData="item"
        />
      </div>
      <div
        @click="handleLeftClick"
        class="w-30 h-30 bg-white flex shadow-sm items-center justify-center absolute -left-10 top-1/2 -translate-y-1/2 rounded-full"
      >
        <span class="iconfont icon-left text-[#b0b0b0]"></span>
      </div>
      <div
        @click="handleRightClick"
        class="w-30 h-30 bg-white flex shadow-sm items-center justify-center absolute -right-10 top-1/2 -translate-y-1/2 rounded-full"
      >
        <span class="iconfont icon-right text-[#b0b0b0]"></span>
      </div>
    </div> -->
  </div>
</template>

<script setup>
const { data } = await useMyFetch(
  `website/tourism/projectTravelNotes/homeList?pageNum=1&pageSize=10`
);
const travelNotesList = computed(() => data.value?.dataList ?? []);

const containerRef = ref(null);
const swiper = useSwiper(containerRef, {
  effect: "creative",
  autoplay: {
    delay: 5000,
  },
  freeMode: {
    enabled: true,
  },
  // freeMode: true,
  slidesPerView: 1.2,
  spaceBetween: 17,
});

function handleLeftClick() {
  swiper.prev();
}

function handleRightClick() {
  swiper.next();
}
</script>

<style lang="scss" scoped>
.scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background-color: #ccc;
}
</style>
