<template>
  <div
    class="text-base bg-[#f8f8f8] min-h-screen px-15 pt-15 pb-20 text-black-6"
  >
    <div class="rounded-xl bg-white p-15">
      <div class="flex items-center">
        <img
          src="~/assets/img/order/order_status.webp"
          class="h-30 w-30 object-contain"
        />
        <span class="text-3xl font-semibold text-[#ff3535]">{{
          orderDetailInfo.orderStatus === 0 ? "未完成" : "已完成"
        }}</span>
      </div>
      <div class="mt-10">订单号：{{ orderDetailInfo.orderNo }}</div>
    </div>

    <div class="mt-15 flex flex-col space-y-10 rounded-xl bg-white p-20">
      <div class="flex items-center">
        <img
          src="~/assets/img/order/order_time.webp"
          class="h-25 w-25 object-contain"
          alt=""
          srcset=""
        />
        <span class="ml-5 text-xl font-semibold text-black-3">{{
          orderDetailInfo?.tourismProjectVo?.projectTitle || ""
        }}</span>
      </div>
      <div>
        预定日期：{{ $dayjs(orderDetailInfo.createTime).format("YYYY-MM-DD") }}
      </div>
      <div>
        行程日期：{{
          $dayjs(orderDetailInfo.departureDate).format("YYYY-MM-DD")
        }}-{{ $dayjs(orderDetailInfo.endDate).format("YYYY-MM-DD") }}
      </div>
    </div>

    <div class="mt-15 flex flex-col space-y-10 rounded-xl bg-white p-20">
      <div class="flex items-center">
        <img
          src="~/assets/img/order/order_user.webp"
          class="h-25 w-25 object-contain"
          alt=""
          srcset=""
        />
        <span class="ml-5 text-xl font-semibold text-black-3">顾客信息</span>
      </div>
      <div>顾客姓名：{{ orderDetailInfo.customerName }}</div>
      <div>联系方式：{{ orderDetailInfo.customerMobile }}</div>
    </div>

    <div
      v-for="(item, index) in orderDetailInfo.detailList"
      :key="item"
      class="rounded-xl bg-white p-20 mt-20"
    >
      <div class="text-base text-black-3">预定信息</div>
      <div class="flex pt-10">
        <div class="text-xl font-semibold text-black-3">
          旅客{{ index + 1 }}
        </div>
        <div class="mt-2 ml-15 flex flex-col space-y-15">
          <div>中文姓名：{{ item.chineseName }}</div>
          <div>英文姓名：{{ item.englishName }}</div>
          <div>国籍：{{ item.nationality }}</div>
          <div>出生日期：{{ item.birthday }}</div>
          <div>手机号码：{{ item.mobile }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const id = useRouteParam("id");

const loading = ref(false);

const orderDetailInfo = ref({});

async function getOrderDetail() {
  loading.value = true;
  const { data } = await request(
    `/website/tourism/myOrder/detail?orderId=${id.value}`
  );
  orderDetailInfo.value = data;
  loading.value = true;
}

onMounted(() => {
  getOrderDetail();
});
</script>

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