<template>
  <div class="flex flex-col bg-[#f8f8f8] px-15 pt-15 space-y-12">
    <NuxtLink
      v-for="item in orders"
      :key="item.id"
      :to="`/profile/car-order/${item.id}`"
      class="relative cursor-pointer bg-white text-sm text-black-3 rounded-xl overflow-hidden"
    >
      <div class="p-15">
        <div class="flex items-center">
          <span class="font-semibold">订单号:</span>
          <span>{{ item.orderNo }}</span>
          <div
            class="flex h-20 ml-10 items-center justify-center rounded-full border border-current px-5 text-sm text-primary"
          >
            {{ formatStatus(item.state) }}
          </div>
        </div>
        <div class="mt-5 flex items-center space-x-15 text-xl">
          <span class="font-bold text-black-3">{{ item.carName }}</span>
          <span
            >{{ item.carSeatNumber }}座.{{ item.carLuggageNumber }}行李</span
          >
        </div>
        <div class="mt-5 flex items-center space-x-20">
          <span
            >出发时间：{{ $dayjs(item.startTime).format("YYYY-MM-DD") }}</span
          >
          <span>用车天数：{{ item.days }}天</span>
        </div>
        <div class="mt-10 flex items-center text-sm justify-between">
          <div class="flex items-center space-x-10">
            <div
              class="flex h-20 items-center justify-center rounded-full bg-[#DDDDDD] px-10"
            >
              起点
            </div>
            <span>{{ item.startPlaceIdDictMap?.name ?? "" }}</span>
            <span>{{ item.categoryTypeDictMap?.name ?? "" }}</span>
            <span v-if="item.driveMark || item.categoryMark">已打分</span>
          </div>
          <div>
            <span class="text-[#FF1717] font-semibold"
              >{{ item.totalPrice }}{{ item.totalPriceUnit }}</span
            >
          </div>
        </div>
      </div>
      <div
        v-if="!item.driveMark && !item.categoryMark"
        @click.prevent="handleScore(item)"
        class="bg-primary flex items-center pl-15 py-5 space-x-5"
      >
        <div
          class="flex w-60 h-26 text-base font-semibold items-center rounded-full justify-center text-white bg-[#ffb440]"
        >
          去打分
        </div>
        <span class="iconfont icon-arrow_right text-white"></span>
      </div>
    </NuxtLink>
    <van-popup
      v-model:show="scoreDialogOptions.show"
      round
      closeable
      :style="{ height: '260px', width: '80%', padding: '20px' }"
    >
      <div>
        <div class="text-xl font-semibold text-black-3">请您为该订单打分</div>
        <van-form label-width="50" class="mt-20">
          <van-field name="rate" label="车型">
            <template #input>
              <van-rate v-model="scoreDialogOptions.categoryMark" />
            </template>
          </van-field>
          <van-field name="rate" label="司机">
            <template #input>
              <van-rate v-model="scoreDialogOptions.driveMark" />
            </template>
          </van-field>
          <van-button
            type="primary"
            round=""
            color="#FD9A00"
            @click="handleScoreConfirm"
            style="width: 100%; margin-top: 20px"
            >提交</van-button
          >
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
onMounted(() => {
  getList();
});

const orders = ref([]);

async function getList() {
  const { data } = await request("/website/app/tourCarOrder/list", {
    query: {
      pageNum: 1,
      pageSize: 1000,
    },
  });
  orders.value = data.dataList;
}

const orderStatusEnum = [
  {
    value: 1,
    label: "已下单",
  },
  {
    value: 2,
    label: "已取消",
  },
  {
    value: 3,
    label: "已完成",
  },
];

/**
 * Returns the label corresponding to a given order status value.
 *
 * @param {number} status - The status value of the order.
 * @returns {string} The label associated with the given status.
 */
function formatStatus(status) {
  return orderStatusEnum.find((item) => item.value == status).label;
}

const scoreDialogOptions = reactive({
  show: false,
  id: null,
  categoryMark: 0,
  driveMark: 0,
});

/**
 * Handles the event of a score being clicked.
 *
 * @param {Object} item - The order item associated with the score that was clicked.
 */
function handleScore(item) {
  scoreDialogOptions.show = true;
  scoreDialogOptions.id = item.id;
}

/**
 * Handles the confirmation of a score dialog.
 *
 * When the user clicks the confirm button on the score dialog, this function is called.
 * It is responsible for sending the score data to the server and updating the state of the component.
 */
async function handleScoreConfirm() {
  if (!scoreDialogOptions.categoryMark) {
    showToast("请给车型打分~");
    return;
  }
  if (!scoreDialogOptions.driveMark) {
    showToast("请给司机打分~");
    return;
  }
  try {
    await request("/website/app/tourCarOrder/markOrder", {
      method: "post",
      body: {
        id: scoreDialogOptions.id,
        categoryMark: scoreDialogOptions.categoryMark,
        driveMark: scoreDialogOptions.driveMark,
      },
    });
    showToast("打分成功");
    scoreDialogOptions.show = false;
    scoreDialogOptions.id = null;
    scoreDialogOptions.categoryMark = 0;
    scoreDialogOptions.driveMark = 0;
    getList();
  } catch (error) {}
}
</script>

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