<template>
  <div class="p-2" v-loading="loading">
    <el-tabs v-model="activeTab" class="demo-tabs" @tab-change="handleSwitch">
      <el-tab-pane label="基本信息" name="basicInfo" v-loading="detailLoading">
        <el-card shadow="hover" v-clock>
          <el-descriptions title="" border>
            <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: 80px; height: 80px" 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">
              <el-tag v-for="(item, index) of workArr" type="primary">{{ perform_work_type[item]?.label }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="性别" align="center">{{ dataList.sex == 0 ? '男' : '女' }}</el-descriptions-item>

            <el-descriptions-item label="联系方式" align="center">{{ dataList.contact }}</el-descriptions-item>
            <el-descriptions-item label="工作单位" align="center">
              {{ dataList.workUnit }}
            </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.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 label="工作单位地址" align="center">
              {{ cityResult }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱" align="center">
              {{ dataList.email }}
            </el-descriptions-item>
            <el-descriptions-item label="毕业院校" align="center">
              {{ dataList.graduateSchool }}
            </el-descriptions-item>
            <el-descriptions-item label="籍贯" align="center">
              {{ dataList.origin }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="现从事专业及年限" align="center">
              {{ dataList.workProfessial }} {{ 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 min-width="200px" label="专业/学历" align="center">
              <span class="major-item" v-for="item in dataList.majorList">{{ item.major }} - {{
                degree_type[parseInt(item.degree) - 1]?.label }}</span>
            </el-descriptions-item>
          </el-descriptions>

          <div class="top-3">
            <div class="item">
              <div class="title">主要工作经历：</div>
              <p>{{ dataList.workExperience == null ? '空' : dataList.workExperience }}</p>
              <!-- <p>
                信息院公司

                2010 09-至今

                带领团队完成数据治理平台，山西省政务云等多个大型项目带领团队完成数据治理平台，山西省政务云等多个大型项目带领团队完成数据治理平台，山西省政务云等多个大型项目带领团队完成数据治理平台，山西省政务云等多个大型项目
            </p> -->
            </div>
            <div class="item">
              <div class="title">社会兼职情况：</div>
              <p>{{ dataList.workPluralistic == null ? '空' : dataList.workPluralistic }}</p>
            </div>
            <div class="item">
              <div class="title">执业资格证书名称及注册号：</div>

              <!-- <p>{{ dataList.achievement == null ? '空' : dataList.achievement }}</p> -->

              <div style="display: flex">
                <div class="award-item" v-for="(item, index) of dataList.zjkExpertAwardsList" :key="index">
                  <p>{{ item.awardsContent }}</p>
                  <p>{{ item.registerSn }}</p>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="title">论文：</div>

              <div style="display: flex">
                <div class="paper-item" v-for="(item, index) of dataList.zjkExpertPaperList" :key="index">
                  <div>
                    <p>论文名称：{{ item.paperName }}</p>
                    <p>期刊号：{{ item.periodicalNumber }}</p>
                  </div>

                  <FileOrImage :data="item.paperPath" :isEdit="false" width="120px" :dataList="[item.paperPath]"
                    height="100px" objectFit="cover">
                  </FileOrImage>
                </div>
              </div>
            </div>

            <div class="item">
              <div class="title">专利：</div>

              <div style="display: flex">
                <div class="paper-item" v-for="(item, index) of dataList.zjkExpertPatentList" :key="index">
                  <div>
                    <p>发明创造名称：{{ item.nameInvention }}</p>
                    <p>专利号：{{ item.patentNumber }}</p>
                  </div>

                  <FileOrImage :data="item.patentPath" :isEdit="false" width="120px" :dataList="[item.patentPath]"
                    height="100px" objectFit="cover">
                  </FileOrImage>
                </div>
              </div>
            </div>

            <div class="item">
              <div v-if="dataList.zjkAnnualInspection.annualInspectionStatus != '1'" class="inspection">
                <p>年检审核：</p>
                <el-form-item label="年检方式：" label-width="12vw">
                  {{ dataList.zjkAnnualInspection.annualInspectionType == '1' ? '人工年检' : '自动年检' }}
                </el-form-item>
                <el-form-item label="审核人：" label-width="12vw">
                  {{ dataList.zjkAnnualInspection.annualInspectionType == '2' ? '系统自动审核' :
                    dataList.zjkAnnualInspection.updateBy }}
                </el-form-item>
                <el-form-item label="审核时间：" label-width="12vw">
                  {{ dataList.zjkAnnualInspection.auditTime }}
                </el-form-item>
                <el-form-item label="审核结果：" label-width="12vw">
                  {{
                    dataList.zjkAnnualInspection.annualInspectionStatus == '1'
                      ? '待年检'
                      : dataList.zjkAnnualInspection.annualInspectionStatus == '2'
                        ? '已通过'
                        : '未通过'
                  }}
                </el-form-item>
                <el-form-item label="驳回理由：" label-width="12vw">
                  {{ dataList.zjkAnnualInspection.reason }}
                </el-form-item>
              </div>

              <div
                v-if="dataList.zjkAnnualInspection.annualInspectionType == '1' && dataList.zjkAnnualInspection.annualInspectionStatus == '1'"
                class="inspection">
                <p>年检审核：</p>
                <el-form-item label="年检方式：" label-width="12vw"> 人工年检 </el-form-item>
                <el-form-item label="年检审批：" label-width="12vw">
                  <el-radio-group @change="changeValue" v-model="radioSel">
                    <el-radio value="2">通过</el-radio>
                    <el-radio value="3">不通过</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="审批意见：" label-width="12vw">
                  <el-input v-model="opinion" placeholder="此处输入审批意见" />
                </el-form-item>
              </div>
            </div>
          </div>

          <div v-if="dataList.zjkAnnualInspection.annualInspectionStatus == '1'" class="btn">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="合作项目" name="cooProject" v-loading="cooLoading">
        <el-table v-loading="loading" :data="cooProjectList">
          <el-table-column type="index" label="序号" width="80" align="center">
            <template #default="scope">
              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目编号" align="center" prop="productSn" />
          <el-table-column label="项目名称" align="center" prop="productName">
            <template #default="scope">
              <span @click="jumpToProDetail(scope.row)" style="color: #36d; cursor: pointer">{{ scope.row.productName
                }}</span>
            </template>
          </el-table-column>

          <el-table-column label="项目负责单位" align="center" prop="productUnit" />
          <el-table-column label="负责人" align="center" prop="unitBy" />
          <el-table-column label="联系电话" align="center" prop="unitConcat" />
          <el-table-column label="评审阶段" align="center" prop="reviewSn">
            <template #default="scope">
              <dict-tag :options="item_stage" :value="scope.row.reviewSn" />
            </template>
          </el-table-column>
          <el-table-column label="评审时间" align="center" prop="reviewTime" width="180">
            <template #default="scope">
              <span>{{ parseTime(scope.row.reviewTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="评价反馈" name="feedback" v-loading="feedLoading">
        <el-table v-loading="loading" :data="feedList">
          <el-table-column type="index" label="序号" width="80" align="center">
            <template #default="scope">
              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="评价时间" align="center" prop="createTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="专家评语" align="center" prop="expertComment" />

          <el-table-column label="星级" align="center" prop="rightApprovalScore" />
          <el-table-column label="评价来源" align="center" prop="sourceRoleStr" />
          <el-table-column label="参与项目" align="center" prop="productName" />

          <el-table-column label="操作" align="center" prop="auditTime">
            <template #default="scope">
              <span @click="jumpToFeedDetail(scope.row)" style="color: #36d; cursor: pointer">详情</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

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

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

import { getPerson, repeal, getInspectionPerson, listCooProject, listFeedBack } 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 } from '@/api/project/extract';

//当前tab
const activeTab = ref('basicInfo');
//合作项目列表
const cooProjectList = ref([]);
const cooLoading = ref(false);
//合作项目列表
const feedList = ref([]);
const feedLoading = ref(false);
//获取合作项目列表
const getProjectList = async () => {
  cooLoading.value = true;
  const res = await listCooProject({ expertId: expertQId.value }).finally(() => {
    cooLoading.value = false;
  });
  cooProjectList.value = res.rows;
};
//单选框改变
const changeValue = (value) => {
  value == '2' ? (opinion.value = '通过') : (opinion.value = '');
};
//获取合作项目列表
const getFeedList = async () => {
  feedLoading.value = true;
  const res = await listFeedBack({ evaluateUser: expertQId.value }).finally(() => {
    feedLoading.value = false;
  });
  feedList.value = res.rows;
};
type TabPaneName = any;
//切换tab
const handleSwitch = (name: TabPaneName) => {
  switch (name) {
    case 'basicInfo':
      getData();
      break;
    case 'cooProject':
      getProjectList();
      break;
    case 'feedback':
      getFeedList();
      break;
    default:
      break;
  }
};
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, item_stage } = toRefs<any>(proxy?.useDict('perform_work_type', 'item_stage'));
const { degree_type } = toRefs<any>(proxy?.useDict('degree_type'));

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 userQId = computed(() => proxy.$route.query.userId);
const expertQId = computed(() => proxy.$route.query.expertId);

const dataList = ref({
  expertId: undefined,
  expertName: '',
  sex: undefined,
  birthDate: '',
  contact: '',
  workUnit: '',
  duty: '',
  politics: undefined,
  graduateSchool: '',
  // major: '',
  majorList: [],
  email: '',
  professional: '',
  professionalAcquisitionDate: '',
  workProfessial: '',
  workProfessialYear: undefined,
  photograph: '',
  performWorkId: undefined,
  otherDescribe: '',
  workExperience: '',
  workPluralistic: '',
  achievement: '',
  paperpath: undefined,
  patentpath: undefined,
  zjkExpertAwardsList: [],
  zjkExpertPaperList: [],
  zjkExpertPatentList: [],
  zjkAnnualInspection: {
    id: '',
    annualInspectionType: '',
    updateBy: '',
    auditTime: '',
    annualInspectionStatus: '',
    reason: ''
  },
  origin: ''
});

import { PersonForm } from '@/api/expert/person/types';
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 jumpToFeedDetail = (row) => {
  const _id = row?.id;
  router.push({ path: '/project/evaluate/detail', query: { id: _id, from: 'inspection' } });
};
const detailLoading = ref(false);
const getData = async () => {
  detailLoading.value = true;
  workArr.value = [];

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

  getInspectionPerson({ userId: userQId.value, expertId: expertQId.value })
    .then(async (res) =>  {
      if (res.data.province) {
        const cityList = await getCity(res.data.province);
        if (cityList.data.length != 0) {
          cityResult.value = cityList.data.filter((item) => item.cityid == res.data.city)[0].city;
        }
      }

      if (res.data.expertId == null) {
        loading.value = false;
        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(parseInt(v) - 1) == -1 ? workArr.value.push(parseInt(v) - 1) : null;
        });
      }


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


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

      if (res.data.patentpath) {
        lwList.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;
    })
    .catch((err) => {
      console.log(err);
     })
    .finally(() => {
      detailLoading.value = false;
    });


  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 menuRef = ref<ElTreeInstance>();
const deptRef = ref<ElTreeInstance>();

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;

    proxy?.$modal.closeLoading();
  } else {
    proxy?.$modal.msgError('图片插入失败');
    proxy?.$modal.closeLoading();
  }
};

//信息变更
const updateInfo = () => {
  router.push({ path: '/expert/person', query: { mode: 'true' } });
};

//撤销
const revocation = () => {
  ElMessageBox.confirm('确认撤销当前信息变更吗', {
    title: '系统确认',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
    .then(async () => {
      const res = await repeal();
      if (res.code == 200) {
        ElNotification({
          title: '提示',
          message: `撤销操作成功！`,
          type: 'success'
        });
        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 jumpToProDetail = (row) => {
  const _id = row.productId;
  router.push({ path: '/project/reviewDetail', query: { id: _id } });
};
//预览图片
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

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

import { batchAnnualInspection } from '@/api/annualInspection/annualInspectionAudit';
import { log } from 'console';

const radioSel = ref('2');
const opinion = ref('通过');
/** 提交按钮 */
const submitForm = async () => {
  if (radioSel.value == '') {
    ElMessageBox.alert('请选择审批意见！', '提示', {
      confirmButtonText: '确定',
      callback: () => { }
    });
    return;
  } else if (radioSel.value == '3' && opinion.value == '') {
    ElMessageBox.alert('请输入审批意见！', '提示', {
      confirmButtonText: '确定',
      callback: () => { }
    });
    return;
  }

  await proxy?.$modal.confirm('确认审批？').finally(() => { });
  let data = {
    ids: [],
    annualInspectionStatus: '',
    reason: ''
  };
  data.ids.push(dataList.value.zjkAnnualInspection.id);
  data.annualInspectionStatus = radioSel.value;
  data.reason = opinion.value;
  await batchAnnualInspection(data);
  proxy?.$modal.msgSuccess('操作成功');
  await getData();
};
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;

  router.back();
};
onBeforeMount(async () => {
  if (route.query.id) {
  }
});

onActivated(async () => {
});


onBeforeMount(() => {
  getData();
});

onMounted(() => {

  if (status.value == 1) {
    ElMessageBox.alert('个人资料审核中...', '提示', {
      confirmButtonText: '确定',
      callback: () => {
      }
    });
  }
});
</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: 0 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;
  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%;
  }
}
</style>
