<template>
  <div class="p-2" v-loading="pageLoading">
    <el-card shadow="hover">
      <el-backtop :right="100" :bottom="100" />

      <el-form ref="expertFormRef" :model="form" :rules="formRules" scroll-to-error>
        <el-descriptions title="专家个人资料" border v-loading="isUploading">
          <el-descriptions-item label-class-name="my-label" :rowspan="4" :width="140" label="头像" align="center">
            <template #label>
              <p style="margin-bottom: 20px">头像</p>
              <span style="font-size: 11px; color: #a6abba; line-height: 5px"
                >（请选择图片上传：大小128 * 180像素，支持jpg、png等格式，图片需小于10M，仅一张）</span
              >
            </template>
            <el-upload
              :disabled="!switchExist"
              :limit="1"
              ref="uploadAvatarRef"
              class="avatar-uploader"
              :action="upload.url"
              :auto-upload="shouldAutoUpload"
              :headers="upload.headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-exceed="handleExceedAvatarSuccess"
              :on-error="(err, file) => handleError(err, file, '头像')"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="姓名" align="left">
            <template #label>
              <span><b style="color: red">*</b> 姓名</span>
            </template>
            <el-form-item prop="expertName">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.expertName"
                placeholder="此处输入专家姓名"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="性别" align="left">
            <template #label>
              <span><b style="color: red">*</b> 性别</span>
            </template>
            <el-form-item prop="sex">
              <div class="commonInput">
                <el-select :disabled="!switchExist" v-model="form.sex" placeholder="此处选择性别" clearable>
                  <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
                </el-select>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="身份证号" align="left">
            <template #label>
              <span><b style="color: red">*</b> 身份证号</span>
            </template>
            <el-form-item prop="idCard">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.idCard"
                placeholder="此处输入身份证号"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="出生日期" align="left">
            <template #label>
              <span><b style="color: red">*</b> 出生日期</span>
            </template>
            <el-form-item prop="birthDate">
              <el-date-picker
                :clearable="false"
                :disabled="!switchExist"
                v-model="form.birthDate"
                type="date"
                placeholder="请选择出生日期"
                size="default"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="联系方式" align="left">
            <template #label>
              <span><b style="color: red">*</b> 联系方式</span>
            </template>
            <el-form-item prop="contact">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.contact"
                placeholder="此处输入联系方式"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="工作单位及部门" align="left">
            <template #label>
              <span><b style="color: red">*</b> 工作单位及部门</span>
            </template>
            <el-form-item prop="workUnit">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.workUnit"
                placeholder="此处输入工作单位及部门"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="籍贯" align="left">
            <template #label>
              <span><b style="color: red">*</b> 籍贯</span>
            </template>
            <el-form-item prop="origin">
              <el-input :disabled="!switchExist" v-model="form.origin" placeholder="此处输入籍贯" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="是否单位推荐" align="left">
            <template #label>
              <span><b style="color: red">*</b> 是否单位推荐</span>
            </template>
            <el-form-item prop="isRecommend">
              <el-radio-group :disabled="!switchExist" v-model="form.isRecommend">
                <el-radio v-for="dict in is_recommend" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="职务" align="left">
            <template #label>
              <span><b style="color: red">*</b> 职务</span>
            </template>
            <el-form-item prop="duty">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.duty"
                placeholder="此处输入职务"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="政治面貌" align="left">
            <template #label>
              <span><b style="color: red">*</b> 政治面貌</span>
            </template>
            <el-form-item prop="politics">
              <div class="commonInput">
                <el-select :disabled="!switchExist" v-model="form.politics" placeholder="此处选择政治面貌" clearable>
                  <el-option v-for="dict in politics" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label-class-name="my-label" label="毕业院校" align="left">
            <template #label>
              <span><b style="color: red">*</b> 毕业院校</span>
            </template>
            <el-form-item prop="graduateSchool">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.graduateSchool"
                placeholder="此处输入毕业院校"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="2" label="职称等级" :width="160" align="center">
            <template #label>
              <span><b style="color: red">*</b> 职称等级</span>
            </template>
            <el-form-item prop="positionTitleLevel">
              <div class="commonInput">
                <el-select :disabled="!switchExist" v-model="form.positionTitleLevel" placeholder="请选择职称等级">
                  <el-option v-for="item in positionList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="专家来源" align="left">
            <template #label>
              <span><b style="color: red">*</b> 专家来源</span>
            </template>
            <el-form-item prop="expertSources">
              <div class="commonInput">
                <el-select :disabled="!switchExist" v-model="form.expertSources" placeholder="请选择专家来源">
                  <el-option v-for="item in expert_sources" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="1" label="邮箱" align="center">
            <el-form-item prop="email">
              <el-input
                :formatter="(value) => value.replace(' ', '')"
                :parser="(value) => value.replace(' ', '')"
                :disabled="!switchExist"
                v-model="form.email"
                placeholder="此处输入邮箱"
              />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="现从事专业及年限" align="left">
            <template #label>
              <span><b style="color: red">*</b> 现从事专业及年限</span>
            </template>
            <div class="current-major">
              <el-form-item prop="workProfessial">
                <el-input
                  :formatter="(value) => value.replace(' ', '')"
                  :parser="(value) => value.replace(' ', '')"
                  :disabled="!switchExist"
                  v-model="form.workProfessial"
                  placeholder="此处输入现从事专业"
                />
              </el-form-item>

              <el-form-item prop="workProfessialYear">
                <div class="commonInput">
                  <el-select :disabled="!switchExist" v-model="form.workProfessialYear" placeholder="此处选择工作年限" clearable>
                    <el-option v-for="dict in work_professial_year" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
                  </el-select>
                </div>
              </el-form-item>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="工作单位地址" align="left">
            <template #label>
              <span><b style="color: red">*</b> 工作单位地址</span>
            </template>
            <el-form-item prop="placeList">
              <div class="desidentialAaddress" style="width: 100%; display: flex; justify-content: flex-start; align-items: center">
                <el-cascader
                  :disabled="!switchExist"
                  v-model="form.placeList"
                  placeholder="请选择工作单位地址"
                  :options="placeOptions"
                  :props="{ label: 'name', value: 'code', children: 'codeName', expandTrigger: 'hover' as const }"
                />
                <el-input
                  :formatter="(value) => value.replace(' ', '')"
                  :parser="(value) => value.replace(' ', '')"
                  style="margin-left: 20px; width: 300px"
                  :disabled="!switchExist"
                  v-model="form.address"
                  placeholder="此处输入详细地址"
                />
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="专业" align="left">
            <template #label>
              <span><b style="color: red">*</b> 专业</span>
            </template>
            <el-form-item prop="majorList">
              <div :class="'major-item'" v-for="(item, index) of form.majorList" :key="index">
                <el-input
                  :formatter="(value) => value.replace(' ', '')"
                  :parser="(value) => value.replace(' ', '')"
                  :disabled="!switchExist"
                  v-model="item.major"
                  placeholder="此处输入专业"
                />
                <div class="commonInput">
                  <el-select :disabled="!switchExist" v-model="item.degree" placeholder="此处选择学历" clearable>
                    <el-option v-for="item in degree_type" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                  </el-select>
                </div>

                <img @click="addMajor" v-if="index == form.majorList.length - 1 && form.majorList.length < 5" src="@/assets/images/add.png" alt="" />
                <img @click="minMajor(index)" v-if="form.majorList.length != 1" src="@/assets/images/minus.png" alt="" />
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="专业技术资格及取得时间" align="left">
            <el-form-item prop="professional">
              <div class="profession-item" v-for="(item, index) of form.professionalList" :key="index">
                <el-form-item label="资格证书名称：" style="margin-right: 20px">
                  <el-input
                    :formatter="(value) => value.replace(' ', '')"
                    :parser="(value) => value.replace(' ', '')"
                    :disabled="!switchExist"
                    v-model="item.professional"
                    style="width: 100%"
                    class="inputBox"
                    placeholder="此处输入资格证书名称"
                  />
                </el-form-item>
                <el-form-item label="取得时间：">
                  <el-date-picker
                    :disabled="!switchExist"
                    v-model="item.professionalDate"
                    type="date"
                    placeholder="此处选择取得时间"
                    size="default"
                  />
                </el-form-item>
                <img @click="addPro" v-if="index == form.professionalList.length - 1" src="@/assets/images/add.png" alt="" />
                <img @click="minPro(index)" v-if="form.professionalList.length != 1" src="@/assets/images/minus.png" alt="" />
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="执业资格证书名称及注册号" align="left">
            <div v-if="switchExist" @click="changeUpload(index)" class="paper-item" v-for="(item, index) of form.zjkExpertAwardsList" :key="index">
              <div class="lw-item">
                <el-form-item label="执业资格证书名称：" style="margin-right: 20px">
                  <el-input
                    :formatter="(value) => value.replace(' ', '')"
                    :parser="(value) => value.replace(' ', '')"
                    :disabled="!switchExist"
                    v-model="item.awardsContent"
                    placeholder="此处输入执业资格证书名称"
                  />
                </el-form-item>
                <el-form-item label="注册号：" style="margin-right: 20px">
                  <el-input
                    :formatter="(value) => value.replace(' ', '')"
                    :parser="(value) => value.replace(' ', '')"
                    :disabled="!switchExist"
                    v-model="item.registerSn"
                    placeholder="此处输入注册号"
                  />
                </el-form-item>
              </div>

              <img
                @click="addAward"
                v-if="index == form.zjkExpertAwardsList.length - 1 && form.zjkExpertAwardsList.length < 10"
                src="@/assets/images/add.png"
                alt=""
              />
              <img @click="minAward(index)" v-if="form.zjkExpertAwardsList.length != 1" src="@/assets/images/minus.png" alt="" />
            </div>
            <div
              v-else-if="
                form.zjkExpertAwardsList.length > 0 && form.zjkExpertAwardsList[0].awardsContent != '' && form.zjkExpertAwardsList[0].registerSn != ''
              "
            >
              <el-table :data="form.zjkExpertAwardsList" style="width: 100%">
                <el-table-column align="center" prop="awardsContent" label="执业资格证书名称" width="180" />
                <el-table-column align="center" prop="awardsPath" label="注册号" width="180" />
              </el-table>
            </div>
            <el-empty v-else description="暂无数据" />
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="单位性质" align="left">
            <template #label>
              <span><b style="color: red">*</b> 单位性质</span>
            </template>
            <el-form-item prop="unitType">
              <el-radio-group @change="unitTypeBoxChange" :disabled="!switchExist" v-model="form.unitType">
                <el-radio v-for="dict in unit_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                <el-input
                  :formatter="(value) => value.replace(' ', '')"
                  :parser="(value) => value.replace(' ', '')"
                  style="margin: 5px 0"
                  :disabled="otherunitTypeDescribe"
                  v-model="form.unitTypeDescribe"
                  placeholder="此处输入单位性质其他内容"
                />
              </el-radio-group>
            </el-form-item>
          </el-descriptions-item>

          <!--          <el-descriptions-item :span="3" label="从事工作或研究领域（可多选，最多可选五项）" align="left">
            <template #label>
              <span><b style="color:red;">*</b> 从事工作或研究领域（可多选，最多可选五项）</span>
            </template>
            <el-form-item prop="performWork">
              <el-checkbox-group @change="boxChange" :max="5" :disabled="!switchExist" v-model="form.performWork">
                <el-checkbox v-for="dict in perform_work_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />

                <el-input :formatter="(value) => value.replace(' ', '')" :parser="(value) => value.replace(' ', '')"
                  style="margin:5px 0;" :disabled="otherInputDisable" v-model="form.otherDescribe" placeholder="此处输入其他领域具体内容" />
              </el-checkbox-group>
            </el-form-item>
          </el-descriptions-item>-->

          <el-descriptions-item :span="3" align="center">
            <template #label>
              <span><b style="color: red">*</b> 从事工作或研究领域（可多选，最多可选五项）</span>
            </template>
            <el-form-item>
              <div
                v-for="group in groupedPerformWork"
                :key="group.category"
                style="margin-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap"
              >
                <div style="font-weight: bold; margin-bottom: 6px">【{{ group.category }}】：</div>
                <div style="display: flex; flex-wrap: wrap; gap: 12px">
                  <el-checkbox-group v-model="form.performWork" @change="boxChange">
                    <el-checkbox
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.value"
                      :disabled="form.performWork.length >= 5 && !form.performWork.includes(item.value)"
                    >
                      {{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="专业相关经历" align="center">
            <template #label>
              <span><b style="color:red;">*</b> 专业相关经历 </span>
            </template>
            <el-form-item prop="workExperience">
              <div class="rich-item">
                <div v-if="switchExist">
                  <editor v-if="switchExist" v-model="form.workExperience" placeholder="请输入专业相关经历" :min-height="192" />
                  <el-empty v-else-if="form.workExperience == '' || form.workExperience == null" description="暂无数据" />
                </div>

                <div v-else class="rich-text" v-html="form.workExperience"></div>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="参与政务信息化项目评审情况" align="center">
            <template #label>
              <span><b style="color: red">*</b> 参与政务信息化项目评审情况 </span>
            </template>
            <el-form-item prop="workPluralistic">
              <div class="rich-item">
                <div v-show="switchExist">
                  <editor v-if="switchExist" v-model="form.workPluralistic" placeholder="请输入参与政务信息化项目评审情况" :min-height="192" />
                  <el-empty v-else-if="form.workPluralistic == '' || form.workPluralistic == null" description="暂无数据" />
                </div>
                <div v-show="!switchExist" class="rich-text" v-html="form.workPluralistic"></div>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="论文" align="center">
            <div class="file-upload">
              <!-- <el-form-item> -->

              <div v-if="switchExist" @click="changePaper(index)" class="paper-item" v-for="(item, index) of form.zjkExpertPaperList" :key="index">
                <div class="lw-item">
                  <el-form-item label="论文名称：" style="margin-right: 20px">
                    <el-input
                      :formatter="(value) => value.replace(' ', '')"
                      :parser="(value) => value.replace(' ', '')"
                      :disabled="!switchExist"
                      v-model="item.paperName"
                      placeholder="此处输入论文名称"
                      style="width: 100%"
                    />
                  </el-form-item>
                  <el-form-item label="期刊号：" style="margin-right: 20px">
                    <el-input
                      :formatter="(value) => value.replace(' ', '')"
                      :parser="(value) => value.replace(' ', '')"
                      :disabled="!switchExist"
                      v-model="item.periodicalNumber"
                      placeholder="此处输入期刊号"
                      style="width: 100%"
                    />
                  </el-form-item>

                  <el-upload
                    ref="uploadLWRef"
                    v-model="item.paperPath"
                    class="upload-demo"
                    accept=".pdf, .doc, .docx, .xlsx, .xls"
                    :before-upload="uploading"
                    :headers="upload.headers"
                    :action="upload.url"
                    :auto-upload="shouldAutoUpload"
                    :on-error="handleLWError"
                    :show-file-list="false"
                    :on-success="handleLWSuccess"
                    :on-exceed="handleExceedLWSuccess"
                    :limit="1"
                  >
                    <el-button type="primary">点击上传附件</el-button>
                    <span style="width: 150px; font-size: 12px; line-height: 12px; margin-left: 25px">允许上传pdf、doc、docx、xls、xlsx格式文件</span>
                  </el-upload>
                </div>

                <img
                  @click="addPaper"
                  v-if="index == form.zjkExpertPaperList.length - 1 && form.zjkExpertPaperList.length < 10"
                  src="@/assets/images/add.png"
                  alt=""
                />
                <img @click="minPaper(index)" v-if="form.zjkExpertPaperList.length != 1" src="@/assets/images/minus.png" alt="" />
              </div>

              <div class="alreadyUpload" v-if="switchExist">
                <p v-if="switchExist" style="margin: 0">已上传文件：</p>
                <div style="display: flex; justify-content: start">
                  <FileOrImage
                    v-for="(item, index) of form.zjkExpertPaperList"
                    :data="item.url"
                    :isEdit="false"
                    width="100%"
                    :fileName="item.originalName"
                    :dataList="[item.url]"
                    height="50%"
                    objectFit="cover"
                  >
                  </FileOrImage>
                </div>
              </div>

              <div
                v-else-if="
                  form.zjkExpertPaperList[0]?.paperName != '' &&
                  form.zjkExpertPaperList[0]?.periodicalNumber != '' &&
                  form.zjkExpertPaperList[0]?.paperPath != ''
                "
              >
                <el-table :data="form.zjkExpertPaperList" style="width: 100%">
                  <el-table-column align="center" prop="paperName" label="论文名称" width="180" />
                  <el-table-column align="center" prop="periodicalNumber" label="期刊号" width="180" />
                  <el-table-column align="center" prop="paperPath" label="论文附件" width="180">
                    <template #default="scope">
                      <FileOrImage
                        :data="scope.row.url"
                        :fileName="scope.row.originalName"
                        :isEdit="false"
                        width="100%"
                        :dataList="[scope.row.url]"
                        height="50%"
                        objectFit="cover"
                      >
                      </FileOrImage>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <el-empty v-else description="暂无数据" />

              <!-- </el-form-item> -->
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="专利" align="center">
            <div class="file-upload">
              <!-- <el-form-item> -->
              <div v-if="switchExist" @click="changePatent(index)" class="paper-item" v-for="(item, index) of form.zjkExpertPatentList" :key="index">
                <div class="lw-item">
                  <el-form-item label="发明创造名称：" style="margin-right: 20px">
                    <el-input
                      :formatter="(value) => value.replace(' ', '')"
                      :parser="(value) => value.replace(' ', '')"
                      :disabled="!switchExist"
                      v-model="item.nameInvention"
                      placeholder="此处输入发明创造名称"
                      style="width: 100%"
                    />
                  </el-form-item>
                  <el-form-item label="专利号：" style="margin-right: 20px">
                    <el-input
                      :formatter="(value) => value.replace(' ', '')"
                      :parser="(value) => value.replace(' ', '')"
                      :disabled="!switchExist"
                      v-model="item.patentNumber"
                      placeholder="此处输入专利号"
                      style="width: 100%"
                    />
                  </el-form-item>

                  <el-upload
                    ref="uploadZLRef"
                    v-model="item.patentPath"
                    class="upload-demo"
                    accept=".pdf, .doc, .docx, .xlsx, .xls"
                    :show-file-list="false"
                    :headers="upload.headers"
                    :action="upload.url"
                    :auto-upload="shouldAutoUpload"
                    :on-error="(err, file) => handleError(err, file, '专利')"
                    :on-success="handleZLSuccess"
                    :before-upload="uploading"
                    :on-exceed="handleExceedZLSuccess"
                    :limit="1"
                  >
                    <el-button type="primary">点击上传附件</el-button>
                    <span style="width: 150px; font-size: 12px; line-height: 12px; margin-left: 25px">允许上传pdf、doc、docx、xls、xlsx格式文件</span>
                  </el-upload>
                </div>

                <img
                  @click="addPatent"
                  v-if="index == form.zjkExpertPatentList.length - 1 && form.zjkExpertPatentList.length < 10"
                  src="@/assets/images/add.png"
                  alt=""
                />
                <img @click="minPatent(index)" v-if="form.zjkExpertPatentList.length != 1" src="@/assets/images/minus.png" alt="" />
              </div>

              <div class="alreadyUpload" v-if="switchExist">
                <p v-if="switchExist" style="margin: 0">已上传文件：</p>
                <div style="display: flex; justify-content: start">
                  <FileOrImage
                    v-for="(item, index) of form.zjkExpertPatentList"
                    :data="item.url"
                    :isEdit="false"
                    width="100%"
                    :fileName="item.originalName"
                    :dataList="[item.url]"
                    height="50%"
                    objectFit="cover"
                  >
                  </FileOrImage>
                </div>
              </div>

              <div
                v-else-if="
                  form.zjkExpertPatentList[0]?.nameInvention != '' &&
                  form.zjkExpertPatentList[0]?.patentNumber != '' &&
                  form.zjkExpertPatentList[0]?.patentPath != ''
                "
              >
                <el-table :data="form.zjkExpertPatentList" style="width: 100%">
                  <el-table-column align="center" prop="nameInvention" label="发明创造名称" width="180" />
                  <el-table-column align="center" prop="patentNumber" label="专利号" width="180" />
                  <el-table-column align="center" prop="patentPath" label="专利附件" width="180">
                    <template #default="scope">
                      <FileOrImage
                        :data="scope.row.url"
                        :fileName="scope.row.originalName"
                        :isEdit="false"
                        width="100%"
                        :dataList="[scope.row.url]"
                        height="50%"
                        objectFit="cover"
                      >
                      </FileOrImage>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <el-empty v-else description="暂无数据" />

              <!-- </el-form-item> -->
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="其他附件(省直政务信息化专家申报表)" align="center">
            <div class="file-upload">
              <!-- <el-form-item> -->
              <div v-if="switchExist" class="paper-item">
                <div v-if="switchExist" style="display: flex; flex-direction: column; align-items: flex-start">
                  <el-upload
                    v-if="switchExist"
                    :multiple="true"
                    ref="uploadOtherRef"
                    v-model:file-list="dataInfo.list"
                    :limit="10"
                    accept=".pdf, .doc, .docx, .xlsx, .xls"
                    :headers="upload.headers"
                    :action="upload.url"
                    :on-success="handleOtherSuccess"
                    :show-file-list="false"
                    :before-upload="uploading"
                    :auto-upload="shouldAutoUpload"
                    :on-error="(err, file) => handleError(err, file, '其他附件(省直政务信息化专家申报表)')"
                  >
                    <el-button type="primary">点击上传附件</el-button>
                    <span style="width: 150px; font-size: 12px; line-height: 12px; margin-left: 25px">允许上传pdf、doc、docx、xls、xlsx格式文件</span>
                  </el-upload>

                  <p v-if="otherPathArr.length != 0" style="margin: 0">已上传文件：</p>
                  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
                    <FileOrImage
                      v-for="item in otherPathArr"
                      :fileName="item.originalName"
                      :data="item.url"
                      :isEdit="false"
                      width="100%"
                      :dataList="[item.url]"
                      height="50%"
                      objectFit="cover"
                    >
                    </FileOrImage>
                  </div>
                </div>

                <div v-else-if="otherPathList.length != 0">
                  <FileOrImage
                    v-for="item in otherPathList"
                    :fileName="item.originalName"
                    :data="item.url"
                    :isEdit="false"
                    width="100%"
                    :dataList="[item.url]"
                    height="50%"
                    objectFit="cover"
                  >
                  </FileOrImage>
                </div>

                <el-empty v-else description="暂无数据" />
              </div>

              <el-container v-else-if="otherPathList.length != 0">
                <el-main>
                  <FileOrImage
                    v-for="item in otherPathList"
                    :fileName="item.originalName"
                    :data="item.url"
                    :isEdit="false"
                    width="100%"
                    :dataList="[item.url]"
                    height="50%"
                    objectFit="cover"
                  >
                  </FileOrImage>
                </el-main>
              </el-container>

              <el-empty v-else description="暂无数据" />
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div class="commitmentBox" v-if="status == null || status == 0 || (status == 3 && approvalType == 0)">
          <div class="contentBox">
            <span>本人郑重承诺：</span>
            <span>1.本人符合《省直政务信息化专家和专家库管理办法》第十一条所述之条件、且不存在禁止申报的情形；</span>
            <span>2.自愿申请成为山西省政务信息化专家库的专家，严格遵守有关法律法规及项目评审的相关规定；</span>
            <span
              >3.对山西省政务信息化专家申报表中所填内容及所提供材料的真实性、有效性负责，申报所提供的资料及相关证明材料是真实有效原件的扫描件或复印件，已经本人核对与原件一致，不存在虚假行为，且不侵犯任何第三人的权利及权益。如承诺不实或违反承诺，本人愿意承担相应法律责任。</span
            >
            <span>4.同意按《省直政务信息化专家和专家库管理办法》相关规定在省政务信息管理局官方网站公示个人相关信息。</span>
          </div>
          <div class="radioBox">
            <el-radio-group v-model="commitmentData">
              <el-radio value="1" size="large" border>同意</el-radio>
              <el-radio value="2" size="large" border>拒绝</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div v-if="status == null || status == 0 || (status == 3 && approvalType == 0)" class="form-buttons3">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
          <el-button :loading="buttonLoading2" type="warning" @click="save">暂存</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
        <div v-else-if="switchExist" class="form-buttons1">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>

        <div v-else-if="!switchExist" class="form-buttons2">
          <el-button type="primary" @click="jumpBack">返回</el-button>
        </div>
      </el-form>
    </el-card>

    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup name="Role" lang="ts">
import { genFileId, ElNotification } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { getPerson, listPosition } from '@/api/expert/person/index';
import { addExpert, sendUserInputError } from '@/api/expert/expert/index';
import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';

import Editor from '@/components/Editor/index.vue';

import FileOrImage from '@/components/FileOrImage/index.vue';
import { ExpertInVO, ExpertInForm, ExpertInQuery } from '@/api/expert/in/types';
import { PersonVO, PersonForm, PersonQuery } from '@/api/expert/person/types';
import $bus from '@/utils/mitt';
import { globalHeaders } from '@/utils/request';

import useUserStore from '@/store/modules/user';
import usePersonStore from '@/store/modules/person';
import { getToken } from '@/utils/auth';
const upload = reactive<UploadOption>({
  headers: globalHeaders(),
  url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
});
const otherInputDisable = ref(true);
const otherunitTypeDescribe = ref(true);
const buttonLoading = ref(false);
const buttonLoading2 = ref(false);
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { approval_status } = toRefs<any>(proxy?.useDict('approval_status'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { unit_type } = toRefs<any>(proxy?.useDict('unit_type'));
const { politics } = toRefs<any>(proxy?.useDict('politics'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));
const { is_recommend } = toRefs<any>(proxy?.useDict('is_recommend'));
const { perform_work_type } = toRefs<any>(proxy?.useDict('perform_work_type'));
const { work_professial_year } = toRefs<any>(proxy?.useDict('work_professial_year'));
const { money_type } = toRefs<any>(proxy?.useDict('money_type'));
const { expert_sources } = toRefs<any>(proxy?.useDict('expert_sources'));

const commitmentData = ref('');
const roleList = ref<RoleVO[]>();
const pageLoading = ref(false);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
// const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const menuOptions = ref<MenuTreeOption[]>([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref<DeptTreeOption[]>([]);
const openDataScope = ref(false);
const route = useRoute();
const modeSwitch = ref([false, false, false, false, false]);
const switchExist = ref(false);

const categoryKeywords = {
  基础设施: ['云/网/数设施', '机房环境'],
  新技术应用: ['云计算', '大数据', '人工智能', '移动互联网', '物联网', '视联网', '区块链', '卫星遥感', '空间地理', '电子认证'],
  网络安全: ['等级保护', '分级保护', '密码', '国产化', '数据安全'],
  软件开发与应用: ['软件设计', '软件部署', '软件开发', '软件测试'],
  项目管理: ['建设规划', '信息化监理', '审计', '成本评估', '绩效评估', '档案', '保密', '运维', '运营'],
  其他: ['其他']
};

const groupedPerformWork = computed(() => {
  const result = [];
  const used = new Set();

  for (const [category, keywords] of Object.entries(categoryKeywords)) {
    const options = perform_work_type.value.filter((item) => {
      if (used.has(item.value)) return false;

      const matched = keywords.some((keyword) => item.label.includes(keyword));
      if (matched) {
        used.add(item.value);
        return true;
      }
      return false;
    });

    if (options.length) {
      result.push({ category, options });
    }
  }

  return result;
});

const switchMode = (i) => {
  modeSwitch.value[i] = !modeSwitch.value[i];
};

/** 数据范围选项*/
const dataScopeOptions = ref([
  { value: '1', label: '全部数据权限' },
  { value: '2', label: '自定数据权限' },
  { value: '3', label: '本部门数据权限' },
  { value: '4', label: '本部门及以下数据权限' },
  { value: '5', label: '仅本人数据权限' }
]);

const queryFormRef = ref<ElFormInstance>();
const expertFormRef = ref<ElFormInstance>();
const dataScopeRef = ref<ElFormInstance>();
const menuRef = ref<ElTreeInstance>();
const deptRef = ref<ElTreeInstance>();

const initForm: PersonForm = {
  //初始表单
  //左边
  expertName: '', //专家姓名
  sex: undefined, //性别
  birthDate: '', //出生年月
  contact: '', //联系方式
  idCard: '', // 身份证号
  province: '',
  city: '',
  area: '',
  address: '',
  positionTitleLevel: '', // 职称等级
  expertSources: '', // 专家来源
  workUnit: '', //工作单位及部门
  duty: '', //职务
  politics: '', //政治面貌
  graduateSchool: '', //毕业院校
  majorList: [{ major: '', degree: '' }], //专业
  major: '', //专业
  email: '', //邮箱

  professional: '', //资格证书名称
  professionalAcquisitionDate: '', //资格证书取得时间
  professionalList: [{ professional: '', professionalDate: '' }], //资格证书取得时间
  workProfessial: '', //现从事专业
  workProfessialYear: '', //现从事年限

  //右边
  photograph: '', //照片
  performWork: [], //从事工作或研究领域
  performWorkId: '', //从事工作或研究领域
  otherDescribe: '', //其他领域描述
  workExperience: '', //专业相关经历
  workPluralistic: '', //参与政务信息化项目评审情况
  achievement: '', //主要论著、业绩成果及获奖情况

  zjkExpertAwardsList: [{ awardsContent: '', registerSn: '' }],
  zjkExpertPaperList: [{ paperName: '', periodicalNumber: '', paperPath: '', originalName: '' }],
  zjkExpertPatentList: [{ nameInvention: '', patentNumber: '', patentPath: '', originalName: '' }],
  otherPath: '',

  paperpath: '',
  patentpath: '',
  status: 0,
  approvalType: 0,
  placeList: [], // 工作单位地址
  isRecommend: '',
  unitType: '',
  unitTypeDescribe: '',
  origin: '' // 籍贯
};
const data = reactive<PageData<PersonForm, PersonQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    expertName: '',
    contact: '',
    workUnit: '',
    status: 0
  },
  rules: {
    expertName: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
    sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    idCard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }],
    birthDate: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
    contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }],
    workUnit: [{ required: true, message: '工作单位及部门不能为空', trigger: 'blur' }],
    duty: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
    politics: [{ required: true, message: '政治面貌不能为空', trigger: 'blur' }],
    graduateSchool: [{ required: true, message: '毕业学校不能为空', trigger: 'blur' }],
    majorList: [{ required: true, message: '专业和学历都不能为空', trigger: 'blur' }]
  }
});

