<template>
  <div
    class="transition-all duration-300 ease-out bg-white p-[12px] rounded-[12px] m-[12px] active:scale-98 active:shadow-md"
    @click.stop="handleCardClick">
    <!-- 卡片头部 -->
    <div class="card-header flex items-center">
      <div class="flex items-center flex-1">
        <img class="w-[20px] h-[20px] mr-[4px]" :src="getStatusIcon()" />
        <div class="order-title text-[14px] leading-[20px] text-ink-600">
          {{ getOrderTypeName() }}
        </div>
      </div>
      <div v-if="orderData.status !== 'pending'" :class="[
        'text-[12px]',
        `tag-${orderData.orderStatus || orderData.workOrderStatus}`,
      ]">
        {{ getStatusText(orderData.orderStatus || orderData.workOrderStatus) }}
      </div>
    </div>

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

    <div v-if="orderData.orderStatus === '0'" class="text-right">
      <button
        class="go-pay border-none text-[14px] text-[#ff3d60] rounded-[5px] inline-block text-center leading-[30px]"
        @click.stop="handleCardClick">
        {{ t("order.card.pay") }}
      </button>
    </div>
  </div>
</template>

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

const { t } = useI18n();

// 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: "goods.types.hotel",
  1: "goods.types.ticket",
  2: "goods.types.food",
  3: "goods.types.package",
};

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

// 获取订单类型名称
const getOrderTypeName = () => {
  const key = ORDER_NAME_MAP[props.orderData.orderType];
  return key ? t(key) : t("order.card.other");
};

// 获取状态文本
const getStatusText = (status) => {
  // 工单情况：orderType 为 undefined
  if (props.orderData.orderType === undefined) {
    const workOrderStatusMap = {
      0: "order.card.workStatusPending",
      1: "order.card.workStatusProcessing",
      2: "order.card.workStatusCompleted",
      3: "order.card.workStatusClosed",
    };
    return t(workOrderStatusMap[status] || "order.card.statusUnknown");
  }

  // 订单情况：orderType 有值
  const orderStatusMap = {
    0: "order.card.orderStatusPendingPay",
    1: "order.card.orderStatusPendingConfirm",
    2: "order.card.orderStatusPendingUse",
    3: "order.card.orderStatusCanceled",
    4: "order.card.orderStatusRefunding",
    5: "order.card.orderStatusRefunded",
    6: "order.card.orderStatusCompleted",
  };
  return t(orderStatusMap[status] || "order.card.statusUnknown");
};

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

<style scoped>
.tag-0 {
  color: #ff3d60;
}

.tag-1 {
  color: #f00044;
}

.tag-2 {
  color: #40ae36;
}

.tag-3 {
  color: #808389;
}

.tag-4 {
  color: #0ccd58;
}

.tag-5 {
  color: #808389;
}

.tag-6 {
  color: #fd8702;
}
</style>
