<template>
  <view class="order-card bg-white p-[12px] rounded-[12px] m-[12px]" @click.stop="handleCardClick">
    <!-- 卡片头部 -->
    <view class="card-header flex items-center">
      <view class="status-info flex items-center flex-full">
        <image class="status-icon mr-[4px]" :src="getStatusIcon()" />
        <view class="order-title font-size-14 leading-[20px] text-[#525866]">
          {{ getOrderTypeName() }}
        </view>
      </view>
      <view v-if="orderData.status !== 'pending'" :class="[
        'status-tag font-size-12',
        `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
      ]">
        {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
      </view>
    </view>

    <!-- 卡片内容 -->
    <OrderCardContent :order-data="orderData" />

    <view v-if="orderData.orderStatus === '0'" class="text-right">
      <button
        class="go-pay border-none font-size-14 text-white bg-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
        @click.stop="handleCardClick">
        去支付
      </button>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import OrderCardContent from "./OrderCardContent.vue";
import serviceIcon from "./images/service.png";

// Props
const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      id: "",
      workOrderTypeName: "",
      createTime: "",
      contactName: "",
      contactPhone: "",
      orderStatus: "0", // pending-待处理, completed-已完成, cancelled-已取消
      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-其他订单, undefined-工单
      orderNumber: "", // 订单编号
      checkInTime: "", // 入住时间
      visitorName: "", // 游客姓名
      commodityAmount: 0, // 份数
      workOrderStatus: 0, // 工单状态：0-待处理, 1-已完成
    }),
  },
});

// Emits
const emit = defineEmits(["click", "call"]);

// 图标映射
const ICON_MAP = {
  0: "https://oss.nianxx.cn/mp/static/version_101/order/room.png", // 酒店订单
  1: "https://oss.nianxx.cn/mp/static/version_101/order/ticket.png", // 门票订单
  2: "https://oss.nianxx.cn/mp/static/version_101/order/food.png", // 餐饮
  3: "https://oss.nianxx.cn/mp/static/version_101/order/package.png", // 套餐
};

// 订单类型映射
const ORDER_NAME_MAP = {
  0: "房间",
  1: "门票",
  2: "餐饮",
  3: "套餐",
};

// 获取状态图标
const getStatusIcon = () => {
  // 工单情况：orderType 为 undefined
  if (props.orderData.orderType === undefined) {
    return serviceIcon;
  }
  // 订单情况：根据 orderType 返回对应图标
  return ICON_MAP[props.orderData.orderType] || serviceIcon;
};

// 获取订单类型名称
const getOrderTypeName = () => {
  return ORDER_NAME_MAP[props.orderData.orderType] || "其他订单";
};

// 获取状态文本
const getStatusText = (status) => {
  // 工单情况：orderType 为 undefined
  if (props.orderData.orderType === undefined) {
    const workOrderStatusMap = {
      0: "待接单",
      1: "处理中",
      2: "已完成",
      3: "已关闭",
    };
    return workOrderStatusMap[status] || "未知状态";
  }

  // 订单情况：orderType 有值
  const orderStatusMap = {
    0: "待支付",
    1: "待确认",
    2: "待使用",
    3: "已取消",
    4: "退款中",
    5: "已退款",
    6: "已完成",
  };
  return orderStatusMap[status] || "未知状态";
};

// 处理卡片点击
const handleCardClick = () => {
  if (props.orderData.orderType === undefined) return;
  emit("click", props.orderData);
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
