<template>
  <div class="p-2" v-loading="pageLoading">
    <el-card shadow="hover">
      <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="route.query.type != 'edit'"
              :limit="1"
              class="avatar-uploader"
              :action="upload.url"
              :headers="upload.headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>

            <!-- <image-upload :isDisabled="route.query.type != 'edit'" :limit="1" v-model="form.photograph" /> -->
          </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="route.query.type != 'edit'"
                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">
              <el-select :disabled="route.query.type != 'edit'" v-model="form.sex" placeholder="此处选择性别" clearable style="width: 200px">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)" />
              </el-select>
            </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="route.query.type != 'edit'"
                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="route.query.type != 'edit'"
                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="route.query.type != 'edit'"
                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="route.query.type != 'edit'"
                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="route.query.type != 'edit'"
                        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="route.query.type != 'edit'" 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="center">
            <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="route.query.type != 'edit'"
                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">
              <el-select :disabled="route.query.type != 'edit'" v-model="form.politics" placeholder="此处选择政治面貌" clearable style="width: 200px">
                <el-option v-for="dict in politics" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </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="route.query.type != 'edit'"
                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">
              <el-select :disabled="route.query.type != 'edit'" v-model="form.positionTitleLevel" placeholder="请选择职称等级" style="width: 200px">
                <el-option v-for="item in positionList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </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">
              <el-select v-model="form.expertSources" placeholder="请选择专家来源" :disabled="route.query.type != 'edit'" style="width: 200px">
                <el-option v-for="item in expert_sources" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </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="route.query.type != 'edit'"
                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="route.query.type != 'edit'"
                  v-model="form.workProfessial"
                  placeholder="此处输入现从事专业"
                />
              </el-form-item>

              <el-form-item prop="workProfessialYear">
                <el-select :disabled="route.query.type != 'edit'" 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>
              </el-form-item>
            </div>
          </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="placeList">
              <div class="desidentialAaddress" style="width: 100%; display: flex; justify-content: flex-start; align-items: center">
                <el-cascader
                  :disabled="route.query.type != 'edit'"
                  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="route.query.type != 'edit'"
                  v-model="form.address"
                  placeholder="此处输入详细地址"
                />
              </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="majorList">
              <div :class="'major-item'" v-for="(item, index) of form.majorList" :key="index">
                <el-input
                  :formatter="(value) => value.replace(' ', '')"
                  :disabled="route.query.type != 'edit'"
                  v-model="item.major"
                  placeholder="此处输入专业"
                />

                <el-select :disabled="route.query.type != 'edit'" v-model="item.degree" placeholder="此处选择学历" clearable style="width: 200px">
                  <el-option v-for="item in degree_type" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                </el-select>

                <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="center">
            <div v-if="type == 'edit'"
                 class="paper-item"
                 v-for="(item, index) of form.professionalList"
                 :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="route.query.type != 'edit'"
                    v-model="item.professional"
                    style="width: 100%;"
                    class="inputBox"
                    placeholder="此处输入资格证书名称"
                  />
                </el-form-item>
                <el-form-item label="取得时间：" style="margin-right: 30px">
                  <el-date-picker
                    :disabled="route.query.type != 'edit'"
                    v-model="item.professionalDate"
                    type="date"
                    placeholder="此处选择取得时间"
                    size="default"
                  />
                </el-form-item>
              </div>

              <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>

            <div v-else-if="form.professionalList.length > 0 && form.professionalList[0].professional != '' &&
              form.professionalList[0].professionalDate != ''">

              <el-table :data="form.professionalList" style="width: 100%">
                <el-table-column align="center" prop="professional" label="资格证书名称"/>
                <el-table-column align="center" prop="professionalDate" label="取得时间"/>
              </el-table>

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

          <el-descriptions-item :span="3" label="执业资格证书名称及注册号" align="center">
            <div v-if="type == 'edit'"
                 @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="route.query.type != 'edit'" 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="route.query.type != 'edit'" 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].registerSn != '' &&
              form.zjkExpertAwardsList[0].awardsContent != ''">

              <el-table :data="form.zjkExpertAwardsList" style="width: 100%">
                <el-table-column align="center" prop="awardsContent" label="执业资格证书名称"/>
                <el-table-column align="center" prop="registerSn" label="注册号"/>
              </el-table>

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


          </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="unitType">
              <el-radio-group @change="unitTypeBoxChange"
                              :disabled="route.query.type != 'edit'"
                              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="center">
            <template #label>
              <span><b style="color: red">*</b> 从事工作或研究领域（可多选，最多可选五项）</span>
            </template>
            <el-form-item>
              <el-checkbox-group @change="boxChange" :max="5" :disabled="route.query.type != 'edit'" 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">
                <editor v-if="route.query.type == 'edit'" v-model="form.workExperience" placeholder="请输入专业相关经历" :min-height="192" />
                <el-empty v-else-if="form.workExperience == '' || form.workExperience == null"></el-empty>
                <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">
                <editor v-if="route.query.type == 'edit'" v-model="form.workPluralistic" placeholder="请输入参与政务信息化项目评审情况" :min-height="192" />
                <el-empty v-else-if="form.workPluralistic == '' || form.workPluralistic == null"></el-empty>
                <div v-else class="rich-text" v-html="form.workPluralistic"></div>
              </div>
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="论文" align="center">
            <div v-if="type == 'edit'" @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(' ', '')"
                    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(' ', '')"
                    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="true"
                  :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="type == 'edit'">
              <p v-if="form.zjkExpertPaperList.length != 0" 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="60%"
                  objectFit="cover"
                >
                </FileOrImage>
              </div>
            </div>

            <div v-else class="rich-item">
              <div
                v-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="论文名称"/>
                  <el-table-column align="center" prop="periodicalNumber" label="期刊号"/>
                  <el-table-column align="center" prop="paperPath" label="论文附件">
                    <template #default="scope">
                      <FileOrImage
                        :data="scope.row.url"
                        :fileName="scope.row.originalName"
                        :isEdit="false"
                        width="100%"
                        :dataList="[scope.row.url]"
                        height="60%"
                        objectFit="cover"
                      >
                      </FileOrImage>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

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

          <el-descriptions-item :span="3" label="专利" align="center">
            <div v-if="type == 'edit'" @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(' ', '')"
                    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(' ', '')"
                    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="true"
                  :on-success="handleZLSuccess"
                  :on-exceed="handleExceedZLSuccess"
                  :before-upload="uploading"
                  :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="type == 'edit'">
              <p v-if="form.zjkExpertPatentList.length != 0" 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="60%"
                  objectFit="cover"
                >
                </FileOrImage>
              </div>
            </div>

            <div v-else class="rich-item">
              <div
                v-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="发明创造名称"/>
                  <el-table-column align="center" prop="patentNumber" label="专利号"/>
                  <el-table-column align="center" prop="patentPath" label="专利附件">
                    <template #default="scope">
                      <FileOrImage
                        :data="scope.row.url"
                        :fileName="scope.row.originalName"
                        :isEdit="false"
                        width="100%"
                        :dataList="[scope.row.url]"
                        height="60%"
                        objectFit="cover"
                      >
                      </FileOrImage>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

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

          <el-descriptions-item :span="3" label="其他附件(省直政务信息化专家申报表)" align="center">
            <div v-if="type == 'edit'" class="paper-item">
              <div style="display: flex; flex-direction: column; align-items: flex-start">
                <el-upload
                  :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"
                  :before-upload="uploading"
                  :show-file-list="false"
                  :auto-upload="true"
                >
                  <el-button type="primary">点击上传附件</el-button>
                  <span style="width: 150px; font-size: 12px; line-height: 12px; margin-left: 25px"
                    >最多上传10个pdf、doc、docx、xls、xlsx格式文件</span
                  >
                </el-upload>

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

            <div v-else class="rich-item">
              <el-container v-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="60%"
                    objectFit="cover"
                  >
                  </FileOrImage>
                </el-main>
              </el-container>

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

        <div class="form-left">
          <div class="form-buttons">
            <el-button v-if="route.query.type == 'edit'" :loading="buttonLoading" plain type="primary" @click="submitForm">确认</el-button>
            <el-button plain type="info" @click="jumpBack">返回</el-button>
          </div>
        </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 type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId } from 'element-plus'
