<template>
  <div class="card-content  pt-[12px]">
    <div class="flex items-center justify-between">
      <div class="left flex-1 text-[14px] leading-[20px] text-[#171717] mr-[12px]">
        {{ orderData.commodityName }}
      </div>
      <div :class="[
        'right text-[18px] font-bold leading-[20px]',
        orderData.orderStatus === '0' ? 'color-FF3D60' : 'text-ink-600',
      ]">
        {{ orderData.orderAmt }}
      </div>
    </div>
    <!-- 动态渲染信息行 -->
    <InfoRow v-for="item in displayItems" :key="item.label" :label="item.label" :value="item.value" />
  </div>
</template>

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

const { t } = useI18n();

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

// 标签常量
const LABELS = {
  CHECK_IN_TIME: "order.card.checkInTime",
  VISITOR_NAME: "order.card.visitorName",
  CONTACT_PHONE: "order.card.contactPhone",
  QUANTITY: "order.card.quantity",
  CREATE_TIME: "order.card.createTime",
  CONTACT_GUEST: "order.card.contactGuest",
};

// 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)}${t("order.goods.itemUnit")}`;
};

const formatMonthDay = (date) => {
  const matched = String(date || "").match(/(\d{4})-(\d{1,2})-(\d{1,2})/);
  if (!matched) return date || "";
  return t("order.card.monthDay", {
    month: Number(matched[2]),
    day: Number(matched[3]),
  });
};

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

  // 去掉末尾连续、、
  const formattedPhone = orderData.contactPhone.replace(/、+$/, "");

  // 订单情况：根据 orderType 返回不同的显示项
  switch (orderType) {
    case ORDER_TYPES.HOTEL:
      return [
        {
          label: t(LABELS.CHECK_IN_TIME),
          value: `${formatMonthDay(orderData.checkInData)}-${formatMonthDay(orderData.checkOutData)}`,
        },
        { label: t(LABELS.VISITOR_NAME), value: orderData.visitorName },
        { label: t(LABELS.CONTACT_PHONE), value: formattedPhone },
      ];

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

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

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