const { form, queryParams, rules } = toRefs(data);

const performWorkValidator = (rule: any, value: any, callback: any) => {
  if (value == '') {
    alert(`value:${value}`);
    return callback(new Error('请选择从事工作或研究领域!'));
  } else {
    callback();
  }
};

const contactValidator = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入联系方式'));
  }
  if (value.toString().indexOf(' ') != -1) {
    return callback(new Error('不允许输入空格!'));
  }
  if (value.toString().length != 11) {
    return callback(new Error('请输入11位手机号!'));
  }
  if (/^1([3]|[5]|[8])\d{9}/.test(value) || /^1([45]|[47]\d{9})/.test(value) || /^17[0-8]{9}/.test(value)) {
    callback();
  } else {
    callback(new Error('请检查手机号格式!'));
  }
};

const idCardValidator = (rule: any, value: any, callback: any) => {
  if (value) {
    if (!value.trim()) {
      return callback(new Error('请输入身份证号'));
    }
    if (value.toString().indexOf(' ') != -1) {
      return callback(new Error('不允许输入空格!'));
    }
    if (value.toString().length != 18) {
      return callback(new Error('请输入18位身份证号!'));
    }
    if (/^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[0-9Xx]$/.test(value)) {
      const yearData = value.substring(6, 10);
      const monthData = value.substring(10, 12);
      const dayData = value.substring(12, 14);
      form.value.birthDate = yearData + '-' + monthData + '-' + dayData;
      callback();
    } else {
      callback(new Error('请检查身份证号格式!'));
    }
  } else {
    callback(new Error('请输入身份证号!'));
  }
};

