<template>
  <div class="p-2" v-loading="pageLoading">

    <el-card shadow="hover">
      <el-backtop :right="100" :bottom="100" />
      <el-form ref="expertFormRef" :model="form">

        <el-descriptions title="专家个人资料" border>
          <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
            <el-image v-if="form.photograph" style="width: 100px; height: 100px" :src="form.photograph" />
            <img style="width: 60px;height:60px;" v-else src="@/assets/images/avatar.png" alt="">
          </el-descriptions-item>

          <el-descriptions-item label="姓名" align="left">
            <el-form-item prop="expertName">
              <el-input disabled v-model="form.expertName" placeholder="此处输入专家姓名" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="性别" align="left">
            <el-form-item prop="sex">
              <el-select disabled 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="身份证号" align="left">
            <el-form-item prop="idCard">
              <el-input disabled v-model="form.idCard" placeholder="此处输入身份证号" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="出生日期" align="left">
            <el-form-item prop="birthDate">
              <el-date-picker :clearable="false" disabled v-model="form.birthDate" type="date" placeholder="请选择出生日期"
                size="default" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="联系方式" align="left">
            <el-form-item prop="contact">
              <el-input disabled v-model="form.contact" placeholder="此处输入联系方式" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="籍贯" align="left">
            <el-form-item prop="origin">
              <el-input disabled
                        v-model="form.origin"
                        placeholder="此处输入籍贯" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="工作单位" align="left">
            <el-form-item prop="workUnit">
              <el-input disabled v-model="form.workUnit" placeholder="此处输入工作单位" />
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item label="是否单位推荐" align="left">
            <el-form-item prop="isRecommend">
              <el-radio-group disabled 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="职务" align="left">
            <el-form-item prop="duty">
              <el-input disabled v-model="form.duty" placeholder="此处输入职务" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item label="政治面貌" align="left">
            <el-form-item prop="politics">
              <el-select disabled 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 :span="2" label="职称等级" :width="160" align="left">
            <el-form-item prop="positionTitleLevel">
              <el-select disabled 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">
            <el-form-item prop="expertSources">
              <el-select v-model="form.expertSources"
                         placeholder="请选择专家来源"
                         disabled
                         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="2" label="毕业院校" align="left">
            <el-form-item prop="graduateSchool">
              <el-input disabled v-model="form.graduateSchool" placeholder="此处输入毕业院校" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="1" label="邮箱" align="left">
            <el-form-item prop="email">
              <el-input disabled v-model="form.email" placeholder="此处输入邮箱" />
            </el-form-item>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="现从事专业及年限" align="center">
            <div class="current-major">
              <el-form-item prop="workProfessial">
                <el-input disabled v-model="form.workProfessial" placeholder="此处输入现从事专业" style="width: 200px"/>
              </el-form-item>

              <el-form-item prop="workProfessialYear">
                <el-select disabled 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">
            <el-form-item prop="placeList">
              <div class="desidentialAaddress" style="width: 100%;display: flex;justify-content: flex-start;align-items: center">
                <el-cascader disabled style="" v-model="placeList" placeholder="请选择工作单位地址"
                  :options="placeOptions"
                  :props="{ label: 'name', value: 'code', children: 'codeName',expandTrigger: 'hover' as const }" />
                <el-input style="margin-left: 20px;width: 300px" disabled v-model="form.address" placeholder="此处输入详细地址" />
              </div>

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

          <el-descriptions-item :span="3" label="专业" align="center">
            <el-form-item prop="majorList">

              <div :class="'major-item'" v-for="(item, index) of form.majorList" :key="index">
                <el-input disabled v-model="item.major" placeholder="此处输入专业" />

                <el-select disabled 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>
              </div>

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

          <el-descriptions-item :span="3" label="专业技术资格及取得时间" align="center">
            <div :style="isHighLight.indexOf('专业技术资格及取得时间') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <div class="rich-item">
                <div v-if="form.professionalList.length != 0">
                  <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="暂无数据" />
              </div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="执业资格证书名称及注册号" align="center">
            <div :style="isHighLight.indexOf('执业资格证书名称及注册号') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <div class="rich-item">
                <div v-if="form.zjkExpertAwardsList.length != 0">
                  <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="暂无数据" />
              </div>
            </div>

          </el-descriptions-item>

          <el-descriptions-item :span="3" label="单位性质" align="center">
            <el-form-item prop="unitType">
              <el-radio-group disabled
                              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
                          v-model="form.unitTypeDescribe"
                          placeholder="此处输入单位性质其他内容" />
              </el-radio-group>
            </el-form-item>
          </el-descriptions-item>

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

                <el-input 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= true
                    >
                      {{ item.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-form-item>
          </el-descriptions-item>




          <el-descriptions-item :span="3" label="专业相关经历" align="center">
            <div
              :style="isHighLight.indexOf('主要工作经历') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <!-- <span v-if="isHighLight.indexOf('主要工作经历') != -1" class="change-tag">【修改】</span> -->
              <div class="rich-item">
                <el-empty v-if="form.workExperience == '' || form.workExperience == null"></el-empty>
                <div v-else class="rich-text" v-html="form.workExperience"></div>
              </div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="参与政务信息化项目评审情况" align="center">
            <div
              :style="isHighLight.indexOf('社会兼职情况') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <!-- <span v-if="isHighLight.indexOf('社会兼职情况') != -1" class="change-tag">【修改】</span> -->
              <div class="rich-item">
                <el-empty v-if="form.workPluralistic == '' || form.workPluralistic == null"></el-empty>
                <div v-else class="rich-text" v-html="form.workPluralistic"></div>
              </div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="论文" align="center">
            <div :style="isHighLight.indexOf('论文信息') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <div class="rich-item">
                <div v-if="form.zjkExpertPaperList.length != 0">
                  <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" :isEdit="false"
                        :fileName="scope.row.originalName" width="100%"
                          :dataList=[scope.row.url] height="60%" objectFit="cover">
                        </FileOrImage>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-empty v-else description="暂无数据" />
              </div>

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

          <el-descriptions-item :span="3" label="专利" align="center">
            <div :style="isHighLight.indexOf('专利信息') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <div class="rich-item">

                <div v-if="form.zjkExpertPatentList.length != 0">
                  <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" :isEdit="false" width="100%" :fileName="scope.row.originalName"
                          :dataList=[scope.row.url] height="60%" objectFit="cover">
                        </FileOrImage>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-empty v-else description="暂无数据" />
              </div>
            </div>
          </el-descriptions-item>

          <el-descriptions-item :span="3" label="其他附件(省直政务信息化专家申报表)" align="center">
            <div :style="isHighLight.indexOf('其他附件') == -1 ? 'position: relative;' : 'position: relative;;border-radius:0.4vw;'">
              <div class="rich-item">
                <el-container v-if="otherPathArr.length != 0">
                  <el-main>
                    <FileOrImage v-for="item in otherPathArr" :data="item.url" :isEdit="false":fileName="item.originalName" width="100%"
                      :dataList=[item.url] height="60%" objectFit="cover">
                    </FileOrImage>
                  </el-main>
                </el-container>
                <el-empty v-else description="暂无数据" />
              </div>
            </div>
          </el-descriptions-item>

        </el-descriptions>

        <div class="form-left">

          <!-- 待审批 -->
          <div class="approval" v-if="route.query.type == 'approval'">
            <div class="title">审批</div>

            <el-form-item label="审批类型：" style="padding: 2vh 0;">
              <span>{{ form.approvalType == 0 ? '专家申请' : '信息变更' }}</span>
            </el-form-item>

            <el-form-item label="审批意见：">
              <div class="approvalOpinionBox">
                <div class="approvalOpinionStatue">
                  <el-radio-group @change="changeValue" v-model="form.approvalValue">
                    <el-radio value="1" size="large" border>通过</el-radio>
                    <el-radio value="2" size="large" border>驳回</el-radio>
                  </el-radio-group>
                </div>
                <div class="approvalOpinion">
                  <el-input v-model="form.approvalOpinion" placeholder="此处输入审批意见" />
                </div>
              </div>

            </el-form-item>

          </div>

          <!-- 已审批 - 查看详情 -->
          <div class="approval" v-if="route.query.type == 'detail'">
            <div class="title">审批</div>

            <el-form-item label="审批类型：" style="padding: 1.5vh 0;">
              <span>{{ form.approvalType == 0 ? '专家申请' : '信息变更' }}</span>
            </el-form-item>

            <el-form-item label="审批意见：">

              <span>{{ form.remark ? form.remark : '/' }}</span>
            </el-form-item>

            <div class="app-btns">
              <p v-if="form.approvalValue == '1'">审批通过</p>
              <p v-if="form.approvalValue == '0'" style="background-color: #f56c6c;">审批驳回</p>
            </div>

          </div>

          <div class="form-buttons">
            <el-button v-if="route.query.businessStatus && route.query.businessStatus !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
            <el-button style="width: 12vw;" v-if="route.query.type == 'approval' && approvalType == '1'" plain
              type="warning" @click="contrast">对比</el-button>
            <el-button v-if="route.query.type == 'approval'" :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>

    <!-- 添加或修改资源管理对话框 -->
    <el-dialog :title="contrastDialog.title" v-model="contrastDialog.visible" width="50vw" append-to-body>
      <div class="dia-table">
        <el-table :data="changeList" style="width: 100%">
          <el-table-column align="center" prop="keyValue" label="字段" width="260" />
          <el-table-column align="center" prop="oldValue" label="修改前" width="260">
            <template #default="scope">
              <div v-if="typeof (scope.row.oldValue) == 'object'" style="">
                <div v-if="scope.row.keyValue == '执业资格证书名称及注册号'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) of scope.row.oldValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>执业资格证书名称：{{ item['执业资格证书名称'] }}</span>
                      <br>
                      <span>注册号：{{ item['注册号'] }}</span>
                    </p>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '论文信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) of scope.row.oldValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>论文名称：{{ item.txt1 }}</span>
                      <br>
                      <span>期刊号：{{ item.txt2 }}</span>
                    </p>
                    <FileOrImage v-if="item.url" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%" height="60%"
                      objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '专利信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) in scope.row.oldValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>发明创造名称：{{ item.txt1 }}</span>
                      <br>
                      <span>专利号：{{ item.txt2 }}</span>
                    </p>
                    <FileOrImage v-if="item.url" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%" height="60%"
                      objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '专业信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="i in scope.row.oldValue" style="width:100%;margin-right: 1vw;border-radius: 4px">
                    <p style="margin: 0;">
                      <span>学历：{{ i['学历'] }} ， 专业：{{ i['专业'] }}</span>
                    </p>
                    <!-- <p v-if="i.major">专业：{{ i.major }}</p>
                  <p v-if="i.degree">学历：{{ i.degree }}</p> -->
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '技术资格信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="item in scope.row.oldValue"
                    style="width:100%;margin-right: 1vw;border-radius: 4px">
                    <p style="margin: 0;">
                      <span>技术资格证书：{{ item['技术资格'] }}</span>
                      <br>
                      <span>取得时间：{{ item['技术资格取得时间'] }}</span>
                    </p>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '其他附件'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.oldValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else
                    style="width:100%;margin-right: 1vw;border-radius: 4px;display:flex;justify-content: space-between;flex-wrap: wrap">
                    <FileOrImage v-for="item in scope.row.oldValue" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%"
                      height="60%" objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>


              </div>
              <div v-else-if="scope.row.keyValue == '照片'">
                <img style="width: 100%;" :src="scope.row.oldValue" alt="">
              </div>
              <span v-else>{{ scope.row.oldValue }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="newValue" label="修改后" width="260">
            <template #default="scope">
              <div v-if="typeof (scope.row.newValue) == 'object'" style="">

                <div v-if="scope.row.keyValue == '其他附件'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else
                    style="width:100%;margin-right: 1vw;border-radius: 4px;display:flex;justify-content: space-between;flex-wrap: wrap">
                    <FileOrImage v-for="item in scope.row.newValue" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%"
                      height="60%" objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '执业资格证书名称及注册号'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) of scope.row.newValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>执业资格证书名称：</span>
                      <span>{{ item.awardsContent }}</span>
                      <br>
                      <span>注册号：{{ item.registerSn }}</span>
                    </p>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '论文信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) of scope.row.newValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>论文名称：{{ item.paperName }}</span>
                      <br>
                      <span>期刊号：{{ item.periodicalNumber }}</span>
                    </p>
                    <FileOrImage v-if="item.url" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%" height="60%"
                      objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '专利信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="(item, index) of scope.row.newValue" style="width:100%">
                    <p style="margin: 0;">
                      <span>{{ index + 1 }}：</span>
                      <span>发明创造名称：{{ item.nameInvention }}</span>
                      <br>
                      <span>专利号：{{ item.patentNumber }}</span>
                    </p>
                    <FileOrImage v-if="item.url" :fileName="item.originalName" :data="item.url" :isEdit="false" width="100%" height="60%"
                      objectFit="cover">
                    </FileOrImage>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '专业信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="i in scope.row.newValue" style="width:100%;margin-right: 1vw;border-radius: 4px">
                    <p style="margin: 0;">
                      <span>学历：{{ i['学历'] }} ， 专业：{{ i['专业'] }}</span>
                    </p>
                  </div>
                </div>

                <div v-if="scope.row.keyValue == '技术资格信息'" style="display: flex;width: 100%;flex-direction: column;">
                  <div v-if="scope.row.newValue.length == 0">
                    <span>/</span>
                  </div>
                  <div v-else v-for="item in scope.row.newValue"
                    style="width:100%;margin-right: 1vw;border-radius: 4px">
                    <!-- <span>{{ item }}</span> -->
                    <p style="margin: 0;">
                      <span>技术资格证书：{{ item['技术资格'] }}</span>
                      <br/>
                      <span>取得时间：{{ item['技术资格取得时间'] }}</span>
                    </p>
                  </div>
                </div>
              </div>
              <div v-else-if="scope.row.keyValue == '照片'">
                <img style="width: 100%;" :src="scope.row.newValue" alt="">
              </div>
              <span v-else>{{ scope.row.newValue }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 审批记录 -->
    <approvalRecord ref="approvalRecordRef" />
  </div>


</template>

<script setup name="Role" lang="ts">
import { getPerson,listPosition} from '@/api/expert/person/index';
import { listExpert, getExpert, getFile } 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 { ExpertInVO, ExpertInForm, ExpertInQuery } from '@/api/expert/in/types';
import { ApprovalVO, ApprovalForm, ApprovalQuery } from '@/api/expert/approval/types';
import { approvalExpert } from '@/api/expert/approval/index';
import $bus from '@/utils/mitt'
import { globalHeaders } from '@/utils/request';
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 buttonLoading = ref(false);
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
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 { unit_type } = toRefs<any>(proxy?.useDict('unit_type'));
const { is_recommend } = toRefs<any>(proxy?.useDict('is_recommend'));
const { expert_sources } = toRefs<any>(proxy?.useDict('expert_sources'));

const placeList = ref([null, null, null]);
const placeOptions = ref([]);


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


import { getArea } from '@/api/project/extract';
import ApprovalRecord from "@/components/Process/approvalRecord.vue";
const getExtractAreaOptions = async () => {
  let res = await getArea();
  if (res.code != 200) {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    });
    return;
  }
  placeOptions.value = res.data;
};

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

const contrastDialog = reactive<DialogOption>({
  visible: false,
  title: '信息变更对比'
});
const pageLoading = ref(true);
const route = useRoute();

const expertFormRef = ref<ElFormInstance>();
//审批记录组件
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

const initForm: ApprovalForm = {   //初始表单
  //左边
  expertName: '',//专家姓名
  sex: undefined,//性别
  birthDate: '',//出生年月
  contact: '',//联系方式
  idCard: '',//联系方式
  workUnit: '',//工作单位
  duty: '',//职务
  politics: '',//政治面貌
  graduateSchool: '',//毕业院校
  major: '',//专业
  majorList: [{ major: '', degree: '' }],//专业
  email: '',//邮箱
  isRecommend: '',//是否推荐
  unitType: '',//企业类型
  positionTitleLevel: '', // 职称等级
  expertSources: '', // 专家来源
  professional: '',//资格证书名称
  professionalAcquisitionDate: '',//资格证书取得时间
  workProfessial: '',//现从事专业
  workProfessialYear: '',//现从事年限

  //右边
  photograph: '',//照片
  performWork: [],//从事工作或研究领域
  performWorkId: '',//从事工作或研究领域
  professionalList: [{ professional: '', professionalDate: '' }],//资格证书取得时间
  otherDescribe: '',//其他领域描述
  workExperience: '',//专业相关经历
  workPluralistic: '',//社会兼职情况
  achievement: '',//主要论著、业绩成果及获奖情况
  paperpath: '',//论文
  patentpath: '',//专利
  approvalType: undefined,//审批类型
  approver: '',//审批人
  approvalValue: '',//审批选择
  approvalOpinion: '',//审批意见

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

  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' }],
    // idCard: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }],
    idCard: [
      { required: true, message: '身份证号不能为空', trigger: 'blur' },
      {
        validator: (_, value, callback) => {
          if (!value) return callback();
          if (!isValidIdCard(value)) {
            callback(new Error('请输入合法的身份证号'));
          } else {
            callback();
          }
        },
        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: 'blur' }],
    positionTitleLevel: [{ required: true, message: '职称等级不能为空', trigger: 'blur' }],
  }
});
function isValidIdCard(idCard) {
  idCard = idCard.trim();

  if (!/^\d{15}$|^\d{17}[\dXx]$/.test(idCard)) {
    return false;
  }

  // 身份证15位转18位（加校验码）
  if (idCard.length === 15) {
    idCard = idCard.replace(/(\d{6})(\d{6})(\d{3})/, (_, p1, p2, p3) => {
      const yearPrefix = parseInt(p2.substr(0, 2)) < 50 ? '20' : '19';
      return `${p1}${yearPrefix}${p2}${p3}`;
    });
    idCard = idCard + getCheckCode(idCard);
  }

  const year = parseInt(idCard.substr(6, 4), 10);
  const month = parseInt(idCard.substr(10, 2), 10);
  const day = parseInt(idCard.substr(12, 2), 10);

  if (!isValidDate(year, month, day)) {
    return false;
  }

  return idCard.toUpperCase().endsWith(getCheckCode(idCard));
}