import { getPerson, listPosition } from '@/api/expert/person/index';
import { getExpert, updateExpert } from '@/api/expert/expert/index';
import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';

import FileOrImage from '@/components/FileOrImage/index.vue';
import { ApprovalVO, ApprovalForm, ApprovalQuery } from '@/api/expert/approval/types';

import { globalHeaders } from '@/utils/request';
import usePersonStore from '@/store/modules/person';
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 router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { unit_type, is_recommend } = toRefs<any>(proxy?.useDict('unit_type', 'is_recommend'));
const { approval_status } = toRefs<any>(proxy?.useDict('approval_status'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { politics } = toRefs<any>(proxy?.useDict('politics'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));
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 pageLoading = ref(true);
const roleList = ref<RoleVO[]>();
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const route = useRoute();
const awardIndex = ref(0);
const changeUpload = (i) => {
  awardIndex.value = i;
};


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 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 placeOptions = ref([]);

const type = computed(() => proxy.$route.query.type);
const initForm: ApprovalForm = {
  //初始表单
  //左边
  expertName: '', //专家姓名
  sex: undefined, //性别
  birthDate: '', //出生年月
  contact: '', //联系方式
  workUnit: '', //工作单位及部门
  duty: '', //职务
  politics: '', //政治面貌
  graduateSchool: '', //毕业院校
  major: '', //专业
  majorList: [{ major: '', degree: '' }], //专业
  email: '', //邮箱

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

  //右边
  photograph: '', //照片
  performWork: [], //从事工作或研究领域
  performWorkId: '', //从事工作或研究领域
  professionalList: [{ professional: '', professionalDate: '' }], //资格证书取得时间
  otherDescribe: '', //其他领域描述
  workExperience: '', // 专业相关经历
  workPluralistic: '', //参与政务信息化项目评审情况
  achievement: '', //主要论著、业绩成果及获奖情况
  paperpath: '', //论文
  patentpath: '', //专利
  approvalType: undefined, //审批类型
  approver: '', //审批人
  approvalValue: '', //审批选择
  approvalOpinion: '', //审批意见
  zjkExpertAwardsList: [{ awardsContent: '',registerSn: ''}],
  zjkExpertPaperList: [{ paperName: '', periodicalNumber: '', paperPath: '', originalName: '' }],
  zjkExpertPatentList: [{ nameInvention: '', patentNumber: '', patentPath: '', originalName: '' }],
  otherPath: '',
  positionTitleLevel: '', // 职称等级
  expertSources: '', // 专家来源
  placeList: [], // 工作单位地址
  isRecommend: '',
  unitType: '',
  unitTypeDescribe: '',
  origin: '', // 籍贯
};
const data = reactive<PageData<ApprovalForm, ApprovalQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    expertName: '',
    contact: '',
    workUnit: '',
    status: ''
  },
  rules: {
    expertName: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
    sex: [{ 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' }],
    major: [{ required: true, message: '专业不能为空', trigger: 'blur' }],
    expertSources: [{ required: true, message: '专家来源', trigger: 'change' }]
  }
});

const isUploading = ref(false);
const uploading = () => {
  isUploading.value = true;
};
const status = ref<any>();
const approvalType = ref<any>();
const remark = ref<any>();
const lwList = ref([]);
const zlList = ref([]);
const lwData = reactive({
  list: [],
  maxLength: 0
});
const otherPathArr = ref([]);
const dataInfo = reactive({
  list: [],
  maxLength: 0
});
const zlData = reactive({
  list: [],
  maxLength: 0
});
//上传成功
const handleOtherSuccess = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  isUploading.value = false;
  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);
};
//删除 其他附件(省直政务信息化专家申报表)
const handleOtherRemove = (uploadFile: UploadFile) => {
  let isExist = otherPathArr.value.indexOf(uploadFile.response.data.url);
  if (isExist != -1) {
    otherPathArr.value.splice(isExist, 1);
  }
};
import { getArea } from '@/api/project/extract';
const getExtractAreaOptions = async () => {
  let res = await getArea();
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  placeOptions.value = res.data;
};

