<template>
  <NuxtLink :to="`t/${itemData.id}`" class="flex space-x-10 py-10 border-b">
    <van-image
      :src="formatImgSrc(itemData.tourismUrlsAfterConvert)"
      radius="10px"
      class="w-145 h-103 shrink-0"
    />
    <div class="flex-1 w-0">
      <div class="truncate">{{ itemData.projectTitle }}</div>
      <div v-if="projectLabels.length" class="flex flex-wrap gap-5 mt-5">
        <div
          v-for="label in projectLabels"
          :key="label"
          class="text-sm bg-[#FD9A00] h-18 text-white flex items-center justify-center rounded-full px-5"
        >
          {{ label }}
        </div>
      </div>
      <div class="text-sm text-black-6 line-clamp-2 mt-5">
        {{ itemData.remarks }}
      </div>
      <div class="text-[#FF2020] flex items-center space-x-5 mt-5">
        <span>{{ itemData.price }}</span>
        <span>{{ itemData.priceUnit }}</span>
      </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));
});
</script>

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