const unitTypeValidator = (rule: any, value: any, callback: any) => {
  if (value) {
    if (value === '8') {
      if (form.value.unitTypeDescribe) {
        callback();
      } else {
        return callback(new Error('请输入单位性质其他内容!'));
      }
    } else {
      callback();
    }
  } else {
    callback(new Error('请选择单位性质!'));
  }
};
import type { FormRules } from 'element-plus';

const formRules = ref({
  performWork: [{ required: true, message: '请选择从事工作或研究领域', trigger: 'change' }],
  expertName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
  idCard: [{ required: true, validator: idCardValidator, trigger: 'blur' }],
  birthDate: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
  contact: [{ validator: contactValidator, trigger: 'blur' }],
  workUnit: [{ required: true, message: '工作单位及部门不能为空', trigger: 'blur' }],
  isRecommend: [{ required: true, message: '是否单位推荐不能为空', trigger: 'change' }],
  unitType: [{ required: true, validator: unitTypeValidator, trigger: 'change' }],
  duty: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
  politics: [{ required: true, message: '政治面貌不能为空', trigger: 'change' }],
  graduateSchool: [{ required: true, message: '毕业院校不能为空', trigger: 'blur' }],
  positionTitleLevel: [{ required: true, message: '职称等级不能为空', trigger: 'change' }],
  workProfessial: [{ required: true, message: '现从事专业及年限不能为空', trigger: 'blur' }],
  workProfessialYear: [{ required: true, message: '工作年限不能为空', trigger: 'change' }],
  expertSources: [{ required: true, message: '专家来源不能为空', trigger: 'change' }],
  majorList: [
    {
      required: true,
      message: '专业和学历都不能为空',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value.length > 0) {
          value.map((item) => {
            if (item.major === '' || item.degree === '' || item.degree === undefined) {
              callback(new Error('专业和学历都不能为空'));
            } else {
              callback();
            }
          });
        } else {
          callback(new Error('专业和学历都不能为空'));
        }
      }
    }
  ],
  professionalList: [
    {
      required: true,
      message: '专业技术资格不能为空',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (value.some((item) => item === '')) {
          callback(new Error('专业技术资格不能为空'));
        } else {
          callback();
        }
      }
    }
  ],
  placeList: [{ required: true, message: '工作单位地址不能为空', trigger: 'change' }],
  workExperience: [
    {
      required: true,
      message: '请输入专业相关经历',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value === '<p><br></p>' || value === '') {
          callback(new Error('请输入专业相关经历'));
        } else {
          callback();
        }
      }
    }
  ],
  workPluralistic: [
    {
      required: true,
      message: '请输入参与政务信息化项目评审情况',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value === '<p><br></p>' || value === '') {
          callback(new Error('请输入参与政务信息化项目评审情况'));
        } else {
          callback();
        }
      }
    }
  ],
  origin: [{ required: true, message: '籍贯不能为空', trigger: 'blur' }]
});

