<template>
  <div class="bg-white  rounded-[10px] p-[12px]">
    <div class="flex mb-[8px] text-[12px]">
      <span class="w-60 text-ink-400">{{ t("order.info.number") }}</span>
      <span class="text-ink-600">{{ orderData.orderId }}</span>
    </div>
    <div class="flex mb-[8px] text-[12px]">
      <span class="w-60 text-ink-400">{{ t("order.info.createdAt") }}</span>
      <span class="text-ink-600">{{ orderData.createTime }}</span>
    </div>
    <div class="flex text-[12px]">
      <span class="w-60 text-ink-400">{{ t("order.info.payStatus") }}</span>
      <span :class="[
        {
          'color-FF3D60': statusCode === '0' || statusCode === '3',
          'color-21B466': ['1', '2', '4', '5', '6'].includes(statusCode),
        },
      ]">
        {{ statusspan }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      orderId: "",
      paySerialNumber: "",
      payWay: "", // 支付方式 0-微信 1-支付宝 2-云闪付
      payAmt: "",
      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已关闭 6-已完成
      orderType: "0", // 0-酒店订单, 1-门票订单, 2-餐饮
    }),
  },
});
const statusCode = computed(() => props.orderData.orderStatus);

// 使用计算属性缓存支付方式文本
const statusspan = computed(() =>
  statusCode.value === "0" || statusCode.value === "3" ? t("order.info.unpaid") : t("order.info.paid"),
);
</script>

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