<template>
  <div
    v-if="orderInfo"
    class="text-base text-black-3 min-h-screen pb-50 pt-15 px-15 bg-[#F8F8F8]"
  >
    <div class="pr-50 bg-white rounded-xl p-10">
      <div class="flex space-x-15">
        <img
          :src="orderInfo.carImage"
          class="h-110 w-110 shrink-0 rounded-xl object-cover"
        />
        <div class="flex-1">
          <div class="text-xl">
            <span class="font-bold">{{ orderInfo.carName }}</span>
            <span class="text-black-6">
              &nbsp;&nbsp;{{ orderInfo.carSeatNumber }}座.{{
                orderInfo.carLuggageNumber
              }}行李</span
            >
          </div>
          <div class="mt-5">
            起点：{{ orderInfo.startPlaceIdDictMap?.name }}
          </div>
          <div class="mt-5">行程中可根据您的需求随时停</div>
        </div>
      </div>
      <div
        v-if="isScored"
        class="flex text-primary mt-10 font-semibold shrink-0 items-center space-x-10"
      >
        <span>已打分</span>
        <van-rate
          disabled
          v-model="orderInfo.categoryMark"
          size="large"
          disabled-color="#FD9A00"
        />
      </div>
    </div>

    <div class="p-10 bg-white mt-15 rounded-xl">
      <div class="flex space-x-15">
        <img
          :src="orderInfo.driverImage"
          class="h-110 w-110 shrink-0 rounded-xl object-cover"
        />
        <div class="flex-1 flex flex-col space-y-5">
          <div class="flex items-center space-x-20 text-xl font-semibold">
            {{ orderInfo.driverName }}
          </div>
          <div class="">性别：{{ orderInfo.driverSexDictMap?.name }}</div>
          <div class="">年龄：{{ orderInfo.driverAge }}</div>
          <div class="">驾龄：{{ orderInfo.drivingYears }}年</div>
        </div>
      </div>
      <div
        v-if="isScored"
        class="flex text-primary mt-10 font-semibold shrink-0 items-center space-x-10"
      >
        <span>已打分</span>
        <van-rate
          disabled
          v-model="orderInfo.driveMark"
          size="large"
          disabled-color="#FD9A00"
        />
      </div>
    </div>

    <div class="p-10 bg-white mt-15 rounded-xl">
      <div class="text-xl font-bold">订单信息</div>
      <div class="mt-15 flex flex-col space-y-5">
        <div>
          <span class="label">订单号：</span>
          <span>{{ orderInfo.orderNo }}</span>
        </div>
        <div>
          <span class="label">下单时间：</span>
          <span>{{ $dayjs(orderInfo.createTime).format("YYYY-MM-DD") }}</span>
        </div>
        <div>
          <span class="label">订单金额：</span>
          <span class="text-[#FF1717]"
            >{{ orderInfo.totalPrice }}{{ orderInfo.totalPriceUnit }}</span
          >
        </div>
        <div>
          <span class="label">订单状态：</span>
          <span>{{ orderInfo.stateDictMap?.name }}</span>
        </div>
        <div>
          <span class="label">起点：</span>
          <span>{{ orderInfo.startPlaceIdDictMap?.name }}</span>
        </div>
        <div>
          <span class="label">开始时间：</span>
          <span>{{ $dayjs(orderInfo.startTime).format("YYYY-MM-DD") }}</span>
        </div>
        <div>
          <span class="label">结束时间：</span>
          <span>{{ $dayjs(orderInfo.endTime).format("YYYY-MM-DD") }}</span>
        </div>
        <div>
          <span class="label">包车天数：</span>
          <span>{{ orderInfo.days }}天</span>
        </div>
        <div>
          <span class="label">包车类型：</span>
          <span>{{ orderInfo.categoryTypeDictMap?.name }}</span>
        </div>
      </div>
    </div>
    <div class="p-10 bg-white mt-15 rounded-xl">
      <div class="text-xl font-bold">乘车人信息</div>
      <div class="mt-15 flex flex-col space-y-5">
        <div>
          <span class="label">包车人：</span>
          <span>{{ orderInfo.connectName }}</span>
        </div>
        <div>
          <span class="label">电话：</span>
          <span>{{ orderInfo.connectPhone }}</span>
        </div>
        <div>
          <span class="label">微信：</span>
          <span>{{ orderInfo.connectWechat }}</span>
        </div>
      </div>
    </div>

    <div class="p-10 bg-white mt-15 rounded-xl">
      <div class="text-xl font-bold">备注</div>
      <div class="mt-15">
        {{ orderInfo.remark || "暂无" }}
      </div>
    </div>
  </div>
  <div v-else></div>
</template>

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

const orderInfo = ref();

onMounted(() => {
  getDetail();
});

/**
 * Get the detail of the current car order
 *
 * @returns {Promise<void>} resolves when the detail is fetched
 */
async function getDetail() {
  const { data } = await request("/website/app/tourCarOrder/view", {
    query: {
      id: id.value,
    },
  });
  orderInfo.value = data;
}

const isScored = computed(() => {
  return orderInfo.value.categoryMark && orderInfo.value.driveMark;
});
</script>

<style lang="scss" scoped>
.label {
  @apply font-bold;
}
</style>