// 校验日期是否合法（含闰年）
function isValidDate(year, month, day) {
  if (month < 1 || month > 12) return false;
  const daysInMonth = [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  return day >= 1 && day <= daysInMonth[month - 1];
}

function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

// 获取18位身份证校验码
function getCheckCode(id17) {
  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  const codes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
  const sum = id17
    .substr(0, 17)
    .split('')
    .reduce((acc, val, idx) => acc + parseInt(val) * weights[idx], 0);
  return codes[sum % 11];
}

const highLight = ref({});
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 dialogConfirm = () => {
  contrastDialog.visible = false;
}
const zlData = reactive({
  list: [],
  maxLength: 0
})
const { form, rules } = toRefs(data);
const imageUrl = ref('')

//对比前后数据
const contrast = () => {
  contrastDialog.visible = true;

  // if (isNew.value) {
  //   isHighLight.value.forEach(v => {
  //     form.value[v] = updateData.value[isHighLight.value.indexOf(v)];
  //   })
  //   isNew.value = false;
  // } else {
  //   isHighLight.value.forEach(v => {
  //     form.value[v] = resData.value[isHighLight.value.indexOf(v)];
  //   })
  //   isNew.value = true;
  // }

}

//单选框改变
const changeValue = (value) => {
  value == '1' ? form.value.approvalOpinion = '同意' : form.value.approvalOpinion = '';
}
//返回
const jumpBack = () => {
  form.value.approvalValue = '';
  form.value.approvalOpinion = '';
  router.back()
}

//checkbox更改事件
const boxChange = (value) => {
  if (value.indexOf("18") != -1) {
    otherInputDisable.value = false;
  } else {
    otherInputDisable.value = true;
  }

}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

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

/** 提交按钮 */
const submitForm = () => {
  console.log(form);
  if (form.value.approvalValue == '') {
    ElMessageBox.alert('请选择审批意见！', '提示', {
      confirmButtonText: '确定',
      callback: () => {
      },
    })
    return
  } else if (form.value.approvalValue == '2' && form.value.approvalOpinion == '') {
    ElMessageBox.alert('请输入审批意见！', '提示', {
      confirmButtonText: '确定',
      callback: () => {
        // ElMessage({
        //     type: 'info',
        //     message: ``,
        // })
      },
    })
    return
  }

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

      await approvalExpert({ id: route.query.id, approvalStatus: form.value.approvalValue, reason: form.value.approvalOpinion }).finally(() => buttonLoading.value = false);
      form.value.approvalValue = '';
      form.value.approvalOpinion = '';
      proxy?.$modal.msgSuccess("操作成功");
      //   form.value.performWorkId = form.value.performWork.join(',');
      //   delete form.value.performWork;

      //   await updateExpert(form.value).finally(() => buttonLoading.value = false);
      // } else {

      //   form.value.performWorkId = form.value.performWork.join(',');
      //   delete form.value.performWork;

      //   await addExpert(form.value).finally(() => buttonLoading.value = false);
      // }
      //   dialog.visible = false;
      //   await getList();

      router.back();
    }
  });
};

