<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]">{{
          fomartStatus(orderDetailInfo.orderStatus)
        }}</span>
      </div>
      <div class="mt-10">订单号：{{ orderDetailInfo.orderNo }}</div>
      <div class="mt-5">下单时间：{{ orderDetailInfo.createTime }}</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.departureDate).format("YYYY-MM-DD")
        }}
      </div>
      <div>行程天数：{{ orderDetailInfo.countTimes }}</div>
    </div>

    <div class="mt-15 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 class="flex flex-col space-y-5 mt-15">
        <div>联系人：{{ orderDetailInfo.customerName }}</div>
        <div>联系电话：{{ orderDetailInfo.customerMobile }}</div>
        <div>备用电话：{{ orderDetailInfo.customerMobileStandby }}</div>
        <div>微信：{{ orderDetailInfo.customerWechat }}</div>
      </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({});

const orderStatusEnum = [
  {
    value: "0",
    label: "未确认",
  },
  {
    value: "1",
    label: "未完成",
  },
  {
    value: "2",
    label: "已完成",
  },
];

function fomartStatus(status) {
  return orderStatusEnum.find((item) => item.value == status)?.label;
}

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>
