<template>
  <view class="order-card" @click="handleCardClick">
    <!-- 卡片头部 -->
    <view class="card-header">
      <view class="status-info">
        <image class="status-icon" :src="getStatusIcon()"></image>
        <view class="order-title">
          {{ orderData.workOrderTypeName || orderData.commodityName }}
        </view>
        <image class="arrow-icon" src="./images/arrow.png"></image>
      </view>
      <view
        v-if="orderData.status !== 'pending'"
        :class="[
          'status-tag',
          `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
        ]"
      >
        {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
      </view>
    </view>

    <!-- 分割线 -->
    <Divider />

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

    <!-- 操作区域 -->
    <view v-if="shouldShowActionArea()" class="action-area">
      <button class="action-btn" @click.stop="handleCall">立即呼叫</button>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineExpose } from "vue";
import Divider from "@/components/Divider/index.vue";
import OrderCardContent from "./OrderCardContent.vue";
import serviceIcon from "./images/service.png";
import ticketIcon from "./images/ticket.png";
import hotelIcon from "./images/hotel.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", "complete"]);

// 图标映射
const ICON_MAP = {
  0: hotelIcon, // 酒店订单
  1: ticketIcon, // 门票订单
  2: hotelIcon, // 其他订单
};

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

// 判断是否显示操作区域
const shouldShowActionArea = () => {
  // 工单情况：orderType 为 undefined，且 workOrderStatus = 0 时显示
  if (props.orderData.orderType === undefined) {
    return props.orderData.workOrderStatus === "0";
  }
};

// 获取状态文本
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 = () => {
  emit("click", props.orderData);
};

// 处理呼叫
const handleCall = () => {
  emit("call", props.orderData);
};

// 暴露方法
defineExpose({
  getStatusText,
});
</script>

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