import { getArea } from '@/api/project/extract';
import { a } from 'vitest/dist/suite-ynYMzeLu';
const cascaderChange = () => {};

const placeOptions = ref([]);
const getExtractAreaOptions = async () => {
  let res = await getArea();
  if (res.code != 200) {
    return;
  }
  placeOptions.value = res.data;
};

const imageUrl = ref('');
//上传之前
const beforeAvatarUpload = (file: any) => {
  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
  const isJPG = type.includes(file.type);
  //检验文件格式
  if (!isJPG) {
    proxy?.$modal.msgError(`图片格式错误!`);
    return false;
  }
  // 校检文件大小
  const isLt = file.size / 1024 / 1024 < 10;
  if (!isLt) {
    proxy?.$modal.msgError(`上传图片大小不能超过 10 MB!`);
    return false;
  }
  proxy?.$modal.loading('正在上传文件，请稍候...');
  return true;
};
const otherPathArr = ref([]);
const dataInfo = reactive({
  list: [],
  maxLength: 0
});
//上传成功
const handleOtherSuccess = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  isUploading.value = false;
  if (response.code == 200) {
    if (!otherPathArr.value.some((item) => item == response.data.url)) {
      otherPathArr.value.push({ ossId: response.data.ossId, originalName: response.data.fileName, url: response.data.url });
    }

    let length = uploadFiles.length;
    dataInfo.maxLength = Math.max(length, dataInfo.maxLength);
    setTimeout(() => {
      if (length !== dataInfo.maxLength) {
        return;
      } else {
        ElMessageBox.alert(
          "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
          '上传其他文件结果',
          {
            dangerouslyUseHTMLString: true
          }
        );
        dataInfo.maxLength = 0;
      }
    }, 10);

  } else {
    handleError(response, file, '其他附件(省直政务信息化专家申报表)');
  }
};

