<template>
  <view class="order-card bg-white p-[12px] rounded-12 m-12">
    <!-- 卡片头部 -->
    <view class="border-box flex flex-items-center pb-[12px]">
      <image class="icon mr-4" src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
      <text class="font-size-14 text-[#525866] leading-[20px]">工单</text>
      <text class="font-size-12 text-[#525866] leading-[20px] ml-auto">{{
        isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
      }}</text>
    </view>
    <!-- 卡片内容 -->
    <view class="border-box card-content flex flex-items-center pb-[12px]">
      <view class="border-box left flex-full pr-[20px]">
        <view class="font-size-12 text-[#525866] leading-[20px] mb-4">所在位置：{{ orderData.roomNo }}</view>
        <view class="font-size-12 text-[#525866] leading-[20px] mb-4">联系方式: {{ orderData.userPhone }}</view>
        <view class="font-size-12 text-[#525866] leading-[20px] ellipsis-2">需求描述: {{ orderData.content }}</view>
      </view>

      <image v-if="orderData.contentImgUrl" class="right rounded-6" :src="orderData.contentImgUrl" mode="aspectFill" />
    </view>

    <!-- 服务人员 -->
    <view v-if="orderData.processMemberName && orderData.processMemberPhone"
      class="service-user p-[8px] flex flex-items-center flex-justify-between mb-12">
      <view class="font-size-12 leading-[16px]">服务人员：{{ orderData.processMemberName }}</view>
      <uni-icons class="ml-auto mr-4" type="phone-filled" size="14" color="#436799" />
      <text class="font-size-12 leading-[16px]" @click="callService">拨打电话</text>
    </view>

    <!-- 取消操作 -->
    <view v-if="
      !isCancelWork &&
      orderData.workOrderStatus !== '2' &&
      orderData.workOrderStatus !== '3'
    " class="flex flex-items-center flex-justify-between">
      <text class="cancel border rounded-6 font-size-12 leading-[16px] text-[#525866] ml-auto"
        @click="cancelCall">取消呼叫</text>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
import { closeWorkOrder } from "@/request/api/WorkOrderApi";
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>

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