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

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

    <!-- 卡片内容 -->
    <view class="card-content">
      <view class="info-row">
        <text class="label">创建时间：</text>
        <text class="value">{{ orderData.createTime }}</text>
      </view>
      <view class="info-row">
        <text class="label">联系房客：</text>
        <text class="value">{{ orderData.visitorName }}</text>
      </view>
      <view class="info-row">
        <text class="label">联系电话：</text>
        <text class="value">{{ orderData.contactPhone }}</text>
      </view>
    </view>

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

<script setup>
import Divider from "@/components/Divider/index.vue";
import { defineProps } from "vue";

// Props
const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      id: "",
      title: "",
      createTime: "",
      contactName: "",
      contactPhone: "",
      orderStatus: "pending", // pending-待处理, completed-已完成, cancelled-已取消
    }),
  },
});

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

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: "待支付",
    1: "待确认",
    2: "待使用",
    3: "已取消",
    4: "退款中",
    5: "已关闭",
    6: "已完成",
  };
  return statusMap[status] || "未知状态";
};

// 处理卡片点击
const handleCardClick = () => {
  emit("click", props.orderData);
};

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

// 处理完成
const handleComplete = () => {
  emit("complete", props.orderData);
};

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

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