<template>
  <el-dialog :model-value="modelValue" class="maintenance-detail-dialog" top="6vh" :close-on-click-modal="false"
    destroy-on-close @update:model-value="(v) => $emit('update:modelValue', v)" @open="onOpen">
    <div class="body-wrap" v-loading="loading">
      <div class="body-header">
        <span class="body-title">维保服务详情 - {{ detail.hospitalName || "—" }}</span>
        <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="closeDialog" />
      </div>

      <el-form v-if="detail.hospitalId" ref="formRef" :model="form" :rules="rules" label-width="100px"
        label-position="right">
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户分类">
              <el-tag :type="categoryTagType(detail.customerCategory)" size="small">
                {{ detail.customerCategory || "—" }}类
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维保截止日期">
              <span class="readonly-val">{{ formatDate(detail.maintenanceEnd) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户经理">
              <span class="readonly-val">{{ detail.managerName || "—" }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider class="thin-divider" />

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="续保完成" prop="renewal">
              <el-select v-model="form.renewal" placeholder="请选择" clearable style="width: 100%">
                <el-option label="未完成" value="no" />
                <el-option label="已完成" value="yes" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同签署" prop="contractSigned">
              <el-select v-model="form.contractSigned" placeholder="请选择" clearable style="width: 100%">
                <el-option label="未签署" value="no" />
                <el-option label="已签署" value="yes" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="款项支付" prop="paymentPaid">
              <el-select v-model="form.paymentPaid" placeholder="请选择" clearable style="width: 100%">
                <el-option label="未支付" value="no" />
                <el-option label="已支付" value="yes" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="回访状态" prop="visited">
              <el-select v-model="form.visited" placeholder="请选择" clearable style="width: 100%">
                <el-option label="未回访" value="no" />
                <el-option label="已回访" value="yes" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="回访结果" prop="visitResult">
          <el-input v-model="form.visitResult" placeholder="请输入回访结果" maxlength="500" />
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="1000"
            show-word-limit />
        </el-form-item>
      </el-form>
    </div>

    <div class="body-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { getAdminMaintenanceDetail, updateAdminMaintenance } from "@/service/modular/admin";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  hospitalId: { type: [String, Number], default: "" },
});

const emit = defineEmits(["update:modelValue", "saved"]);

const loading = ref(false);
const submitting = ref(false);
const formRef = ref();
const detail = ref({});

const form = reactive({
  renewal: "",
  contractSigned: "",
  paymentPaid: "",
  visited: "",
  visitResult: "",
  remark: "",
});

const rules = {};

const formatDate = (v) => (v ? dayjs(v).format("YYYY-MM-DD") : "—");

const categoryTagType = (c) => ({ A: "", B: "success", C: "warning" })[c] || "info";

const loadDetail = async (id) => {
  if (!id) {
    detail.value = {};
    return;
  }
  loading.value = true;
  try {
    const data = await getAdminMaintenanceDetail(id);
    detail.value = data || {};
    Object.assign(form, {
      renewal: data?.renewal || "",
      contractSigned: data?.contractSigned || "",
      paymentPaid: data?.paymentPaid || "",
      visited: data?.visited || "",
      visitResult: data?.visitResult || "",
      remark: data?.remark || "",
    });
  } finally {
    loading.value = false;
  }
};

const onOpen = () => {
  loadDetail(props.hospitalId);
};

watch(
  () => [props.modelValue, props.hospitalId],
  ([vis, id]) => {
    if (vis) loadDetail(id);
  },
);

const closeDialog = () => emit("update:modelValue", false);

const onSubmit = async () => {
  submitting.value = true;
  try {
    const payload = {};
    ["renewal", "contractSigned", "paymentPaid", "visited", "visitResult", "remark"].forEach((k) => {
      const v = form[k];
      if (v !== "" && v !== null && v !== undefined) payload[k] = v;
    });
    await updateAdminMaintenance(props.hospitalId, payload);
    ElMessage.success("保存成功");
    emit("saved");
    closeDialog();
  } finally {
    submitting.value = false;
  }
};
</script>

<style lang="scss">
.maintenance-detail-dialog {
  width: 700px;

  .readonly-val {
    font-size: 14px;
    color: #303133;
  }

  .thin-divider {
    margin: 8px 0 16px;
  }
}
</style>
