<template>
  <el-dialog :model-value="visible" class="hospital-edit-dialog" top="6vh" destroy-on-close
    :close-on-click-modal="false" @update:model-value="(v) => !v && close()">
    <div class="body-wrap">
      <div class="body-header">
        <span class="body-title">
          {{ isEdit ? $t("modal.editHospital") : $t("modal.addHospital") }}
        </span>
        <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="close">
      </div>


      <div class="hospital-edit" v-loading="loading">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="130px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="$t('label.hospitalName')" prop="name">
                <el-input v-model="form.name" :placeholder="$t('placeholder.hospital')" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.category')" prop="customerCategory">
                <el-select v-model="form.customerCategory" :placeholder="$t('label.category')" style="width: 200px">
                  <el-option label="A类客户（活跃）" value="A" />
                  <el-option label="B类客户（不活跃）" value="B" />
                  <el-option label="C类客户（待挽回）" value="C" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.contactDept')">
                <el-input v-model="form.contactDept" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.contactPerson')">
                <el-input v-model="form.contactPerson" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="$t('label.contactPosition')">
                <el-input v-model="form.contactPosition" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.contactPhone')">
                <el-input v-model="form.contactPhone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.signDate')" prop="signDate">
                <el-date-picker v-model="form.signDate" type="date" value-format="YYYY-MM-DD"
                  :placeholder="$t('common.pleaseSelect')" style="width: 200px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.acceptDate')" prop="acceptDate">
                <el-date-picker v-model="form.acceptDate" type="date" value-format="YYYY-MM-DD"
                  :placeholder="$t('common.pleaseSelect')" style="width: 200px" />
              </el-form-item>
            </el-col>
          </el-row>


          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="$t('label.years')" prop="contractYears">
                <el-input-number v-model="form.contractYears" :min="1" :precision="0" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.maintenanceEndDate')" prop="maintenanceEnd">
                <el-date-picker v-model="form.maintenanceEnd" type="date" value-format="YYYY-MM-DD"
                  :placeholder="$t('common.pleaseSelect')" style="width: 200px" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('label.manager')">
                <el-select v-model="form.managerId" :placeholder="$t('label.manager')" filterable clearable
                  style="width: 240px">
                  <el-option v-for="item in managerOptions" :key="item.id" :label="`${item.name}`" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>





          <el-form-item :label="$t('label.acceptanceReport')" required>
            <el-upload class="upload-wrap" v-model:file-list="reportFileList" :auto-upload="false" :limit="1"
              :on-exceed="handleReportExceed" accept=".pdf">
              <div class="upload-btn">
                <div class="left">+ 添加文件</div>
                <div class="right">（不超过50M）</div>
              </div>

              <template #file="{ file }">
                <div class="file-item">
                  <img class="file-icon" src="@/assets/image/admin/orders/file.svg" alt="">
                  <div class="file-name">&nbsp;&nbsp;{{ file.name }}</div>
                  <div class="file-size">&nbsp;&nbsp;{{ ((file.size || 0) / 1024 / 1024).toFixed(2) }}MB</div>
                  <div class="file-delete" @click="handleReportDelete(file)">删除</div>
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item :label="$t('common.remark')">
            <el-input v-model="form.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>
    </div>


    <div class="body-footer">
      <el-button @click="close">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" :loading="submitting" @click="submit">
        {{ isEdit ? $t("common.save") : $t("common.add") }}
      </el-button>
    </div>

  </el-dialog>
</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import {
  getAdminHospitalDetail,
  createAdminHospital,
  updateAdminHospital,
  getAdminAccounts,
} from "@/service/modular/admin";

const { t: $t } = useI18n();

const props = defineProps({
  visible: { type: Boolean, default: false },
  // 父组件传入的医院 id，为空时为新增
  hospitalId: { type: [String, Number], default: "" },
});

const emit = defineEmits(["update:visible", "close", "success"]);

const loading = ref(false);
const submitting = ref(false);
const formRef = ref();
const managerLoaded = ref(false);

const isEdit = computed(() => !!props.hospitalId);

// 详情接口返回的原始验收报告路径，为空表示无报告或已被用户替换
const form = reactive({
  name: "",
  customerCategory: "",
  contactDept: "",
  contactPerson: "",
  contactPosition: "",
  contactPhone: "",
  signDate: "",
  acceptDate: "",
  contractYears: 1,
  maintenanceEnd: "",
  managerId: undefined,
  remark: "",
  attachmentPath: "",
});

const rules = {
  name: [
    {
      required: true,
      message: () => $t("placeholder.hospital"),
      trigger: "blur",
    },
  ],
  customerCategory: [
    { required: true, message: () => $t("label.category"), trigger: "change" },
  ],
  signDate: [
    { required: true, message: () => $t("label.signDate"), trigger: "change" },
  ],
  acceptDate: [
    {
      required: true,
      message: () => $t("label.acceptDate"),
      trigger: "change",
    },
  ],
  contractYears: [
    { required: true, message: () => $t("label.years"), trigger: "blur" },
  ],
  maintenanceEnd: [
    {
      required: true,
      message: () => $t("label.maintenanceEndDate"),
      trigger: "change",
    },
  ],
};