const isHighLight = ref([]);
const updateData = ref([]);
const newData = ref([]);
const changeList = ref([]);
const otherPathArr = ref([]);
const getData = async () => {
  const res = await getExpert(route.query.id.toString());
  //其他附件
  if (res.data.otherPathList && Array.isArray(res.data.otherPathList)) {
    if(res.data.otherPathList.length != 0){
      otherPathArr.value = res.data.otherPathList;
    }
  }
  if (res.data.modifiedFields?.length) {
    changeList.value = [];
    changeList.value.length = 0;
    if (res.data.modifiedFields?.length != 0) {
      let beforeData = JSON.parse(res.data.modifiedFields).beforeOper;
      isHighLight.value.push(...Object.keys(JSON.parse(res.data.modifiedFields).afterOper));
      newData.value.push(...Object.values(JSON.parse(res.data.modifiedFields).afterOper)); //改之后的新数据
      // updateData.value.push(...Object.values(beforeData)); //改之前的旧数据
      // updateData.value.push(...Object.values(JSON.parse(res.data.modifiedFields).beforeOper)); //改之前的旧数据
      for(let k in beforeData){
        if(k == '其他附件'){
          if (beforeData[k].length > 0) {
            if (beforeData[k] !== 'undefined') {
              const otherFileRes = await getFile(beforeData[k]);
              updateData.value.push(otherFileRes.data)
            }

          }
        }else if(k == '执业资格证书名称及注册号'){
          if (beforeData[k].length > 0) {
            let awardsTxt = [];
            beforeData[k].forEach((e,i) => {
              awardsTxt.push({
                '执业资格证书名称': e['执业资格证书名称'],
                '注册号': e['注册号']
              })
            });
            updateData.value.push(awardsTxt);
          }
        }else if(k == '论文信息'){
          if (beforeData[k].length > 0) {
            let ossIds = '';
            let paperTxt = [];
            beforeData[k].forEach((e,i) => {
              paperTxt.push({paper1:e['论文名称'] , paper2:e['期刊号']});
              i == beforeData[k].length - 1 ? ossIds += e['论文附件'] :
                ossIds = ossIds + e['论文附件'] + ',';
            });
            if (ossIds !== 'undefined') {
              const paperFilesRes = await getFile(ossIds);
              paperFilesRes.data.map((e,i)=>{
                e.txt1 = paperTxt[i].paper1;
                e.txt2 = paperTxt[i].paper2;
                return e
              });
              updateData.value.push(paperFilesRes.data);
            }

          }

        }else if(k == '专利信息'){

          if (beforeData[k].length > 0) {
            let ossIds = '';
            let papentTxt = [];
            beforeData[k].forEach((e,i) => {
              papentTxt.push({txt1:e['发明创造名称'] , txt2:e['专利号']});
              i == beforeData[k].length - 1 ? ossIds += e['专利附件'] :
                ossIds = ossIds + e['专利附件'] + ',';
            });
            if (ossIds !== 'undefined') {
              const papentFilesRes = await getFile(ossIds);
              papentFilesRes.data.map((e,i)=>{
                e.txt1 = papentTxt[i].txt1;
                e.txt2 = papentTxt[i].txt2;
                return e
              });
              updateData.value.push(papentFilesRes.data);
            }

          }
        }else{
          updateData.value.push(beforeData[k]); //改之前的旧数据
        }
      }
      highLight.value = JSON.parse(res.data.modifiedFields).afterOper;

      isHighLight.value.forEach((v, i) => {
        if (changeList.value.findIndex(item => item.keyValue == v) == -1) {


          if (v != '状态' && v != '是否启用') {
            if (v == '其他附件') {
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: res.data.otherPathList });
            }else if(v == '执业资格证书名称及注册号'){
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: res.data.zjkExpertAwardsList });
            }else if(v == '论文信息'){
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: res.data.zjkExpertPaperList });
            }else if(v == '专利信息'){
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: res.data.zjkExpertPatentList });
            } else if (v == '专家来源'){
              const findData = expert_sources.value.find(fitem => fitem.value === res.data.expertSources.toString())
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: findData ? findData.label: '' });
            } else if (v == '职称等级'){
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: res.data.positionTitleLevelStr });
            } else {
              changeList.value.push({ keyValue: v, oldValue: updateData.value[i], newValue: newData.value[i] });
            }
          }
        }
      });
    }
  }




  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: '' }];
  }


  placeList.value[0] = res.data.province == null ? undefined : res.data.province;
  placeList.value[1] = res.data.city == null ? undefined : res.data.city;
  placeList.value[2] = res.data.area == null ? undefined : res.data.area;

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

  lwList.value = res.data.paperpath?.split(',');
  zlList.value = res.data.patentpath?.split(',');
  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;

}
//审批记录
const handleApprovalRecord = () => {
  approvalRecordRef.value.init(route.query.businessKey.toString(), route.query.processInstanceId.toString());
};

