<template>
  <div class="p-15">
    <div class="text-xl font-semibold text-black-3">
      {{ detailData.projectTitle }}
    </div>
    <div class="mt-5 flex flex-wrap items-center gap-7">
      <div
        v-for="item in lableList"
        :key="item"
        class="flex h-20 items-center justify-center rounded-sm border border-current px-5 text-sm text-primary"
      >
        {{ item }}
      </div>
    </div>
    <div class="text-black-6 text-sm mt-10">{{ detailData.remarks }}</div>
    <div class="mt-10">
      <span class="text-xl font-semibold text-[#FF2222]">
        <template v-if="detailData.price"
          >{{ detailData.price }} {{ detailData.priceUnit }}</template
        >
        <template v-else>???? {{ detailData.priceUnit }}</template>
      </span>
      <span class="text-black-9">/人起</span>
    </div>
  </div>
</template>

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

const lableList = computed(
  () => props.detailData.projectLabel?.split("&") ?? []
);
</script>

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