<template>
  <div class="mod-config">
    <el-drawer
      :title="
        `${
          type == 'edit' ? '编辑医案' : type == 'add' ? '新增医案' : `医案详情${addCertificateForm.state==1?' ( 待审核 ) ':' ( 已拒绝 ) '}`
        }`
      "
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      custom-class="yianDrawer"
      size="60%"
    >
      <div
        v-if="dialogVisible"
        style="padding: 0 20px;box-sizing: border-box;height: calc(100% - 40px);overflow-y: auto;"
        :style="addCertificateForm.state==2?'height:100%':''"
      >

      <div v-if="addCertificateForm.mark" style="padding:4px 10px;border-radius: 4px;white-space: wrap;"
       :style="`color:${currentNode.data.color?currentNode.data.color:''};
      `">审核备注：{{ addCertificateForm.mark }}</div>
        <el-form
          :rules="dataRule"
          :model="addCertificateForm"
          ref="addCertificateForm"
          label-width="110px"
        >
          <!-- <div style="background-color: #f0f0f0;padding:0 10px;box-sizing: border-box;color: #000;">
                        <p>绑定用户</p>
                    </div> -->
          <div
            v-if="pageType == 'label'"
            style="display:flex;align-items:center;justify-content:space-between"
          >
            <el-form-item
              style="width: 50%;"
              label="手机号/邮箱："
              prop="userKey"
              class="form_item"
            >
              <div style="display: flex;align-items: center;">
                <el-autocomplete
                  size="small"
                  v-if="isEdit"
                  style="width: 100%;"
                  v-model="addCertificateForm.userKey"
                  :fetch-suggestions="loadAll"
                  placeholder="请输入手机号/邮箱"
                  @select="handleSelect"
                >
                  <template #default="{ item }">
                    <div class="custom-item">
                      <span>{{ item.tel ? item.tel : item.email }}</span>
                      <span
                        style="color: gray; margin-left: 10px;"
                        v-if="item.name"
                        >({{ item.name }})</span
                      >
                    </div>
                  </template>
                </el-autocomplete>
                <span v-if="!isEdit">{{ addCertificateForm.userKey }}</span>
              </div>
            </el-form-item>
            <el-form-item
              label="用户姓名："
              style="width: 50%;"
              v-if="addCertificateForm.userId"
              prop="user"
              class="form_item"
            >
              <div>
                <!-- <span
                style="width: 110px;display: inline-block;text-align: right;"
                >用户姓名：</span
              > -->
                {{
                  addCertificateForm.userName
                    ? addCertificateForm.userName
                    : "-"
                }}
              </div></el-form-item
            >
          </div>
          <template
            v-if="pageType == 'user'"
            style="display:flex;align-items:center;justify-content:space-between"
          >
            <el-form-item label="手机号/邮箱：" prop="user" class="form_item">
              <div style="display: flex;align-items: center;">
                {{ addCertificateForm.userKey }}
              </div>
            </el-form-item>
            <el-form-item
              label="用户姓名："
              style="width: 50%;"
              prop="user"
              class="form_item"
            >
              <div>
                {{
                  addCertificateForm.userName
                    ? addCertificateForm.userName
                    : "-"
                }}
              </div></el-form-item
            >
            <el-form-item label="医案分类" prop="user" class="form_item">
              <div>
                <el-cascader
                  size="mini"
                  :disabled="isEdit"
                  style="width: 100%;"
                  :show-all-levels="false"
                  v-model="addCertificateForm.labelId"
                  :props="{
                    value: 'id',
                    label: 'title'
                  }"
                  :options="cateOptions"
                  placeholder="医案分类"
                  @change="handleChange"
                ></el-cascader></div
            ></el-form-item>
          </template>

          <div
            class="flexbox width100"
            style="display: flex;align-items: center;"
          >
            <el-form-item
              label="标题："
              label-width="90px"
              prop="title"
              style="width: 100%;"
            >
              <el-input
                v-if="type != 'detail'"
                clearable
                size="small"
                v-model="addCertificateForm.title"
                placeholder="请输入医案标题"
                style="width: 100%;"
              ></el-input>
              <div v-else>
                {{ addCertificateForm.title }}
              </div>
            </el-form-item>
          </div>
         
          <!-- <el-form-item label="课程名称：" prop="course" class="form_item">
                        <el-button plain type="primary"  @click="selectCourse('addCertificateForm')"
                                    size="mini">选择</el-button>
                                    <span style="margin-left: 20px"></span>
                        <br/>
                            <div v-if="addCertificateForm.courseId" style="font-weight: bold;margin-top: 20px;display: flex;align-items: center;justify-content: space-between;"><p><img v-if="addCertificateForm.courseImg" :src="addCertificateForm.courseImg" alt=""style="width: 30px;height: 40px;margin-right: 20px;">{{ addCertificateForm.courseName }}</p><span @click="clearCourse"  style="color: red;cursor: pointer;"><i class="el-icon-delete" style="margin-right: 4px;"></i> 删除</span></div>        
                    </el-form-item> -->

          <!-- <el-form-item label="医案编号" prop="certificateNo" class="form_item">
            <el-input
              v-model="addCertificateForm.certificateNo"
              placeholder="请输入医案编号"
              style="width: 400px;"
            ></el-input>
          </el-form-item> -->

          <el-form-item
            label="医案详情："
            label-width="90px"
            prop="title"
            class="form_item"
          >
            <div style="padding-top: 15px;">
              <div
                v-for="(html, key) in record"
                :key="key"
                style="padding: 2px; margin-bottom: 4px;box-sizing: border-box;"
              >
                <!-- 显示字段标题 -->

                <div
                  class="h1_box"
                  :class="type == 'detail' ? 'h1_box_detail' : ''"
                  v-html="`${getTitleHtml(html, key)}`"
                  style="margin-top: 0;margin-bottom: 10px; font-weight: bold;display: flex;align-items: center;"
                ></div>

                <!-- 编辑区域 -->
                <quill-editor
                  v-model="editableMap[key]"
                  ref="myQuillEditor"
                  :options="editorOption"
                  class="shangpin_editor"
                  v-if="type != 'detail'"
                >
                </quill-editor>
                <div
                  class="detail_info_medical"
                  v-else
                  v-html="editableMap[key]"
                ></div>
              </div>

              <!-- <h3 style="margin-top: 40px;">✅ 保存后的结果（JSON 格式预览）</h3> -->
            </div>
            <!-- <quill-editor
              v-model="detailContent"
              ref="myQuillEditor2"
              :options="editorOption"
              class="shangpin_editor"
            >
            </quill-editor> -->
          </el-form-item>
          <el-form-item
            label="上传图片："
            prop="title"
            label-width="90px"
            class="form_item custom-upload-box"
            v-if="dialogVisible"
          >
            <template v-for="(file, i) in fileList" v-if="type == 'detail'">
              <img
                style="width: 60px;height: 60px;border-radius: 6px;margin: 0 8px 8px 0;"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
            </template>
<div v-if="fileList.length==0&&type == 'detail'" style="line-height: 60px;">暂无图片</div>
            <el-upload
              v-if="type != 'detail'"
              class="custom-upload"
              action="https://api.nuttyreading.com/oss/fileoss"
              list-type="picture-card"
              accept="image/png, image/jpeg"
              :file-list="fileList"
              :on-success="onSuccessImg"
              :before-upload="beforeUpload"
              :on-progress="onProgress"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <!-- <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span> -->

                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
                <!-- 上传中的加载动画 -->
                <div v-if="file.uploading" class="loading-spinner">
                  <i class="el-icon-loading"></i>
                </div>
              </div>
            </el-upload>
            <!-- <div class="flexBox" style="width:100%;justify-content: space-between;">
                                    <div class="" style="display:flex">

                                        <div
                                            style="display:flex; align-items:center; width:100%;justify-content:center">
                                            <div style="margin-right:15px">封面图</div>
                                            <div>
                                                <el-upload class="avatar-uploader" :action="baseUrl + '/oss/fileoss'"
                                                    :show-file-list="false" :on-success="handlePicSuccess">
                                                    <img v-if="fimages" :src="fimages" class="avatar" />
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </div>
                                            <div>
                                                <div v-if="fimages != ''">
                                                    <el-tag class="delImgBtn" @click="delImg()"
                                                        type="danger">清空图片</el-tag>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>

                                </div>  -->
          </el-form-item>
        </el-form>
      </div>
      <div class="demo-drawer__footer" v-if="type == 'edit' || type == 'add'">
        <el-button
          style="float: right;margin:0 10px;"
          type="primary"
          size="mini"
          @click="handleSubmit('addCertificateForm')"
          :loading="loading"
          >{{ loading ? "提交中 ..." : "确 定" }}</el-button
        >
        <el-button
          size="mini"
          @click="dialogVisible = false"
          style="float: right;"
          >取 消</el-button
        >
      </div>
      
      <div class="demo-drawer__footer" v-if="type == 'detail'&&addCertificateForm.state==1">
        <!-- <el-checkbox v-model="addCertificateForm.train" true-label="1" false-label="0">是否加入Ai训练库</el-checkbox> -->
        <el-button
          style="float: right;margin:0 10px;"
          type="primary"
          size="mini"
          @click="handleReview('approved', 1)"
          :loading="loading"
          >审核通过</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleReview('rejected', 0)"
          style="float: right;"
          >审核拒绝</el-button
        >
      </div>
    </el-drawer>
    <el-dialog
      :title="`审核${reviewType == 'approved' ? '通过' : '拒绝'}备注`"
      :visible.sync="dialogMarkVisible"
      width="400px"
      :beforeClose="beforeClose"
    >
      <el-input
        v-model="addCertificateForm.mark"
        :placeholder="
          `请输入审核${reviewType == 'approved' ? '通过' : '拒绝'}备注`
        "
        :clearable="true"
      ></el-input>

      <el-checkbox
      :true-label="1" :false-label="0"
        v-model="addCertificateForm.train"
        style="margin-top: 20px;"
        v-if="reviewType == 'approved'"
        >是否加入 Ai 训练库</el-checkbox
      >

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMarkVisible = false" size="mini"
          >取消审核</el-button
        >
        <el-button type="primary" @click="handleReviewSave" size="mini"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import global from "../../common/common.vue"; //引入共用组间
import debounce from "lodash/debounce"; //导入lodash中的debounce
import AddOrUpdate from "@/views/components/commonBookTags/bookTagsForm.vue";
import commonShop from "@/views/components/commonBookTags/shopproduct.vue";
import commonShopTable from "@/views/components/commonBookTags/shopproductTable.vue";
import commonTree from "@/views/components/commonBookTags/tags.vue";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块
  [{ header: 1 }, { header: 2 }], // 几级标题
  [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
  [{ script: "sub" }, { script: "super" }], // 下角标，上角标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文字输入方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ color: [] }, { background: [] }], // 颜色选择
  [
    {
      font: [
        "SimSun",
        "SimHei",
        "Microsoft-YaHei",
        "KaiTi",
        "FangSong",
        "Arial"
      ]
    }
  ], // 字体
  [{ align: [] }], // 居中
  ["clean"], // 清除样式,
  ["link", "image"] // 上传图片、上传视频
];
// import dialogComponent from './seckillprodrelation'
export default {
  props: ["data", "pageType", "dataInfo", "labelId",'currentNode'],
  data() {
    return {
      record: {},

      editableMap: {}, // 存储每个字段的内部可编辑内容
      editorOption: {
        modules: {
          toolbar: false
          // history: {
          //   delay: 1000,
          //   maxStack: 50,
          //   userOnly: false
          // },
          // toolbar: {
          //   container: toolbarOptions,
          //   handlers: {
          //     image: function (value) {
          //       if (value) {
          //         // 调用element的图片上传组件
          //         document.querySelector('.avatar-uploader input').click()
          //       } else {
          //         this.quill.format('image', false)
          //       }
          //     }
          //   }
          // },
        },
        placeholder: "请输入.."
      },
      dataRule: {
        userKey: [
          {
            required: true,
            message: "请输入手机号/邮箱"
            // trigger: "change",
          }
        ]
      },
      isUploading: false, // 上传过程中是否显示加载动画
      isEdit: false, // 上传过程中是否显示加载动画
      dialogImageUrl: "",
      dialogVisibleImg: false,
      disabled: false,
      restaurants: [],
      fileList: [],
      options: [],
      cateOptions: [],
      state: "",
      timeout: null,
      addCertificateForm: {},
      baseUrl: global.baseUrl,
      isEdit: false,
      checkAll: false,
      isIndeterminate: true,
      dialogVisible: false,
      dialogMarkVisible: false,
      urlList: {},
      activeName: "first",
      reviewType: "",
      addForm: {},
      audioFileList: [],
      isFresh: false,
      type: "",
      detailContent: ""
    };
  },
  components: {
    AddOrUpdate,
    commonShop,
    commonTree,
    commonShopTable,
    quillEditor
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  activated() {
    const quill = this.$refs.myQuillEditor.quill;

    // 禁用编辑器
    quill.disable(); // 这会禁用编辑器的所有功能，包括输入和修改
    this.isEdit = false;
    // this.getDataList();
  },
  methods: {
    beforeClose() {
      this.dialogMarkVisible = false;
    },
    remoteMethod(query) {
      console.log(query, "query", this.addCertificateForm.key);
      // return false
      if (this.addCertificateForm.key !== "") {
        let data = {
          title: query //关键字
        };
        this.totalLaoding = true;
        this.$http({
          url: this.$http.adornUrl("/master/userManage/courseAndChildrenList"),
          method: "post",
          data: this.$http.adornData(data)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.options = data.list;
          } else {
            this.options = [];
          }
          this.totalLaoding = false;
          if (data.code !== 0) return this.$message.error(data.msg);
        });
      } else {
        this.options = [];
        this.totalLaoding = false;
      }
    },
    getCateList() {
      this.$http({
        url: this.$http.adornUrl(
          "/master/userCertificate/userCertificateLabelList"
        ),
        method: "post",
        data: this.$http.adornData({})
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.cateOptions = data.labelList;
        } else {
          this.cateOptions = [];
        }
        this.totalLaoding = false;
        if (data.code !== 0) return this.$message.error(data.msg);
      });
    },
    loadAll(queryString, cb) {
      this.addCertificateForm.userId = "";
      this.addCertificateForm.userName = "";
      if (queryString == "") {
        return false;
      }
      this.$http({
        // url: this.$http.adornUrl('/book/user/list'),
        url: this.$http.adornUrl("/book/user/getUserList"),
        method: "post",
        data: this.$http.adornData({
          page: 1,
          limit: 9999,
          key: queryString
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          var arr = data.user.records;
          console.log("arr at line 467:", arr);
          cb(arr);
        } else {
          cb([]);
        }
      });
    },

    createStateFilter(queryString) {
      return state => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
      this.addCertificateForm.userKey = item.tel ? item.tel : item.email;
      this.addCertificateForm.userName = item.name;
      this.addCertificateForm.userId = item.id;
    },
    getInnerHtml(html) {
      const div = document.createElement("div");
      div.innerHTML = html;
      const children = Array.from(div.children).slice(1); // 跳过 h1
      return children.map(e => e.outerHTML).join("");
    },
    getTitleHtml(html, key) {
      const div = document.createElement("div");
      div.innerHTML = html;
      var str = [
        "chiefComplaint",
        "historyOfPresentIllness",
        "physicaExamination",
        "treatmentPlan"
      ].includes(key)
        ? `<span style="color:#F56C6C;margin-right:4px">*</span>`
        : "";
      return div.querySelector("h1")
        ? str + (div.querySelector("h1").outerHTML || "<h1></h1>")
        : "";
    },
    saveAll() {
      for (const key in this.record) {
        const titleHtml = this.getTitleHtml(this.record[key]);
        this.record[key] = titleHtml + this.editableMap[key];
      }
      alert("保存成功！");
    },
    init(type, data) {
      this.getCateList();
      this.type = type;
      console.log("data at line 372:", data);
      this.addCertificateForm = {};
      this.fileList = [];
      this.isEdit = type == "edit" ||type == "add" ? true : false;
      if (type == "add") {
        this.record = {
          information: "<h1>1. 一般信息</h1>",
          chiefComplaint: "<h1>2. 主诉</h1>",
          historyOfPresentIllness: "<h1>3. 现病史</h1>",
          pastHistory: "<h1>4. 既往史</h1>",
          personalAndFamilyHistory: "<h1>5. 家族史</h1>",
          physicaExamination: "<h1>6. 体格检查</h1>",
          diagnosis: "<h1>7. 诊断</h1>",
          treatmentPlan: "<h1>8. 治疗和后续治疗</h1>"
        };
      }
      if (data) {
        if (type == "edit" || type == "detail") {
          this.record = {
            information: data.information,
            chiefComplaint: data.chiefComplaint,
            historyOfPresentIllness: data.historyOfPresentIllness,
            pastHistory: data.pastHistory,
            personalAndFamilyHistory: data.personalAndFamilyHistory,
            physicaExamination: data.physicaExamination,
            diagnosis: data.diagnosis,
            treatmentPlan: data.treatmentPlan
          };
        }

        this.addCertificateForm = {
          ...data
        };

        if (this.addCertificateForm.img) {
          this.fileList = this.addCertificateForm.img
            .split(",")
            .map((image, i) => ({
              uid: i, // 假设 id 是唯一标识符
              name: i, // 文件名
              status: "done", // 状态
              url: image // 文件 URL
            }));
          console.log("this.fileList at line 308:", this.fileList);
          this.addCertificateForm.imageList = this.addCertificateForm.img.split(
            ","
          );
        }
      } else {
        this.addCertificateForm = {};
      }
      if (this.pageType == "label") {
        if (data.userId) {
          this.addCertificateForm.userKey = data.user.tel
            ? data.user.tel
            : data.user.email;
          this.addCertificateForm.userName = data.user.name;
          this.addCertificateForm.userId = data.user.id;
        }
      } else {
        this.addCertificateForm.userKey = this.dataInfo.tel
          ? this.dataInfo.tel
          : this.dataInfo.email;
        this.addCertificateForm.userName = this.dataInfo.name;
        this.addCertificateForm.userId = this.dataInfo.id;
      }
      console.log(
        "this.addCertificateForm at line 465:",
        this.addCertificateForm
      );
      for (const key in this.record) {
        this.$set(this.editableMap, key, this.getInnerHtml(this.record[key]));
      }
      this.dialogVisible = true;
    },
    handleReviewSave() {
      var recordData = { ...this.record };
      // for (const key in recordData) {
      //   const titleHtml = this.getTitleHtml(recordData[key]);
      //   recordData[key] = titleHtml + this.editableMap[key];
      // }
      var data = {
        // labelId: this.labelId,
        // img:
        //   this.fileList.length > 0
        //     ? this.addCertificateForm.imageList.toString()
        //     : "",
        // title: this.addCertificateForm.title,
        // userId: this.addCertificateForm.userId,
        train: this.addCertificateForm.train, //是否加入ai训练库0否1是
        mark: this.addCertificateForm.mark, //备注
        state: this.reviewType=='approved'?3:2, //备注
        // ...recordData
      };

      //  if(this.record.)
      this.$http({
        url: this.$http.adornUrl("/master/medicalRecords/editMedicalRecords"),
        method: "post",
        data: this.$http.adornData({
          ...data,
          id: this.addCertificateForm.id
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.dialogVisible = false;
          this.dialogMarkVisible = false;
          this.$nextTick(() => {
            this.$emit("refresh");
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    handleReview(type, typeValue) {
      // approved 通过

      // rejected 拒绝

      this.reviewType = type;
      this.dialogMarkVisible = true;
    },
    handleSubmit: debounce(async function() {
      // this.addCertificateForm
      console.log("this.addCertificateForm at line 479:", this.editableMap);
      this.$refs["addCertificateForm"].validate(valid => {
        if (valid) {
          if (!this.addCertificateForm.userId && this.pageType == "label") {
            this.$message.error("请选择用户");
            return false;
          }
          if (this.editableMap.chiefComplaint == "") {
            const titleHtml = this.getTitleHtml(
              this.record["chiefComplaint"]
            ).replace(/<[^>]*>/g, "");
            this.$message.error("请输入 " + titleHtml);
            return false;
          }
          if (this.editableMap.historyOfPresentIllness == "") {
            const titleHtml = this.getTitleHtml(
              this.record["historyOfPresentIllness"]
            ).replace(/<[^>]*>/g, "");
            this.$message.error("请输入 " + titleHtml);
            return false;
          }
          if (this.editableMap.physicaExamination == "") {
            const titleHtml = this.getTitleHtml(
              this.record["physicaExamination"]
            ).replace(/<[^>]*>/g, "");
            this.$message.error("请输入 " + titleHtml);
            return false;
          }
          if (this.editableMap.treatmentPlan == "") {
            const titleHtml = this.getTitleHtml(
              this.record["treatmentPlan"]
            ).replace(/<[^>]*>/g, "");
            this.$message.error("请输入 " + titleHtml);
            return false;
          }
          var recordData = { ...this.record };
          for (const key in recordData) {
            const titleHtml = this.getTitleHtml(recordData[key]);
            recordData[key] = titleHtml + this.editableMap[key];
          }
          var data = {
           
            img:
              this.fileList.length > 0
                ? this.addCertificateForm.imageList.toString()
                : "",
            title: this.addCertificateForm.title,
            userId: this.addCertificateForm.userId,
            ...recordData
          };

          //  if(this.record.)
          this.$http({
            url: this.$http.adornUrl(
              this.type=='edit'
                ? "/master/medicalRecords/editMedicalRecords"
                : "/master/medicalRecords/addMedicalRecords"
            ),
            method: "post",
            data: this.$http.adornData(
              this.type=='edit'
                ? {
                    ...data,

                    id: this.addCertificateForm.id
                  }
                : {
                    ...data,
                    labelId: this.labelId,
                  }
            )
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.dialogVisible = false;
              this.$nextTick(() => {
                this.$emit("refresh");
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }, 200),

    onSuccessImg(response, file, fileList) {
      // 上传成功后，直接将返回的 URL 放到 file 对象中
      file.uploading = false;
      file.url = response.url; // 假设返回的数据包含文件的 url 地址
      this.fileList = fileList; // 更新 fileList
      this.addCertificateForm.imageList = fileList.map(e => e.url);
      console.log(
        "this.addCertificateForm.imageList at line 713:",
        this.addCertificateForm.imageList
      );
    },

    beforeUpload(file) {
      // 在文件上传之前，设置文件的上传状态
      file.uploading = true;
    },
    onProgress(event, file, fileList) {
      // 进度更新时，文件状态可以继续保持上传中
      file.uploading = true;
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(f => f.uid !== file.uid); // 删除文件
      this.addCertificateForm.imageList = this.fileList.map(e => e.url);
      console.log(
        "this.addCertificateForm.imageList at line 727:",
        this.addCertificateForm.imageList
      );
    },
    handleDownload(file) {
      const link = document.createElement("a");
      link.href = file.url;
      link.download = file.name;
      link.click();
    },
    selectChange(val) {
      console.log("options", this.options);
      //   this.getCate(val)
    },
    handlePictureCardPreview(file) {
      // 图片预览逻辑
    }
  }
};
</script>
<style lang="less" scoped>
.yianDrawer {
  .width100 {
    width: 100% !important;
  }
  .el-drawer__header {
    margin-bottom: 0 !important;
  }
  .el-form-item {
    margin-bottom: 8px;
  }
  /deep/.el-upload-list--picture-card .el-upload-list__item {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
  }
  /deep/.el-upload--picture-card {
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
  }
}
/deep/.yianDrawer header {
  margin-bottom: 10px !important;
}
/deep/.custom-upload {
  min-height: 60px !important;
}
/deep/.custom-upload .el-upload--picture-card {
  width: 60px !important;
  height: 60px !important;
  line-height: 70px !important;
}
/deep/.custom-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 60px !important;
  height: 60px !important;
  line-height: 60px !important;
}
/deep/.custom-upload-box .el-form-item__label {
  line-height: 60px !important;
}
/deep/.h1_box {
  height: 24px;
  h1 {
    margin: 0 !important;
    font-size: 16px;
    line-height: 24px;
  }
}

/deep/ .detail_info_medical {
  li {
    line-height: 24px !important;
  }
  ul {
    margin: 0 !important;
    list-style-type: disc !important; /* 强制使用实心圆点 */
  }
  p {
    margin: 0 !important;
  }
}
</style>
