<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]">{{ t("service.card.workOrder") }}</span>
      <span class="text-[12px] text-ink-600 ml-auto">
        {{ isCancelWork ? t("service.card.canceled") : 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]">
          {{ t("service.card.location") }}{{ orderData.roomNo }}
        </div>
        <div class="text-[12px] text-ink-600 leading-[20px] mb-[4px]">
          {{ t("service.card.phone") }} {{ orderData.userPhone }}
        </div>
        <div class="text-[12px] text-ink-600 line-clamp-2">
          {{ t("service.card.demand") }} {{ 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]">
        {{ t("service.card.staff") }}{{ 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">{{ t("service.card.callPhone") }}</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">{{ t("service.card.cancelCall") }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { closeWorkOrder } from "@/api/workOrder";
import { ref } from "vue";

const { t } = useI18n();
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 t("service.status.pending");
  } else if (status === "1") {
    return t("service.status.processing");
  } else if (status === "2") {
    return t("service.status.completed");
  } else if (status === "3") {
    return t("service.status.canceled");
  } 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;
  }
  showToast(res.data ? t("service.card.cancelSuccess") : res.message || t("service.card.cancelFailed"));
};
</script>