const { form, queryParams, rules } = toRefs(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 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.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('请检查身份证号格式!'));
  }
};

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('请选择单位性质!'))
  }
}
const formRules = ref({
  performWork: [{ required: true, message: '请选择从事工作或研究领域', trigger: 'change' }],
  expertName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
  idCard: [{ 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: 'blur' }],
  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 === '' || value === null) {
          callback(new Error('请输入专业相关经历'));
        } else {
          callback();
        }
      }
    }
  ],
  workPluralistic: [
    {
      required: true,
      message: '请输入参与政务信息化项目评审情况',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value === '<p><br></p>' || value === '' || value === null) {
          callback(new Error('请输入参与政务信息化项目评审情况'));
        } else {
          callback();
        }
      }
    }
  ]
});

const uploadLUNRef = ref<ElUploadInstance>();
const uploadLWRef = ref<ElUploadInstance>();
const uploadZLRef = ref<ElUploadInstance>();
const uploadOtherRef = ref<ElUploadInstance>();
/** 论文上传失败处理 */
const handleLWError = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  uploadLWRef.value!.clearFiles();
};
//上传成功
const handleAvatarSuccess = (res: any) => {
  // 如果上传成功
  if (res.code === 200) {
    imageUrl.value = res.data.url;
    // 获取富文本实例
    // let quill = toRaw(quillEditorRef.value).getQuill();
    // // 获取光标位置
    // let length = quill.selection.savedRange.index;
    // // 插入图片，res为服务器返回的图片链接地址
    // quill.insertEmbed(length, 'image', res.data.url);
    // // 调整光标到最后
    // quill.setSelection(length + 1);

    proxy?.$modal.closeLoading();
  } else {
    proxy?.$modal.msgError('图片插入失败');
    proxy?.$modal.closeLoading();
  }
};
//上传失败
const handleUploadError = (err: any) => {
  proxy?.$modal.msgError('上传文件失败');
};
const paperIndex = ref(0);
const changePaper = (i) => {
  paperIndex.value = i;
};
//返回
const jumpBack = () => {
  if (proxy?.$route.query.type == 'detail') {
    proxy?.$tab.closePage(proxy?.$route).then(() => {
      proxy?.$router.replace('/expert/expert');
    });
  } else {
    router.back();
  }
};

