<template>
  <view class="card-content border-box pt-12">
    <view class="flex items-center justify-between">
      <view
        class="left flex-full font-size-14 line-height-20 color-171717 mr-12"
      >
        {{ orderData.commodityName }}
      </view>
      <view class="right font-size-18 font-bold line-height-20 color-525866">
        {{ orderData.orderAmt }}
      </view>
    </view>
    <!-- 动态渲染信息行 -->
    <InfoRow
      v-for="item in displayItems"
      :key="item.label"
      :label="item.label"
      :value="item.value"
    />
  </view>
</template>

<script setup>
import { defineProps, computed } from "vue";
import InfoRow from "./InfoRow.vue";

// 订单类型常量
const ORDER_TYPES = {
  HOTEL: "0", // 酒店订单
  TICKET: "1", // 门票订单
  OTHER: "2", // 其他订单
};

// 标签常量
const LABELS = {
  CHECK_IN_TIME: "入住时间",
  VISITOR_NAME: "游客姓名",
  CONTACT_PHONE: "联系电话",
  QUANTITY: "份数",
  CREATE_TIME: "创建时间",
  CONTACT_GUEST: "联系房客",
};

// Props
const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      orderType: undefined,
      orderId: "",
      checkInTime: "",
      visitorName: "",
      contactPhone: "",
      userName: "",
      userPhone: "",
      commodityAmount: 0,
      createTime: "",
    }),
  },
});

// 格式化份数
const formatQuantity = (amount) => {
  return `${Math.floor(amount || 0)}份`;
};

// 计算显示项目
const displayItems = computed(() => {
  const { orderData } = props;
  const { orderType } = orderData;

  // 工单情况：orderType 为 undefined
  if (orderType === undefined) {
    return [
      { label: LABELS.CREATE_TIME, value: orderData.createTime },
      { label: LABELS.CONTACT_GUEST, value: orderData.userName },
      { label: LABELS.CONTACT_PHONE, value: orderData.userPhone },
    ];
  }

  // 订单情况：根据 orderType 返回不同的显示项
  switch (orderType) {
    case ORDER_TYPES.HOTEL:
      return [
        {
          label: LABELS.CHECK_IN_TIME,
          value:
            orderData.checkInData?.replace(
              /(\d{4})-(\d{1,2})-(\d{1,2})/,
              "$2月$3日"
            ) +
            "-" +
            orderData.checkOutData?.replace(
              /(\d{4})-(\d{1,2})-(\d{1,2})/,
              "$2月$3日"
            ),
        },
        { label: LABELS.VISITOR_NAME, value: orderData.visitorName },
        { label: LABELS.CONTACT_PHONE, value: orderData.contactPhone },
      ];

    case ORDER_TYPES.TICKET:
    case ORDER_TYPES.OTHER:
      return [
        {
          label: LABELS.QUANTITY,
          value: formatQuantity(orderData.commodityAmount),
        },
      ];

    default:
      // 兜底情况，返回空数组
      return [];
  }
});
</script>

<style scoped lang="scss">
.right {
  &::before {
    content: "￥";
    font-weight: 500;
    font-size: 16px;
  }
}
</style>