const handleExceedAvatarSuccess: UploadProps['onExceed'] = (files) => {
  uploadAvatarRef.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadAvatarRef.value!.handleStart(file);
  uploadAvatarRef.value!.submit();
};
//上传成功
const handleAvatarSuccess = (res: any, file) => {
  // 如果上传成功
  if (res.code === 200) {
    imageUrl.value = res.data.url;
    proxy?.$modal.closeLoading();
  } else {
    proxy?.$modal.closeLoading();
    handleError(res, file, '头像');
  }
};

const uploadAvatarRef = ref<ElUploadInstance>();
const uploadLWRef = ref<ElUploadInstance>();
const uploadZLRef = ref<ElUploadInstance>();
const uploadOtherRef = ref<ElUploadInstance>();
const lwList = ref([]);
const zlList = ref([]);

const awardIndex = ref(0);
const changeUpload = (i) => {
  awardIndex.value = i;
};
const paperIndex = ref(0);
const changePaper = (i) => {
  paperIndex.value = i;
};
const patentIndex = ref(0);
const changePatent = (i) => {
  patentIndex.value = i;
};
const isUploading = ref(false);
const uploading = () => {
  isUploading.value = true;
};

// 论文上传覆盖
const handleExceedLWSuccess: UploadProps['onExceed'] = (files) => {
  uploadLWRef.value[paperIndex.value]!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadLWRef.value[paperIndex.value]!.handleStart(file);
  uploadLWRef.value[paperIndex.value]!.submit();
};
/** 论文上传失败处理 */
const handleLWError = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  uploadLWRef.value!.clearFiles();
  handleError(response, file, '论文');
};
/** 论文上传成功处理 */
const handleLWSuccess = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  isUploading.value = false;

  if (response.code == 200) {
    form.value.zjkExpertPaperList[paperIndex.value].url = response.data.url;
    form.value.zjkExpertPaperList[paperIndex.value].paperPath = response.data.ossId;
    form.value.zjkExpertPaperList[paperIndex.value].originalName = response.data.fileName;
    ElMessageBox.alert(
      "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
      '上传论文结果',
      {
        dangerouslyUseHTMLString: true
      }
    );
  } else {
    uploadLWRef.value[0]!.handleRemove(file);
    handleError(response, file, '论文');
  }
};
// 专利上传覆盖
const handleExceedZLSuccess: UploadProps['onExceed'] = (files) => {
  uploadZLRef.value[patentIndex.value]!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadZLRef.value[patentIndex.value]!.handleStart(file);
  uploadZLRef.value[patentIndex.value]!.submit();
};
/** 专利上传成功处理 */
const handleZLSuccess = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  isUploading.value = false;
  if (response.code == 200) {
    form.value.zjkExpertPatentList[patentIndex.value].url = response.data.url;
    form.value.zjkExpertPatentList[patentIndex.value].patentPath = response.data.ossId;
    form.value.zjkExpertPatentList[patentIndex.value].originalName = response.data.fileName;
    ElMessageBox.alert(
      "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
      '上传专利结果',
      {
        dangerouslyUseHTMLString: true
      }
    );
  } else {
    handleError(response, file, '专利');
  }
};
//checkbox更改事件
const boxChange = (value) => {
  if (value.indexOf('18') != -1) {
    otherInputDisable.value = false;
  } else {
    otherInputDisable.value = true;
  }
  if (value.length > 5) {
    ElMessage.warning('最多可选择5项');
    value.splice(5); // 限制最多5个
  }
};

