<template>
  <div class="p-2" v-loading="loading">
    <el-card v-if="submitStatus == 'none' || ''" shadow="hover" v-clock>
      <el-empty description="暂无资料信息"></el-empty>
    </el-card>

    <el-card v-else-if="submitStatus != 'none'" shadow="hover" v-clock>

      <el-backtop :right="100" :bottom="100" />

      <el-descriptions title="专家个人资料" border style="position: relative">
        <template #extra>
          <div class="btns">
            <span style="margin-right: 4vw">当前状态：<b
                :style="status == 0 ? 'color:#36d' : status == 1 ? 'color:#36d' : status == 2 ? 'color:#36d' : 'color:#f56c6c'">【{{
                  status == 0 ? '已暂存' : status == 1 ? '待审批' : status == 2 ? '已通过' : status == 3 ? '被驳回' : status == 4 ?
                    '已离职' : '' }}】</b>
            </span>
            <span v-if="status == 3" style="color: #f56c6c;margin-right: 4vw;">驳回意见：{{ remark }}</span>
            <el-button v-if="status == 2 || (status == 3 && approvalType == 1)" @click="updateInfo"
              type="primary">信息变更</el-button>
            <el-button v-if="status == 1 && approvalType == 1" @click="revocation" type="primary">撤销</el-button>
            <el-button style="margin-left: 2vw;"
              v-if="(approvalType == 1 && status < 4) || (approvalType == 0 && status == 2)" @click="openResignDialog"
              type="primary">离职申请</el-button>
          </div>
        </template>

        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
          <el-image v-if="dataList.photograph" style="width: 100px; height: 100px" :src="dataList.photograph" />
          <img style="width: 60px;height:60px;" v-else src="@/assets/images/avatar.png" alt="">

        </el-descriptions-item>
        <el-descriptions-item label="姓名" align="center">{{ dataList.expertName }}</el-descriptions-item>
        <el-descriptions-item label="性别" align="center">{{ dataList.sex == 0 ? '男' : '女'
          }}
        </el-descriptions-item>
        <el-descriptions-item label="身份证号" align="center">
          {{ dataList.idCard }}
        </el-descriptions-item>
        <el-descriptions-item label="出生日期" align="center">
          {{ parseTime(dataList.birthDate, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式" align="center">{{ dataList.contact }}</el-descriptions-item>
        <el-descriptions-item label="籍贯" align="center">
          {{ dataList.origin }}
        </el-descriptions-item>
        <el-descriptions-item label="工作单位" align="center">
          {{ dataList.workUnit }}
        </el-descriptions-item>
        <el-descriptions-item label="是否单位推荐" align="center">
          {{ is_recommend[parseInt(dataList.isRecommend) - 1]?.label }}
        </el-descriptions-item>
        <el-descriptions-item label="职务" align="center">
          {{ dataList.duty }}
        </el-descriptions-item>
        <el-descriptions-item label="政治面貌" align="center">
          {{ dataList.politics == 1 ? '中共党员'
            : dataList.politics == 2 ? '中共预备党员' : dataList.politics == 3 ? '共青团员' : dataList.politics == 4 ?
              '民主党派成员' : '群众' }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" min-width="200px" label="职称等级" align="center">
          <span class="major-item">{{ dataList.positionTitleLevelStr ? dataList.positionTitleLevelStr : '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :span="2" min-width="200px" label="专家来源" align="center">
          <span class="major-item">{{ dataList.expertSources ? expert_sources[parseInt(dataList.expertSources) -
            1]?.label :
            '-'}}</span>
        </el-descriptions-item>
        <el-descriptions-item :span="1" label="毕业院校" align="center">
          {{ dataList.graduateSchool }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱" align="center">
          {{ dataList.email }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="现从事专业及年限" align="center">
          {{ dataList.workProfessial }} -
          {{ dataList.workProfessialYear == 1 ? '5年及以下' : dataList.workProfessialYear == 2 ?
          '6-10年' : dataList.workProfessialYear == 3 ? '11-20年' : dataList.workProfessialYear == 4 ? '20年以上' : '' }}
        </el-descriptions-item>
        <el-descriptions-item label="工作单位地址" align="center">
          {{ cityResult }}
        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="专业/学历" align="center">
          <template v-if="dataList.majorList[0]?.major != null || dataList.majorList[0]?.major != ''">
            <div  v-for="item in dataList.majorList" :key="item">
              <span v-if="item.major != null && item.degree != null ">{{degree_type[parseInt(item.degree) - 1]?.label}}({{ item.major }})<br></span>
            </div>
          </template>
          <template v-else>
            <el-empty ></el-empty>
          </template>

        </el-descriptions-item>
        <el-descriptions-item :span="3" label="专业技术资格及取得时间" align="center">
          <el-form-item prop="professional">
            <template v-if="dataList.professionalList.length > 0 && dataList.professionalList[0].professional !== ''">
              <el-table :data="dataList.professionalList" style="width: 100%">
                <el-table-column align="center" prop="professional" label="资格证书名称"/>
                <el-table-column align="center" prop="professionalDate" label="取得时间"/>
              </el-table>
            </template>
            <div class="emptyBox"  v-else >
              <el-empty description="暂无数据" />
            </div>

          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="执业资格证书名称及注册号" align="center">

          <div v-if="dataList.zjkExpertAwardsList.length != 0">

            <el-table :data="dataList.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">
          <el-form-item prop="unitType">
            <el-radio-group disabled
                            v-model="dataList.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="width:300px;margin:5px 0;"
                        disabled
                        v-if="dataList.unitType === '8'"
                        v-model="dataList.unitTypeDescribe"
                        placeholder="此处输入单位性质其他内容" />
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item :span="3" label="从事工作或研究领域" align="center">
          <el-tag style="margin-right:20px;" v-for="(item, index) of workArr" type="primary">{{
            perform_work_type.find(fitem => fitem.value === item)?.label }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="专业相关经历" align="center">
          <div style="text-align: left" v-if="dataList.workExperience" v-html="dataList.workExperience"></div>
          <el-empty v-else></el-empty>
        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="参与政务信息化项目评审情况" align="center">
          <div style="text-align: left" v-if="dataList.workPluralistic" v-html="dataList.workPluralistic"></div>
          <el-empty v-else></el-empty>
        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="论文" align="center">

          <div v-if="dataList.zjkExpertPaperList.length != 0">

            <el-table :data="dataList.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="90%"
                    :dataList=[scope.row.url] height="60%" objectFit="cover">
                  </FileOrImage>
                </template>
              </el-table-column>
            </el-table>

          </div>

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

        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="专利" align="center">

          <div v-if="dataList.zjkExpertPatentList.length != 0">

            <el-table :data="dataList.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="90%"
                    :dataList=[scope.row.url] height="60%" objectFit="cover">
                  </FileOrImage>
                </template>
              </el-table-column>
            </el-table>

          </div>

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

        </el-descriptions-item>
        <el-descriptions-item :span="3" min-width="200px" label="其他附件(省直政务信息化专家申报表)" align="center">

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


          <el-empty v-else description="暂无数据" />
        </el-descriptions-item>
      </el-descriptions>
      <div class="form-buttons">
        <el-button v-if="route.query.businessStatus && route.query.businessStatus !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
      </div>
    </el-card>

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

    <!-- 离职申请dialog -->
    <el-dialog v-model="resignDialog" title="离职申请" width="600" :before-close="handleClose">
      <div class="resign">

        <el-form-item label="离职原因：">
          <el-input v-model="resignReason" placeholder="请输入离职原因" />
        </el-form-item>

        <el-form-item label="上传附件：">
          <el-upload ref="uploadResignRef" v-model="resignFile" :limit="1"
            accept=".pdf, .jpg, .png, .xlsx, .xls, .doc, .docx" :headers="upload.headers" :action="upload.url"
            :on-success="handleResignSuccess" :auto-upload="true" drag>
            <el-icon class="el-icon--upload">
              <i-ep-upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
              <div class="text-center el-upload__tip">
                <span>允许上传pdf、jpg、png、xlsx、xls、doc、docx格式文件。</span>
              </div>
            </template>
          </el-upload>
        </el-form-item>

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="dimission">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 审批记录 -->
    <approvalRecord ref="approvalRecordRef" />
  </div>
</template>

<script setup name="Role" lang="ts">
// import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from '@/api/system/role';

import { listPerson, getPerson, delPerson, addPerson, updatePerson, repeal, toResign } from '@/api/expert/person/index';
import { RoleVO, RoleForm, RoleQuery, DeptTreeOption } from '@/api/system/role/types';
import { MenuTreeOption, RoleMenuTree } from '@/api/system/menu/types';

import { ExpertInVO, ExpertInForm, ExpertInQuery } from '@/api/expert/in/types';
import { ExpertVO, ExpertForm, ExpertQuery } from '@/api/expert/expert/types';
import $bus from '@/utils/mitt';
import { globalHeaders } from '@/utils/request';

import { getToken } from '@/utils/auth';

import useUserStore from '@/store/modules/user';
import usePersonStore from '@/store/modules/person';
import FileOrImage from '@/components/FileOrImage/index.vue';

import {getCity, getRegionName} from '@/api/project/extract';

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 { approval_status } = toRefs<any>(proxy?.useDict('approval_status'));
const { sys_user_sex } = toRefs<any>(proxy?.useDict('sys_user_sex'));
const { perform_work_type } = toRefs<any>(proxy?.useDict('perform_work_type'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));
const { money_type } = toRefs<any>(proxy?.useDict('money_type'));
const { expert_sources } = toRefs<any>(proxy?.useDict('expert_sources'));

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 dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const menuOptions = ref<MenuTreeOption[]>([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref<DeptTreeOption[]>([]);
const openDataScope = ref(false);
const route = useRoute();

const userStore = useUserStore();

const userId = useUserStore().userId;

const dataList = ref({
  expertId: undefined,
  expertName: '',
  sex: undefined,
  birthDate: '',
  idCard: '',
  contact: '',
  unitType: '',
  workUnit: '',
  isRecommend: '',
  duty: '',
  politics: undefined,
  graduateSchool: '',
  // major: '',
  majorList: [],
  email: '',
  positionTitleLevel: '',
  positionTitleLevelStr: '',
  expertSources: '',
  professional: '',
  professionalAcquisitionDate: '',
  workProfessial: '',
  workProfessialYear: undefined,
  photograph: '',
  performWorkId: undefined,
  otherDescribe: '',
  workExperience: '',
  workPluralistic: '',
  achievement: '',
  paperpath: undefined,
  patentpath: undefined,
  professionalList: [{ professional: '', professionalDate: '' }],//资格证书取得时间
  zjkExpertAwardsList: [],
  zjkExpertPaperList: [],
  zjkExpertPatentList: [],

  unitTypeDescribe: '',
  origin: '', // 籍贯
})

const submitStatus = ref('none');

import { PersonForm } from '@/api/expert/person/types';
import ApprovalRecord from "@/components/Process/approvalRecord.vue";
const status = ref<any>();
const approvalType = ref<any>();
const remark = ref<any>();
const lwList = ref([]);
const zlList = ref([]);
const workArr = ref([]);
const cityResult = ref('');
const { unit_type, is_recommend } = toRefs<any>(proxy?.useDict('unit_type', 'is_recommend'));

const otherPathArr = ref([]);
const getData = async () => {
  workArr.value = [];

  if (workArr.value.length != 0) {
    workArr.value = [];
    return;
  }

  const res = await getPerson(userId);
  console.log(res)
  if (res.data.province) {
    const params = {
      provinceId: res.data.province,
      cityId: res.data.city,
      areaId: res.data.area
    }
    const cityList = await getRegionName(params);
    if (cityList.data) {
      cityResult.value = (cityList.data.provinceName ? cityList.data.provinceName+ '-' : '') + (cityList.data.districtName ? cityList.data.districtName+ '-':'') + (cityList.data.cityName ? cityList.data.cityName : '')
    }
  }

  if (res.data.expertId == null) {
    loading.value = false;
    submitStatus.value = 'none';
    return;
  }

  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.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 = ''
  }

  form.value.expertName = res.data.expertName
  form.value.contact = res.data.contact


  if (res.data.paperpath) {
    lwList.value = res.data.paperpath.split(',');
  }

  if (res.data.patentpath) {
    lwList.value = res.data.patentpath.split(',');
  }

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

  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;

  submitStatus.value = 'has';

  if (res.data.status !== null) {
    Object.assign(dataList.value, res.data)
  }
  loading.value = false;
};

/** 数据范围选项*/
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 uploadResignRef = ref<ElUploadInstance>();
const menuRef = ref<ElTreeInstance>();
const deptRef = ref<ElTreeInstance>();

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

const initForm: PersonForm = {
  //初始表单
  //左边
  expertName: '', //专家姓名
  sex: undefined, //性别
  birthDate: '', //出生年月
  contact: '', //联系方式
  workUnit: '', //工作单位
  duty: '', //职务
  politics: undefined, //政治面貌
  graduateSchool: '', //毕业院校
  major: '', //专业
  email: '', //邮箱

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

  //右边
  photograph: '', //照片
  performWork: [], //从事工作或研究领域
  performWorkId: '', //从事工作或研究领域
  otherDescribe: '', //其他领域描述
  workExperience: '', //专业相关经历
  workPluralistic: '', //参与政务信息化项目评审情况
  achievement: '', //主要论著、业绩成果及获奖情况
  paperpath: '', //论文
  patentpath: '', //专利
  status: 0,
  approvalType: 0
};
const data = reactive<PageData<ExpertForm, ExpertQuery>>({
  form: { ...initForm },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    expertName: '',
    contact: '',
    workUnit: '',
    status: 0
  },
  rules: {
    expertName: [{ required: true, message: '专家姓名不能为空', trigger: 'blur' }],
    sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
    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' }]
  }
});

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 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 updateInfo = () => {
  router.push({ path: '/expert/person', query: { mode: 'true' } });
  // router.push({ path: '/person/person', query: { mode: 'true' } })
};

//撤销
const revocation = () => {
  ElMessageBox.confirm('确认撤销当前信息变更吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await repeal();
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: `撤销操作成功！`
        });
        getData();
      }
    })
    .catch(() => { });
};
//上传失败
const handleUploadError = (err: any) => {
  proxy?.$modal.msgError('上传文件失败');
};

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

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

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

//离职
const resignReason = ref('');
const resignFile = ref('');
const resignDialog = ref(false);
const handleResignSuccess = (response: any, file: UploadFile, uploadFiles: UploadFiles) => {
  resignFile.value = response.data.url;
  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '上传离职申请附件结果', {
    dangerouslyUseHTMLString: true
  });
}
const handleClose = () => {
  resignFile.value = '';
  resignReason.value = '';
  resignDialog.value = false;
}
const openResignDialog = () => {
  resignDialog.value = true;
}
const dimission = async () => {

  ElMessageBox.confirm('确认提交离职申请吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(async () => {
      if (resignReason.value == '') {
        ElNotification({
          title: '提示',
          message: '离职原因不能为空',
          type: 'error',
        })
        return
      }
      // if (resignFile.value == '') {
      //   ElNotification({
      //     title: '提示',
      //     message: '离职附件不能为空',
      //     type: 'error',
      //   })
      //   return
      // }

      let data = {
        reason: resignReason.value,
        filePath: resignFile.value
      };
      const res = await toResign(data).finally(() => { })
      if (res.code == 200) {
        ElNotification({
          title: '提示',
          message: '操作成功',
          type: 'success',
        })
        handleClose();
        getData();
      } else {
        ElNotification({
          title: '提示',
          message: `${res.msg}`,
          type: 'error',
        });
      }
      // res.code == 200 ?
      //   ElNotification({
      //     title: '提示',
      //     message: '操作成功',
      //     type: 'success',
      //   })
      //   :
      //   ElNotification({
      //     title: '提示',
      //     message: `${res.msg}`,
      //     type: 'error',
      //   })

    })
    .catch(() => { });

}

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 submitForm = () => {
  expertFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      if (form.value.expertId) {
        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);
      }
      proxy?.$modal.msgSuccess('操作成功');
      //   dialog.visible = false;
      //   await getList();

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

//审批记录
const handleApprovalRecord = () => {
  console.log(route.query)
  approvalRecordRef.value.init(route.query.businessKey.toString(), route.query.processInstanceId.toString());
};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;

  router.back();
};
onBeforeMount(async () => {
  if (route.query.id) {
    // const res = await getExpert(route.query.id.toString());
    // 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);
  }
});

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


onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.p-2 {
  height: 100%;
  padding-left: 1vw;
}

.form-left,
.form-right {
  width: 49%;
  height: 85vh;
  font-size: 2rem;
}

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

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

// .form-right {}

.form-buttons {
  width: 50%;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
}

.current-major {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;

  // overflow: hidden;
  .el-form-item:nth-child(1) {
    width: 80%;
  }

  .el-form-item:nth-child(2) {
    :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;
}

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

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

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

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

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

.el-button {
  width: 6vw;
}

:deep(.el-card) {
  padding-left: 0.5vw;
}

.top-1 {
  display: flex;
  height: 8vw;

  position: relative;

  .btns {
    position: absolute;
    top: 1vh;
    right: 4vw;
  }

  .avatar {
    height: 100%;
    width: 7vw;
    border: 1px solid #8c939d;

    img {
      width: 100%;
      height: 100%;
      display: block;
      margin: 0 auto;
      object-fit: cover;
    }
  }

  .user {
    font-size: 1.2rem;
    margin-left: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .tags {
    padding-top: 1vh;
    display: flex;
    width: 40vw;
    flex-wrap: wrap;

    :deep(.el-tag) {
      height: 4vh;
      line-height: 4vh;
      display: block;
      margin-left: 1vw;
      font-size: 1.2rem;
      padding: 0 15px;
    }
  }
}

.top-2 {
  margin-top: 2vh;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  font-size: 1.2rem;

  p:nth-child(1) {
    margin-left: 0;
  }

  p {
    font-size: 1rem;
    margin-left: 4vw;
    margin-bottom: 1vh;
  }
}

.top-3 {
  .item {
    margin-top: 1.5vh;

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

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

    p {
      // background-color: #f2f2f2;
      // padding: 1vw;
      border-radius: 7px;
    }
  }
}

p {
  margin-top: 0 !important;
  margin-bottom: 0;
}

.major-item {
  padding-right: 1vw;
  position: relative;
}

.major-item::before {
  content: '、';
  width: 5px;
  height: 20px;
  display: block;
  position: absolute;
  right: 0.5vw;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
}

.major-item:last-child::before {
  content: '';
}

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

.award-item {
  width: 20%;
  align-items: center;
  padding-right: 4vw;
  position: relative;
  margin-top: 1vh;

  p {
    padding-left: 1vw;
    margin-bottom: 1vh;
    text-wrap: nowrap;
  }
}

.paper-item {
  width: 20%;
  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%;
  }
}

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

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

.resign {
  :deep(.el-upload) {
    border-radius: 0;
  }
}

.el-descriptions {
  --el-descriptions-table-border: 1px solid #798897;
}
.profession-item {
  display: flex;
  margin-top: 20px;
}
.emptyBox {
  margin: 0 auto;
}
</style>