const managerOptions = ref([]);

const reportFileList = ref([]);

// 超出 limit 时仅保留最后一个
// 触发即代表用户上传了新文件替换原报告，清空 attachmentPath
const handleReportExceed = (files) => {
  reportFileList.value = files.slice(-1);
  form.attachmentPath = "";
};

// 自定义"删除"按钮：删除后清空原报告路径，与 handleReportExceed 行为保持一致
const handleReportDelete = (file) => {
  reportFileList.value = (reportFileList.value || []).filter(
    (f) => f.uid !== file?.uid,
  );
  form.attachmentPath = "";
};

// 从带路径分隔符的地址中截取最后的文件名（兼容 / 与 \）
const getAttachmentFileName = (path) => {
  if (!path) return "";
  return String(path).replace(/\\/g, "/").split("/").pop() || "";
};

// 重置表单到初始状态，弹窗每次打开时使用
const resetForm = () => {
  Object.assign(form, {
    name: "",
    customerCategory: "",
    contactDept: "",
    contactPerson: "",
    contactPosition: "",
    contactPhone: "",
    signDate: "",
    acceptDate: "",
    contractYears: 1,
    maintenanceEnd: "",
    managerId: undefined,
    remark: "",
    attachmentPath: "",
  });
  reportFileList.value = [];
  formRef.value?.clearValidate();
};

const loadManagers = async () => {
  if (managerLoaded.value) return;
  try {
    const res = await getAdminAccounts({ type: "Admin" });
    managerOptions.value = res?.list || [];
    managerLoaded.value = true;
  } catch (e) {
    // request 层已统一提示错误
  }
};

const loadDetail = async (id) => {
  if (!id) return;
  loading.value = true;
  try {
    const data = await getAdminHospitalDetail(id);
    Object.assign(form, data);
    // 若详情接口返回了验收报告路径，截取文件名以"已上传"状态回显到 file-list，
    // 位置与正常上传后一致；不下载，仅展示以便用户决定是否替换
    const fileName = getAttachmentFileName(data?.attachmentPath);
    if (fileName) {
      reportFileList.value = [
        {
          uid: `attachment-${id}`,
          name: fileName,
          status: "success",
        },
      ];
    }
  } finally {
    loading.value = false;
  }
};

const buildHospitalFormData = () => {
  const fd = new FormData();
  Object.entries(form).forEach(([key, value]) => {
    if (value === undefined || value === null || value === "") return;
    fd.append(key, value);
  });
  // 兼容 el-upload 在新增/编辑两种场景下 file-list 项的结构差异：
  //   新增时：item 为 UploadFile 对象，包含 raw 指向 File
  //   编辑时：item 本身即为 File 对象（el-upload 直接以原始 File 替换了回显项）
  // 回显项无 raw 且 size 未定义，命中后自然不会走到 files 提交
  const item = (reportFileList.value || [])[0];
  if (item) {
    const file = item.raw || (typeof item.size === "number" ? item : null);
    if (file) fd.append("files", file);
  }
  return fd;
};

const submit = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    // 仅在"新增"或"编辑但原报告已被清空/移除"且 file-list 为空时，才提示需上传
    const keepOriginal = isEdit.value && !!form.attachmentPath;
    if (!reportFileList.value?.length && !keepOriginal) {
      ElMessage.warning($t("label.acceptanceReport"));
      return;
    }
    submitting.value = true;
    try {
      const fd = buildHospitalFormData();
      if (isEdit.value) {
        await updateAdminHospital(props.hospitalId, fd);
        ElMessage.success($t("msg.hospitalEditSuccess"));
      } else {
        await createAdminHospital(fd);
        ElMessage.success($t("msg.hospitalAddSuccess"));
      }
      emit("success");
      emit("update:visible", false);
    } finally {
      submitting.value = false;
    }
  });
};

const close = () => emit("update:visible", false);

// 弹窗打开或 id 变化时重新加载数据，与 detail.vue 行为一致
watch(
  () => [props.visible, props.hospitalId],
  ([vis, id]) => {
    if (vis) {
      resetForm();
      loadManagers();
      if (id) loadDetail(id);
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.hospital-edit {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
</style>


<style lang="scss">
.hospital-edit-dialog {
  min-width: 1168px;
  max-width: 90vw;

  .body-header {
    margin-bottom: 18px;
  }

  // ============== 附件上传（与 admin 端统一） ==============
  .upload-wrap {
    width: 100%;

    .el-upload-list__item {
      &:hover {
        background: transparent;
      }

      .file-item {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 14px;

        .file-icon {
          width: 18px;
          height: 18px;
        }

        .file-name,
        .file-delete {
          color: #1D2129;

          &:hover {
            color: #1890ff;
          }
        }

        .file-delete {
          margin-left: 14px;
          cursor: pointer;
        }

        .file-size {
          color: #BCBCBC;
        }
      }
    }
  }

  .upload-btn {
    display: flex;
    align-items: center;

    .left {
      font-weight: 400;
      font-size: 14px;
      color: #2B324C;
    }

    .right {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }
  }

  // 强制上传按钮区域宽度铺满
  :deep(.el-form-item .el-form-item__content > .el-upload) {
    width: 100%;
  }
}
</style>