const unitTypeBoxChange = (value) => {
  if (value === '8') {
    otherunitTypeDescribe.value = false;
  } else {
    otherunitTypeDescribe.value = true;
    form.value.unitTypeDescribe = '';
  }
};
const dialogImageUrl = ref('');
const dialogVisible = ref(false);

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

/** 重置新增的表单以及其他数据  */
const reset = () => {
  form.value = { ...initForm };
  expertFormRef.value?.resetFields();
};

/** 返回  */
const jumpBack = () => {
  router.back();
};
/** 暂存按钮 */
const save = () => {
  const findzjkExpertAwardsData = form.value.zjkExpertAwardsList?.filter((item) => item.awardsContent != '' && item.registerSn != '');
  const findzjkExpertPaperData = form.value.zjkExpertPaperList?.filter((item) => item.paperName != '' && item.paperPath != '');
  const findzjkExpertPatentData = form.value.zjkExpertPatentList?.filter((item) => item.nameInvention != '' && item.patentPath != '');
  if (findzjkExpertAwardsData.length > 0) {
    form.value.zjkExpertAwardsList = findzjkExpertAwardsData;
  }
  if (findzjkExpertPaperData.length > 0) {
    form.value.zjkExpertPaperList = findzjkExpertPaperData;
  }
  if (findzjkExpertPatentData.length > 0) {
    form.value.zjkExpertPatentList = findzjkExpertPatentData;
  }

  pageLoading.value = true;

  ElMessageBox.confirm('确认暂存以上信息吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(() => {
      var proBlank = false;
      form.value.professionalList.forEach((v, i) => {
        if (v.professional) {
          if (v.professional.trim() == '' && v.professionalDate.trim() == '') {
            proBlank = true;
            form.value.professionalList.splice(i, 1);
          }
        }
      });

      if (
        form.value.zjkExpertAwardsList.some((item) => {
          Object.values(item)[0] == '' && Object.values(item)[1] == '';
        })
      ) {
        delete form.value.zjkExpertAwardsList;
      }

      expertFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
          buttonLoading2.value = true;

          //其他附件(省直政务信息化专家申报表)
          if (otherPathArr.value.length != 0) {
            form.value.otherPath = '';
            otherPathArr.value.forEach((e, i) => {
              i == otherPathArr.value.length - 1
                ? (form.value.otherPath = form.value.otherPath + e.ossId)
                : (form.value.otherPath = form.value.otherPath + e.ossId + ',');
            });
          } else {
            form.value.otherPath = null;
          }

          //工作单位地址
          form.value.province = form.value.placeList.length > 0 ? form.value.placeList[0].toString() : '';
          form.value.city = form.value.placeList.length > 0 ? form.value.placeList[1].toString() : '';
          form.value.area = form.value.placeList.length > 0 ? form.value.placeList[2].toString() : '';

          //照片
          form.value.photograph = imageUrl.value;
          //论文
          form.value.paperpath = lwList.value.join(',');
          //专利
          form.value.patentpath = zlList.value.join(',');

          //状态为暂存
          form.value.status = 0;

          if (form.value.performWork) {
            if (form.value.performWork.length != 0) {
              form.value.performWorkId = form.value.performWork.join(',');
            } else {
              form.value.performWorkId = null;
            }
          }
          addExpert(form.value)
            .then(async () => {
              ElNotification({
                title: '提示',
                message: '暂存成功',
                type: 'success'
              });

              if (proBlank) {
                form.value.professionalList.push({ professional: '', professionalDate: '' });
              }

              switchExist.value = true;
              router.push({ path: '/expert/personInfo' });
            })
            .catch(() => {
              buttonLoading2.value = false;
              switchExist.value = true;
              return;
            })
            .finally(() => (buttonLoading2.value = false));
        } else {
          ElNotification({
            title: '提示',
            message: '表单信息有误',
            type: 'error'
          });
          sendUserInputError({ title: '用户输入错误' });
        }
      });
    })
    .catch(() => {})
    .finally(() => {
      pageLoading.value = false;
    });
};

/** 提交按钮 */
const submitForm = () => {
  if (commitmentData.value === '1' || route.query.mode) {
    const findzjkExpertAwardsData = form.value.zjkExpertAwardsList?.filter((item) => item.awardsContent != '' && item.registerSn != '');
    const findzjkExpertPaperData = form.value.zjkExpertPaperList?.filter((item) => item.paperName != '' && item.paperPath != '');
    const findzjkExpertPatentData = form.value.zjkExpertPatentList?.filter((item) => item.nameInvention != '' && item.patentPath != '');
    if (findzjkExpertAwardsData.length > 0) {
      form.value.zjkExpertAwardsList = findzjkExpertAwardsData;
    }
    if (findzjkExpertPaperData.length > 0) {
      form.value.zjkExpertPaperList = findzjkExpertPaperData;
    }
    if (findzjkExpertPatentData.length > 0) {
      form.value.zjkExpertPatentList = findzjkExpertPatentData;
    }

    pageLoading.value = true;

    ElMessageBox.confirm('确认提交以上信息吗', {
      title: '系统确认',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
      .then(() => {
        var proBlank = false;
        //状态为提交
        form.value.status = 1;
        form.value.professionalList.forEach((v, i) => {
          if (v.professional) {
            if (v.professional.trim() == '' && v.professionalDate.trim() == '') {
              proBlank = true;
              form.value.professionalList.splice(i, 1);
            }
          }
        });

        if (
          form.value.zjkExpertAwardsList.some((item) => {
            Object.values(item)[0] == '' && Object.values(item)[1] == '';
          })
        ) {
          delete form.value.zjkExpertAwardsList;
        }

        expertFormRef.value?.validate(async (valid: boolean) => {
          if (valid) {
            buttonLoading.value = true;

            //其他附件(省直政务信息化专家申报表)
            if (otherPathArr.value.length != 0) {
              form.value.otherPath = '';
              otherPathArr.value.forEach((e, i) => {
                i == otherPathArr.value.length - 1
                  ? (form.value.otherPath = form.value.otherPath + e.ossId)
                  : (form.value.otherPath = form.value.otherPath + e.ossId + ',');
              });
            } else {
              form.value.otherPath = null;
            }

            //工作单位地址
            form.value.province = form.value.placeList.length > 0 ? form.value.placeList[0].toString() : '';
            form.value.city = form.value.placeList.length > 0 ? form.value.placeList[1].toString() : '';
            form.value.area = form.value.placeList.length > 0 ? form.value.placeList[2].toString() : '';

            //照片
            form.value.photograph = imageUrl.value;

            //论文
            form.value.paperpath = lwList.value.join(',');
            //专利
            form.value.patentpath = zlList.value.join(',');
            if (form.value.performWork) {
              if (form.value.performWork.length != 0) {
                form.value.performWorkId = form.value.performWork.join(',');
              } else {
                form.value.performWorkId = null;
              }
            }
            if (route.query.mode == 'true') {
              form.value.approvalType = 1;
            }
            const res = await addExpert(form.value).finally(() => (buttonLoading.value = false));

            if (res.code == 200) {
              buttonLoading.value = false;
              proxy?.$modal.msgSuccess('操作成功');
              if (proBlank) {
                form.value.professionalList.push({ professional: '', professionalDate: '' });
              }
              switchExist.value = false;
              router.push({ path: '/expert/personInfo' });
            } else {
              buttonLoading.value = false;
              ElMessageBox.alert(res.msg, '提示', {
                confirmButtonText: '确定',
                callback: () => {}
              });
            }
          } else {
            ElNotification({
              title: '提示',
              message: '表单信息有误',
              type: 'error'
            });
            sendUserInputError({ title: '用户输入错误' });
          }
        });
      })
      .catch(() => {
        switchExist.value = true;
      })
      .finally(() => {
        pageLoading.value = false;
      });
  } else {
    ElNotification({
      title: '提示',
      message: '请同意本人郑重承诺',
      type: 'error'
    });
    sendUserInputError({ title: '请同意本人郑重承诺' });
  }
};
/**
 * 文件上传错误记录
 */
const handleError = async (err, file, title) => {
  if (!isDomLoaded.value) return;
  await nextTick();
  ElNotification({
    title: '提示',
    message: title + '-上传文件失败',
    type: 'error'
  });
  sendUserInputError({ title: `${title}-文件上传错误` });
};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;

  router.back();
};

/** 增加专利 */
const addPatent = () => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertPatentList.push({ nameInvention: '', patentNumber: '', patentPath: '', originalName: '', url: '' });
};
/** 减少专利 */
const minPatent = (i) => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertPatentList.splice(i, 1);
};