//checkbox更改事件
const boxChange = (value) => {
  if (value.indexOf('18') != -1) {
    otherInputDisable.value = false;
  } else {
    otherInputDisable.value = true;
  }
  if (value.length > 5) {
    ElMessage.warning('最多只能选择五项');
    value.splice(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 addMajor = () => {
  if (route.query.type != 'edit') {
    return;
  }
  form.value.majorList.push({ major: '', degree: '' });
};
/** 减少专业 */
const minMajor = (i) => {
  if (route.query.type != 'edit') {
    return;
  }
  form.value.majorList.splice(i, 1);
};

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

//预览图片
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
//删除照片
const handleRemove = (file: UploadFile) => {
};

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

const fieldOptions = reactive([
  {
    value: 1,
    label: '信息化基础设施建设'
  },
  {
    value: 2,
    label: '网络传输'
  },
  {
    value: 3,
    label: '网络与信息安全'
  },
  {
    value: 4,
    label: '社会管理和公共服务信息'
  },
  {
    value: 5,
    label: '信息资源开发利用'
  },
  {
    value: 6,
    label: '云计算与大数据'
  },
  {
    value: 7,
    label: '移动互联网'
  },
  {
    value: 8,
    label: '信息化项目审计'
  },
  {
    value: 9,
    label: '电子政务'
  },
  {
    value: 10,
    label: '其他领域(需填写)'
  }
]);

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

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

/** 提交按钮 */
const submitForm = () => {
  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(() => {
      expertFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
          buttonLoading.value = true;

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

          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);
              }
            }
          });

          form.value.photograph = imageUrl.value;
          if (form.value.performWork) {
            form.value.performWorkId = form.value.performWork.join(',');
          }
          // form.value.performWorkId = form.value.performWork.join(',');

          delete form.value.performWork;

          //工作单位地址
          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() : '';

          const res = updateExpert(form.value).finally(() => {
            buttonLoading.value = false;
          });

          if (proBlank) {
            form.value.professionalList.push({ professional: '', professionalDate: '' });
          }
          proxy?.$modal.msgSuccess('操作成功');

          router.back();
        }
      });
    })
    .catch(() => {})
    .finally(() => {
      pageLoading.value = false;
    });

};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;

  router.back();
};

// onBeforeMount(async () => {
//   if (route.query.id) {

//     const res = await getExpert(route.query.id.toString());

//     form.value.id = route.query.id[0];

