<template>
  <div
    class="box-border flex cursor-pointer space-x-12 rounded-5xl border-[3px] bg-white transition-all hover:shadow-card"
    :class="[active ? 'border-primary shadow-card' : 'border-white']"
  >
    <van-image
      :src="itemData.image"
      width="127"
      height="127"
      radius="10px"
      fit="cover"
      class="shrink-0"
    />
    <div class="flex w-0 flex-1 flex-col">
      <div class="truncate text-xl font-semibold text-black-3">
        {{ itemData.name }}
      </div>
      <div class="truncate text-base text-black-6">
        {{ itemData.seatNumber }}座
      </div>
      <div class="truncate text-base text-black-6">
        {{ itemData.luggageNumber }}行李(建议24寸行李箱)
      </div>
      <div class="flex items-center space-x-10">
        <span class="text-base font-semibold text-black-6">评分</span>
        <van-rate
          disabled
          :size="14"
          v-model="itemData.score"
          disabled-color="#FD9A00"
          color="#FD9A00"
        />
      </div>
      <div class="flex items-center justify-between">
        <div>
          <div class="truncate text-3xl font-semibold text-[#FF1D1D]">
            {{ itemData.price }}{{ itemData.unit }}
          </div>
          <div class="shrink-0 text-sm text-black-9">(10小时)</div>
        </div>
        <van-button
          @click="$emit('onSelect')"
          type="primary"
          color="#FD9A00"
          size="small"
          style="width: 70px; font-size: 14px"
          round
          >选择</van-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
defineEmits(["onSelect"]);
defineProps({
  itemData: {
    type: Object,
    default: () => ({}),
  },
  active: {
    type: Boolean,
    default: false,
  },
});
</script>

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