/** 增加论文 */
const addPaper = () => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertPaperList.push({ paperName: '', periodicalNumber: '', paperPath: '', originalName: '', url: '' });
};
/** 减少论文 */
const minPaper = (i) => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertPaperList.splice(i, 1);
};

/** 增加获奖情况 */
const addAward = () => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertAwardsList.push({ awardsContent: '', registerSn: '' });
};
/** 减少获奖情况 */
const minAward = (i) => {
  if (switchExist.value == false) {
    return;
  }
  form.value.zjkExpertAwardsList.splice(i, 1);
};

/** 增加专业 */
const addMajor = () => {
  if (switchExist.value == false) {
    return;
  }
  form.value.majorList.push({ major: '', degree: '' });
};
/** 减少专业 */
const minMajor = (i) => {
  if (switchExist.value == false) {
    return;
  }
  form.value.majorList.splice(i, 1);
};

/** 增加专业 */
const addPro = () => {
  if (switchExist.value == false) {
    return;
  }
  form.value.professionalList.push({ professional: '', professionalDate: '' });
};
/** 减少专业 */
const minPro = (i) => {
  if (switchExist.value == false) {
    return;
  }
  form.value.professionalList.splice(i, 1);
};

const userId = useUserStore().userId;
const status = ref<any>();
const approvalType = ref<any>();
const remark = ref<any>();
const routeMode = ref('');
const otherPathList = ref([]);
const shouldAutoUpload = ref(false);
const isDomLoaded = ref(false);

//获取数据
const getData = async () => {
  pageLoading.value = true;
  let res: any;
  try {
    res = await getPerson(userId);
  } catch (e) {
    pageLoading.value = false;
  }
  if (route.query.mode == 'true') {
    switchExist.value = true;
  }
  if (res.data.status == 0 || res.data.status == 3) {
    switchExist.value = true;
  }

  if (res.data.majorList == null || res.data.majorList.length == 0) {
    res.data.majorList = [{ major: '', degree: '' }];
  }

  if (res.data.professionalList == null || res.data.professionalList.length == 0) {
    res.data.professionalList = [{ professional: '', professionalDate: '' }];
  }
  if (res.data.positionTitleLevel == null) {
    res.data.positionTitleLevel = '';
  }
  res.data.placeList = [];

  if (res.data.province !== null) {
    res.data.placeList[0] = res.data.province;
  }

  if (res.data.city !== null) {
    res.data.placeList[1] = res.data.city;
  }

  if (res.data.area !== null) {
    res.data.placeList[2] = res.data.area;
  }

  if (res.data.address == null) {
    res.data.address = '';
  }

  if (res.data.professionalList.length === 0) {
    res.data.professionalList = [{ professional: '', professionalDate: '' }];
  }

  if (res.data.zjkExpertAwardsList == null || res.data.zjkExpertAwardsList.length == 0) {
    res.data.zjkExpertAwardsList = [{ awardsContent: '', registerSn: '' }];
  }

  if (res.data.zjkExpertPaperList == null || res.data.zjkExpertPaperList.length == 0) {
    res.data.zjkExpertPaperList = [{ paperName: '', periodicalNumber: '', paperPath: '', originalName: '', url: '' }];
  }

  if (res.data.zjkExpertPatentList == null || res.data.zjkExpertPatentList.length == 0) {
    res.data.zjkExpertPatentList = [{ nameInvention: '', patentNumber: '', patentPath: '', originalName: '', url: '' }];
  }

  if (res.data.performWorkId === null) {
    res.data.performWork = [];
    res.data.performWorkId = '';
  } else {
    form.value.performWork = res.data.performWorkId.toString().split(',');
  }

  if (res.data.status !== null) {
    Object.assign(form.value, res.data);
  } else {
    form.value.expertName = res.data.expertName;
    form.value.contact = res.data.contact;
    form.value.idCard = res.data.idCard;
  }

  //其他附件(省直政务信息化专家申报表)
  if (res.data.otherPathList && Array.isArray(res.data.otherPathList)) {
    if (res.data.otherPathList.length != 0) {
      otherPathList.value = res.data.otherPathList;
      otherPathArr.value = res.data.otherPathList;
    }
  }

  usePersonStore().status = res.data.status;
  usePersonStore().approvalType = res.data.approvalType;
  usePersonStore().remark = res.data.remark;
  status.value = res.data.status;
  approvalType.value = res.data.approvalType;
  remark.value = res.data.remark;

  if (res.data.expertId == null) {
    pageLoading.value = false;
    switchExist.value = true;
    modeSwitch.value = [true, true, true, true, true];
    shouldAutoUpload.value = true;
    isDomLoaded.value = true;
    return;
  }
  if (res.data.paperpath) {
    lwList.value = res.data.paperpath.split(',');
  }
  if (res.data.patentpath) {
    zlList.value = res.data.patentpath.split(',');
  }

  imageUrl.value = res.data.photograph;
  res.data.otherDescribe != '' && res.data.otherDescribe != null ? (otherInputDisable.value = false) : (otherInputDisable.value = true);

  pageLoading.value = false;
  setTimeout(() => {
    shouldAutoUpload.value = true;
    isDomLoaded.value = true;
  }, 5000);
};
const oldStatus = ref(undefined);

//职称列表
const positionList = ref([]);
const getpositionList = async () => {
  const res = await listPosition();
  positionList.value = res.data;
};

onActivated(async () => {
  await getData();

  if (route.query.mode == 'true') {
    usePersonStore().approvalType = 1;
    routeMode.value = 'true';
    switchExist.value = true;
  }

  if (status.value != oldStatus.value) {
    if (status.value == 3) {
    }
    oldStatus.value = status.value;
  }
});
watch(
  () => form.value.workExperience,
  (v: string) => {
    expertFormRef.value.validateField('workExperience');
  }
);
watch(
  () => form.value.workPluralistic,
  (v: string) => {
    expertFormRef.value.validateField('workPluralistic');
  }
);
onMounted(async () => {
  //获取职称等级列表
  getpositionList();
  getExtractAreaOptions();
  getData();
});
</script>

<style lang="scss" scoped>
.p-2 {
  height: 100%;
  overflow-y: scroll;
}

