<template>
  <NuxtLink
    :to="`/t/${itemData.id}`"
    target="_blank"
    class="flex shrink-0 w-240 box-border flex-col relative"
  >
    <van-swipe
      ref="swiperRef"
      :autoplay="300000"
      :show-indicators="false"
      :loop="true"
      :touchable="false"
      class="overflow-hidden rounded-xl"
    >
      <van-swipe-item
        v-for="item in itemData.fileUrlList"
        :key="item.id"
        class="border-[#ffffff4d] border-[2px] overflow-hidden rounded-xl"
      >
        <img class="object-cover w-240 h-180" :src="item" />
      </van-swipe-item>
    </van-swipe>
    <div
      @click.prevent="handleLeftClick"
      class="w-26 h-26 z-50 bg-[#00000066] flex shadow-sm items-center justify-center absolute left-10 top-80 rounded-full"
    >
      <span class="iconfont icon-left text-white"></span>
    </div>
    <div
      @click.prevent="handleRightClick"
      class="w-26 h-26 z-50 bg-[#00000066] flex shadow-sm items-center justify-center absolute right-10 top-80 rounded-full"
    >
      <span class="iconfont icon-right text-white"></span>
    </div>
    <span class="mt-15 text-white line-clamp-2 text-xl font-bold">
      {{ itemData.projectTitle }}
    </span>
    <span class="mt-12 line-clamp-2 leading-[26px] text-[#FFEBB9] text-base">{{
      itemData.remarks
    }}</span>
    <div class="flex items-center mt-15 space-x-10 text-base text-white">
      <span> [{{ itemData.startPlace }}出发] </span>
      <span>[{{ itemData.countTimes }}]</span>
    </div>
    <div class="flex items-center flex-wrap gap-10 mt-15">
      <div
        v-for="label in projectLabels"
        :key="label"
        class="h-20 border-[#999999] bg-[#0000004d] text-sm text-[#FFEBB9] border flex items-center justify-center rounded-full px-6"
      >
        {{ label }}
      </div>
    </div>
  </NuxtLink>
</template>

<script setup>
const props = defineProps({
  itemData: {
    type: Object,
    default: () => {},
  },
});

const projectLabels = computed(() => {
  return props.itemData.projectLabel.split("&").filter((item) => Boolean(item));
});

const swiperRef = ref(null);

function handleLeftClick() {
  if (swiperRef.value) {
    swiperRef.value.prev();
  }
}

function handleRightClick() {
  console.log(swiperRef.value);
  if (swiperRef.value) {
    swiperRef.value.next();
  }
}
</script>

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