<template>
  <div class="bg-white p-[12px] rounded-[12px] m-[12px]">
    <!-- 卡片头部 -->
    <div class="flex items-center pb-[12px]">
      <img class="w-[20px] h-[20px] mr-[4px]"
        src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
      <span class="text-[14px] text-ink-600 leading-[20px]">工单</span>
      <span class="text-[12px] text-ink-600 ml-auto">
        {{ isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus) }}
      </span>
    </div>
    <!-- 卡片内容 -->
    <div class="flex items-center pb-[12px]">
      <div class="flex-1 pr-[20px]">
        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
          所在位置：{{ orderData.roomNo }}
        </div>
        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
          联系方式: {{ orderData.userPhone }}
        </div>
        <div class="text-[12px] text-ink-600 line-clamp-2">
          需求描述: {{ orderData.content }}
        </div>
      </div>

      <img v-if="orderData.contentImgUrl" class="w-[88px] h-[88px] rounded-[6px]" :src="orderData.contentImgUrl" />
    </div>

    <!-- 服务人员 -->
    <div v-if="orderData.processMemberName && orderData.processMemberPhone"
      class="bg-[rgba(67, 103, 153, 0.1)] rounded-[5px] text-[#436799] p-[8px] flex items-center justify-between mb-[12px]">
      <div class="text-[12px] leading-[16px]">
        服务人员：{{ orderData.processMemberName }}
      </div>
      <van-icon class="ml-auto mr-[4px]" name="phone-o" size="14" color="#436799" />
      <span class="text-[12px] leading-[16px]" @click="callService">拨打电话</span>
    </div>

    <!-- 取消操作 -->
    <div v-if="
      !isCancelWork &&
      orderData.workOrderStatus !== '2' &&
      orderData.workOrderStatus !== '3'
    " class="flex items-center justify-between">
      <span class="p-[4px_10px] border border-ink-200 rounded-control text-[12px] leading-[16px] text-ink-600 ml-auto"
        @click="cancelCall">取消呼叫</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { closeWorkOrder } from "@/api/workOrder";
import { ref } from "vue";
const isCancelWork = ref(false);

// Props
const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

/// 工单状态 0-待接单 1-处理中 2-已完成 3-已关闭
const workOrderStatus = (status) => {
  if (status === "0") {
    return "待处理";
  } else if (status === "1") {
    return "处理中";
  } else if (status === "2") {
    return "已完成";
  } else if (status === "3") {
    return "已取消";
  } else {
    return "";
  }
};

// 拨打电话
const callService = () => {
  uni.makePhoneCall({
    phoneNumber: props.orderData.processMemberPhone,
  });
};

// 取消呼叫
const cancelCall = async () => {
  const res = await closeWorkOrder({
    workOrderId: props.orderData.id,
  });
  if (res.data) {
    isCancelWork.value = true;
  }
  uni.showToast({
    title: res.data ? "取消呼叫成功" : res.message || "取消呼叫失败",
    icon: "success",
    duration: 2000,
  });
};
</script>