.form-left,
.form-right {
  width: 70%;
  height: auto;
  font-size: 1.8rem;
}

:deep(.el-form-item) {
  line-height: 4vh;
}

.form-left {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: 1vh;
}

// .form-right {}

.form-buttons {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-top: 2vh;
}

.current-major {
  display: flex;
  flex-wrap: nowrap;

  :deep(.el-select__wrapper) {
    width: 100%;
  }

  .el-form-item:nth-child(1) {
    width: 30%;
    margin-right: 20px;
  }
  .el-form-item:nth-child(2) {
    width: 30%;
  }
  //.el-form-item:nth-child(2) {
  //  width: 15vw;
  //
  //  :deep(.el-form-item__label) {
  //    display: none;
  //  }
  //
  //  :deep(.el-form-item__content) {
  //    margin-left: 0 !important;
  //    width: 100% !important;
  //    display: flex !important;
  //    justify-content: space-around !important;
  //
  //    &>div {
  //      width: 60%;
  //    }
  //  }
  //}
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

:deep(.el-form-item--default .el-form-item__label) {
  font-size: 1.2rem;
  height: 4vh;
  line-height: inherit;
}

:deep(.el-form-item__content) {
  line-height: 4vh;
  display: block !important;
}

// .form-right {
//:deep(.el-form-item__label)  {
// justify-content: flex-start;
//}
// }

:deep(.el-textarea) {
  width: 100% !important;
}

// :deep(.el-upload) {
//   border: 1px dashed #3d3d3d;
// }

:deep(.el-textarea__inner) {
  height: 13.5vh !important;
  width: 100% !important;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
}

.el-button {
  width: 6vw;
}

.approval {
  background-color: #f2f2f2;
  position: relative;
  border-radius: 8px;
  padding-right: 1vw;
  padding-bottom: 1vh;

  .title {
    position: relative;
    padding-left: 2vw;
    font-size: 1.2rem;
  }

  .title::before {
    content: '';
    width: 5px;
    height: 20px;
    display: block;
    position: absolute;
    left: 1vw;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
    background-color: #36d;
  }

  span {
    font-size: 1.2rem;
  }

  .app-btns {
    position: absolute;
    width: 5vw;
    right: 2vw;
    top: 0;
    font-size: 1rem;
    text-align: center;

    p {
      color: #fff;
      padding: 8px;
      border-radius: 5px;
      background-color: #67c23a;
    }
  }
}

.rich-item {
  width: 100%;
  margin-top: 1vh;

  .title {
    position: relative;
    padding-left: 1vw;
    font-size: 1.2rem;
  }

  .title::before {
    content: '';
    width: 5px;
    height: 20px;
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
    background-color: #36d;
  }

  .rich-text {
    margin-top: 1vh;
    padding: 20px;
    width: 100%;
    min-height: 15vh;
    border: 0.5px solid rgba(0, 0, 0, 0.5);
    font-size: 0.9rem;
    text-align: left;
  }
}

.el-empty {
  padding: 0;
  margin: 20px 0;
  height: 12vh;

  :deep(.el-empty__image) {
    transform: scale(0.5);
    height: 12vh;
  }

  :deep(.el-empty__description) {
    margin: 0;
  }
}

.file-upload {
  :deep(.el-upload) {
    /* width: 35vw;*/
  }
}

.form-buttons {
  width: 65%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.major-item {
  :deep(.el-input) {
    width: 45%;
    margin-right: 20px;
  }
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-right: 4vw;
  position: relative;
  margin-top: 1vh;

  img:nth-child(3) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 35px;
    top: 40%;
    transform: translateY(-50%);
  }

  img:nth-child(4) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
  }
}

.profession-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-right: 4vw;
  position: relative;
  margin-top: 1vh;
  .el-upload__tip {
    margin-top: 0;
    position: absolute;
    font-size: 11px;
    right: 0;
    top: 85%;
  }

  .el-form-item {
    width: 40%;
    display: flex;
    align-items: center;
  }
  :deep(.el-input) {
    width: 45%;
  }

  :deep(.el-select) {
    width: 45%;
  }

  img:nth-child(3) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 35px;
    top: 40%;
    transform: translateY(-50%);
  }

  img:nth-child(4) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
  }
  .inputBox {
    :deep(.el-input__wrapper) {
      width: 100% !important;
      color: #333 !important;
      box-shadow: 0 0 0 1px #dcdfe6 !important;
      background: #ffffff !important;
    }
  }
}

.el-aside {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-main {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-form-item--default) {
  margin-bottom: 0;
}

.award-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 4vw;
  position: relative;
  margin-top: 1vh;

  & > div:nth-child(n) {
    width: 45% !important;
  }

  :deep(.el-upload) {
    width: 100% !important;
  }

  :deep(.el-input) {
    width: 50% !important;
    height: 23.5vh;
  }

  :deep(.el-textarea) {
    width: 50% !important;
    height: 23.5vh;
  }

  :deep(.el-textarea__inner) {
    height: 100% !important;
  }

  :deep(.el-upload-list__item) {
    width: 100%;
  }

  img {
    cursor: pointer;
    display: block;
    width: 2vw;
    height: 2vw;
    position: absolute;
    right: 0.8vw;
    top: 35%;
    transform: translateY(-50%);
  }
}

.paper-item {
  width: 100%;
  padding-right: 4vw;
  position: relative;
  // margin-top: 1vh;
  :deep(.el-input__wrapper) {
    width: 100% !important;
    color: #333 !important;
    box-shadow: 0 0 0 1px #dcdfe6 !important;
    background: #ffffff !important;
  }
  & > div {
    margin-bottom: 0.5vh;
  }

  :deep(.el-textarea__inner) {
    height: 100% !important;
  }

  :deep(.el-upload-list__item) {
    width: 100%;
  }

  img:nth-child(2) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 35px;
    top: 40%;
    transform: translateY(-50%);
  }

  img:nth-child(3) {
    cursor: pointer;
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 40%;
    transform: translateY(-50%);
  }
}

:deep(.el-table__header-wrapper) {
  display: flex;
  justify-content: center;
}

:deep(.el-upload-dragger) {
  padding: 0;
}

.lw-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  position: relative;
  align-items: center;
  .upload-demo {
    width: 30%;
    display: flex;
    align-items: center;

    :deep(.el-upload) {
      height: 100%;
    }
  }

  .el-upload__tip {
    margin-top: 0;
    position: absolute;
    font-size: 11px;
    right: 0;
    top: 85%;
  }

  .el-form-item {
    width: 40%;
    display: flex;
    align-items: center;
  }
  :deep(.el-input__wrapper) {
    width: 100% !important;
    color: #333 !important;
    box-shadow: 0 0 0 1px #dcdfe6 !important;
    background: #ffffff !important;
  }
}

// :deep(.my-label) {
//   background: var(--el-color-danger-light-9) !important;
// }

.el-descriptions {
  --el-descriptions-table-border: 1px solid #798897;
}

.alreadyUpload {
  p {
    text-align: left;
  }
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

:deep(.el-input__wrapper) {
  width: 100% !important;
  box-shadow: none !important;
  background: none !important;
  color: #333 !important;
}

:deep(.el-input__inner) {
  color: black !important;
}

:deep(.el-form-item__error) {
  padding-left: 10px;
}
.desidentialAaddress {
  :deep(.el-select__wrapper) {
    width: 100%;
    // border: none !important;
    // box-shadow: none !important;
  }
}
.form-buttons3 {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.commonInput {
  width: 200px;
}
:deep(.el-descriptions__content) {
  padding: 15px 11px !important;
}
.form-buttons2,
.form-buttons1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.commitmentBox {
  margin: 10px 0;
  padding: 10px 30px;
  border: 1px solid #798897;
  border-radius: 5px;
  .contentBox {
    span {
      display: block;
      padding-top: 10px;
    }
  }
  .radioBox {
    margin: 20px auto;
    text-align: center;
  }
}
</style>