onActivated(() => {
  changeList.value = [];
  getData();
});

onMounted(() => {
  //获取职称等级列表
  getpositionList();
  getExtractAreaOptions();
  getData();
})

</script>

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

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

.form-left {
  width: 100%;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  // .el-form-item:nth-child(11){
  // &>div:nth-child(2){

  // }
  // }
}


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

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

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

  .el-form-item:nth-child(1) {
    width: 52.5%;
  }

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


: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 {
  border: 1px solid #798897;
  background-color: #ffffff;
  position: relative;
  border-radius: 8px;
  padding: 1vw;
  padding-bottom: 1vh;
  margin-top: 1vh;
  width: 100%;
  .approvalOpinionBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    .approvalOpinionStatue{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .approvalOpinion {
      width: 100%;
      margin: 20px 0;
      :deep(.el-input__wrapper) {
        width: 100% !important;
        color: #333 !important;
        box-shadow: 0 0 0 1px #dcdfe6 !important;
        background: #ffffff !important;
      }
    }
  }

  .title {
    position: relative;
    padding-left: 1.5vw;
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .title::before {
    content: "";
    width: 5px;
    height: 20px;
    display: block;
    position: absolute;
    left: 0;
    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 {
  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;
  }
}

.switch {
  position: absolute;
  left: -30%;
  top: 2.5vh;
  color: #36d;
  cursor: pointer;
}

.switch:hover {
  text-decoration: underline;
}

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

  :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%;
  }
}

.paper-item {
  width: 100%;
  padding-right: 4vw;
  position: relative;
  margin-top: 1vh;

  &>div {
    margin-bottom: 0.5vh;
  }

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

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

}

.change-tag {
  position: absolute;
  font-size: 12px;
  color: red;
  left: 18%;
  top: 50%;
}


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

.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;
  // border-bottom: 0.5px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

}

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

.dia-table {
  :deep(.el-table--default) {
    display: flex;
    justify-content: center;
  }
}
.el-descriptions{
  --el-descriptions-table-border:1px solid #798897;
}
.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;
}

.desidentialAaddress {
  :deep(.el-select__wrapper) {
    width: 100%;
    // border: none !important;
    // box-shadow: none !important;
  }
}
:deep(.el-form-item__error) {
  padding-left: 10px;
}
</style>