//     res.data.otherDescribe != '' ? otherInputDisable.value = false : otherInputDisable.value = true;

//     res.data.performWorkId ? Object.assign(form.value, res.data, { performWork: res.data.performWorkId.toString().split(',') }) : Object.assign(form.value, res.data);
//   }
// })

//编辑专业相关经历的内容
const updateWorkExperience = (data) => {
  form.value.workExperience = data;
};

//编辑参与政务信息化项目评审情况情况的内容
const updatePluralistic = (data) => {
  form.value.workPluralistic = data;
};

//编辑获奖情况的内容
const updateAchievement = (data) => {
  form.value.achievement = data;
};

// 论文上传覆盖
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 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;
  } else {
    uploadLWRef.value[0]!.handleRemove(file);
  }
  ElMessageBox.alert(
    "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
    '上传论文结果',
    {
      dangerouslyUseHTMLString: true
    }
  );
};
//删除论文
const handleLWRemove = (uploadFile: UploadFile) => {
  let isExist = lwList.value.indexOf(uploadFile.response.data.url);
  if (isExist != -1) {
    lwList.value.splice(isExist, 1);
  }
};

// 专利上传覆盖
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;
  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
    }
  );
};
//删除专利
const handleZLRemove = (uploadFile: UploadFile) => {
  let isExist = zlList.value.indexOf(uploadFile.response.data.url);
  if (isExist != -1) {
    zlList.value.splice(isExist, 1);
  }
};

/** 增加专利 */
const addPatent = () => {
  form.value.zjkExpertPatentList.push({ nameInvention: '', patentNumber: '', patentPath: '', originalName: '', url: '' });
};
/** 减少专利 */
const minPatent = (i) => {
  form.value.zjkExpertPatentList.splice(i, 1);
};
const patentIndex = ref(0);
const changePatent = (i) => {
  patentIndex.value = i;
};
/** 增加论文 */
const addPaper = () => {
  form.value.zjkExpertPaperList.push({ paperName: '', periodicalNumber: '', paperPath: '', originalName: '', url: '' });
};
/** 减少论文 */
const minPaper = (i) => {
  form.value.zjkExpertPaperList.splice(i, 1);
};
const otherPathList = ref([]);
const workArr = ref([]);
const getData = async () => {
  workArr.value = [];

  if (workArr.value.length != 0) {
    workArr.value = [];
    return;
  }
  const res = await getExpert(route.query.id.toString());
  if (res.data.positionTitleLevel == null) {
    res.data.positionTitleLevel = ''
  }
  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.workProfessialYear === null) {
    res.data.workProfessialYear = '';
  }
  //其他附件(省直政务信息化专家申报表)
  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;
    }
  }

  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.province === null) {
    res.data.placeList = [];
  }

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

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

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

  if (res.data.address == null) {
    res.data.address = '';
  }
  if (res.data.paperpath) {
    lwList.value = res.data.paperpath?.split(',');
  }
  if (res.data.patentpath) {
    zlList.value = res.data.patentpath?.split(',');
  }


  if (res.data.performWorkId) {
    res.data.performWorkId.split(',').forEach((v) => {
      workArr.value.indexOf(v) == -1 ? workArr.value.push(v) : null;
    });
    res.data.performWork = workArr.value
  } else {
    res.data.performWork = []
    res.data.performWorkId = ''
  }
  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
  }

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

  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;

  pageLoading.value = false;
};
//职称列表
const positionList = ref([]);
const getpositionList = async () => {
  const res = await listPosition();
  positionList.value = res.data;
};
watch(
  () => form.value.workExperience,
  (v: string) => {
    expertFormRef.value.validateField('workExperience');
  }
);
watch(
  () => form.value.workPluralistic,
  (v: string) => {
    expertFormRef.value.validateField('workPluralistic');
  }
);
onActivated(() => {
  getData();
  // form.value.id = route.query.id[0];
});

onMounted(() => {
  //获取职称等级列表
  getpositionList();
  getData();
  getExtractAreaOptions();
});
</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;
  height: 12vh;
  margin: 20px 0;
  :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: space-evenly;
  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-bottom: 10px;
  // 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;
  margin-bottom: 10px;
  .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;
  }
}
:deep(.el-descriptions__content) {
  padding: 15px 11px !important;
}
</style>
