<template>
  <NuxtLink
    :to="`/profile/travel-order/${itemData.id}`"
    class="bg-white rounded-xl overflow-hidden text-black-3 text-base"
  >
    <div class="px-15 pt-15">
      <div class="text-xl">
        <span class="font-semibold">{{ itemData.projectTitle }}</span>
        <span class="text-[#FD9A00]">&nbsp;{{ itemData.countTimes }}</span>
      </div>
      <div class="mt-5">
        日期：{{ $dayjs(itemData.startDate).format("YYYY-MM-DD") }}
      </div>
      <div class="mt-8">联系人：{{ itemData.customerName }}</div>
      <div class="flex items-center justify-between">
        <div class="mt-5">
          在线付：<span class="text-xl text-[#ff5555] font-semibold"
            >{{ itemData.totalAmount }}{{ itemData.currency }}</span
          >
        </div>
        <van-button
          @click.prevent="$emit('onCancel')"
          type="primary"
          color="#FD9A00"
          plain=""
          size="small"
          >取消订单</van-button
        >
      </div>
    </div>
    <div
      class="bg-[#FD9A00] pl-20 text-sm mt-10 h-35 text-white flex items-center"
    >
      订单号:{{ itemData.orderNo }}
    </div>
  </NuxtLink>
</template>

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

defineEmits(["onCancel"]);
</script>

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