<script setup>
import axios from 'axios'
import {
  EmploymentInforAdd,
  EmploymentInforDel,
  EmploymentInforDetail,
  EmploymentInforEdit,
  EmploymentInforList,
  changePas,
  checkId,
  classList,
  familyNumberAdd,
  familyNumberDel,
  familyNumberDetail,
  familyNumberEdit,
  familyNumberList,
  getHonorAdd,
  getHonorDel,
  getHonorDetail,
  getHonorEdit,
  getHonorList,
  getWorkExpAdd,
  getWorkExpDel,
  getWorkExpDetail,
  getWorkExpEdit,

  getWorkExpList,
  gradeList,
  userDetail,
  userEdit,
} from './apiItem.js'
import topBG from '~/assets/img/yhzx/topBG.png'
import modifyIcon from '~/assets/img/yhzx/modifyIcon.webp'

const validatePass = (rule, value, callback) => {
  var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/;
  // var passwordreg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
  if (value === ""){
    callback(new Error("请再次输入密码"))
  }
  // else if (value.length >= 8 && value.length <= 12 ){
  //   callback(new Error("密码长度为8-12个字符！"));
  // } 
  else if (value !== form_changePass.newPass){
    callback(new Error("两次输入密码不一致!"));
  }else if(passwordreg.test(value)!=true){
    callback(new Error("字母数字组合，最少设置8个字符，包含大小写和数字特殊符号"));
  }else {
    callback()
  };
};


onMounted(() => {
  // 初始化班级 和 年级列表
  // 用户信息
  getBaseInfo()
  // 工作经历
  getWorkExp('pices')
  // 获取荣耀
  getHonor('pices')
  // 家庭成员
  getFamilyNumber()
  // 任职信息
  getEmploymentInfor()
})

// 定义三种角色判断条件
const isAdmin = ref('false')
const isTeacher = ref('false')
const isStudent = ref('false')

const baseInfoShow = ref({
  userName: '',
  userAvatar: '',
  empNumber: '',
  acountNumber: '',
  IDNumber: '',
  departMent: '',
  career: '',
  gradeSubject: '',
})
const baseInfoListShow = ref([])
const baseInfoListShow_less = ref([
  {
    name: '训练背景',
    cont: '',
  },
  {
    name: '特长',
    cont: '',
  },
])

const manageUnit = ref('')

const honorList = ref([
  {
    name: '是否获奖',
    cont: '',
  },
])

/** **********************************************初始化信息*********************************************/
const userRoleId = ref('')
const inintData = () => {
  // 用户信息
  getBaseInfo()
  // 工作经历
  getWorkExp('pices')
  // 获取荣耀
  getHonor('pices')
  // 家庭成员
  getFamilyNumber()
  // 任职信息
  getEmploymentInfor()
}
const userId = ref('')
// 获取基础信息
const getBaseInfo = () => {
  userDetail()
    .then((res) => {
      if (res.code == '1') {
        // 判断那个角色登录了
        userId.value = res.data.user_id
        const userRole = res.data.user_role_id

        switch (userRole) {
          case '69':// 区县管理员
            isAdmin.value = true
            isTeacher.value = false
            isStudent.value = false
            break
          case '57':// 教师
            isAdmin.value = false
            isTeacher.value = true
            isStudent.value = false
            break
          case '75':// 教师
            isAdmin.value = false
            isTeacher.value = true
            isStudent.value = false
            break
          case '76':// 学生
            isAdmin.value = false
            isTeacher.value = false
            isStudent.value = true
            break
        }
        const allData = res.data
        // 基础信息（头部）
        baseInfoShow.value = {
          userName: allData.user_realname,
          userAvatar: allData.user_avatar,
          empNumber: allData.user_ext.ue_zgbh,
          acountNumber: allData.user_name,
          IDNumber: allData.user_ext.user_id,
          departMent: allData.user_ext.ue_xxmc,
          career: allData.user_ext.ue_zwmc,
          gradeSubject: `${allData.user_ext.grade_name}/${allData.user_ext.subject_name}`,
        }
        baseInfoListShow.value = [
          {
            name: '籍贯',
            number: allData.user_ext.ue_jgbh ? allData.user_ext.ue_jgbh : '',
            cont: allData.user_ext.ue_jgmc,
          },
          {
            name: '身份证号码',
            number: '',
            cont: allData.user_ext.ue_user_cardno,
          },
          {
            name: '曾用名',
            number: '',
            cont: allData.user_ext.ue_cym,
          },
          {
            name: '出生日期',
            number: '',
            cont: allData.user_ext.ue_user_birthday,
          },
          {
            name: '民族',
            number: '',
            cont: allData.user_ext.ue_mzmc,
          },
          {
            name: '性别',
            number: '',
            cont:
              allData.user_ext.ue_user_gender == 1
                ? '男'
                : allData.user_ext.ue_user_gender == 2
                  ? '女'
                  : '保密',
          },
          {
            name: '政治面貌',
            number: '',
            cont: allData.user_ext.ue_zzmmmc,
          },
          {
            name: '文化程度',
            number: allData.user_ext.ue_whcdbh
              ? allData.user_ext.ue_whcdbh
              : '',
            cont: allData.user_ext.ue_whcdmc,
          },
          {
            name: '所在支部',
            number: allData.user_ext.ue_szzbbh
              ? allData.user_ext.ue_szzbbh
              : '',
            cont: allData.user_ext.ue_szzbmc,
          },
          {
            name: '入党时间',
            number: '',
            cont: allData.user_ext.ue_rdsj,
          },
          {
            name: '编制类型',
            number: allData.user_ext.ue_bzlxbh
              ? allData.user_ext.ue_bzlxbh
              : '',
            cont: allData.user_ext.ue_bzlxmc,
          },
          {
            name: '所在党小组',
            number: allData.user_ext.ue_szdxzbh
              ? allData.user_ext.ue_szdxzbh
              : '',
            cont: allData.user_ext.ue_szdxzmc,
          },
          {
            name: '语言能力',
            number: allData.user_ext.ue_yynlbh
              ? allData.user_ext.ue_yynlbh
              : '',
            cont: allData.user_ext.ue_yynlmc,
          },
          {
            name: '所属部门',
            number: allData.user_ext.ue_bmbh ? allData.user_ext.ue_bmbh : '',
            cont: allData.user_ext.ue_bmmc,
          },
        ]
        baseInfoListShow_less.value = [
          {
            name: '训练背景',
            number: '',
            cont: allData.user_ext.ue_xlbj ? allData.user_ext.ue_xlbj : '无',
          },
          {
            name: '特长',
            number: '',
            cont: allData.user_ext.ue_tc ? allData.user_ext.ue_tc : '无',
          },
        ]
        manageUnit.value = allData.my_org
        // 基础信息-联系方式
        contactList.value = [
          {
            name: '联系方式',
            cont: allData.user_ext.ue_user_phone,
          },
          {
            name: '电子邮件',
            cont: allData.user_ext.ue_user_email,
          },
        ]
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
/**
 * 获取工作经历信息
 * */
const workExperience = ref('')
const singleWorkExperience = ref([])
const getWorkExp = async (markLabel) => {
  const transObj = {}
  await getWorkExpList(transObj)
    .then((res) => {
      if (res.code == '1') {
        let responseData = ''
        switch (markLabel) {
          case 'pices':
            responseData = res.data.page_data.slice(0, 1)
            singleWorkExperience.value = responseData
            break
          case 'all':
            responseData = res.data.page_data
            workExperience.value = responseData
          default:
            responseData = res.data.page_data
            workExperience.value = responseData
        }
      }
    })
    .catch((error) => {
      console.log(error)
    })
}
/**
 * 获取荣誉信息
 * */
const singleHonorLis = ref('')
const allHonorList = ref('')
const getHonor = async (markLabel) => {
  // 获取荣誉列表
  const transObj = {}
  await getHonorList(transObj)
    .then((res) => {
      if (res.code == '1') {
        const responseData = res.data.page_data
        honorList.value = [
          {
            name: '是否获奖',
            cont: (responseData.uh_sfhj = '1' ? '是' : '否'),
          },
        ]
        // 遍历奖项
        const tempArr = []
        responseData.forEach((item) => {
          tempArr.push({
            honorName: item.uh_rymc,
          })
        })
        switch (markLabel) {
          case 'pices':
            singleHonorLis.value = responseData.slice(0, 3)
            break
          case 'all':
            allHonorList.value = responseData
          default:
            allHonorList.value = responseData
        }
      }
    })
    .catch((error) => {
      console.log(error)
    })
}
/**
 * 获取家庭成员
 * */
const allFamilyNumber = ref([])
const singleFamilyNumber = ref([])
const getFamilyNumber = async () => {
  const transObj = {}
  await familyNumberList(transObj)
    .then((res) => {
      if (res.code == '1') {
        const responseData = res.data.page_data
        allFamilyNumber.value = responseData
        singleFamilyNumber.value = responseData.slice(0, 1)
      }
    })
    .catch((err) => { console.log(err) })
}

/**
 * 获取任职信息
 * */
const allEmploymentInfor = ref([])
const singleEmploymentInfor = ref([])
const getEmploymentInfor = async () => {
  const transObj = {
    ur_user_id: userId.value,
  }
  await EmploymentInforList(transObj)
    .then((res) => {
      if (res.code == '1') {
        const responseData = res.data.page_data
        allEmploymentInfor.value = responseData
        singleEmploymentInfor.value = responseData.slice(0, 1)
      }
    })
    .catch((err) => { console.log(err) })
}

const dialogFormVisible = ref(false)
const dialog_changePass_style = ref({
  'border-radius': '16px',
  'width': '680px',
})
const form_changePass = reactive({
  IDNum: '',
  userName: '',
  account: '',
  oldPass: '',
  newPass: '',
  confirmPass: '',
})
const rules_changePass = reactive({
  oldPass: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    // { min: 6, max: 16, message: "长度在6到16个字符", trigger: "blur" },
  ],
  newPass: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在3到12个字符，超出字符限制', trigger: 'blur' },
  ],
  confirmPass: [
    { required: true, validator: validatePass, trigger: 'blur' },
  ],
})
const labelPosition = ref('top')
const uploadNic = () => {
  console.log('换头像')
}
const ruleFormRef = ref()

// 点击修改密码弹出dialog
const changePass_switch = () => {
  dialogFormVisible.value = true
  form_changePass.IDNum = baseInfoShow.value.IDNumber
  form_changePass.userName = baseInfoShow.value.userName
  form_changePass.account = baseInfoShow.value.acountNumber
}

// 提交_修改密码
const submitForm = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const transObj = {
            user_main: {
              user_password_old: form_changePass.oldPass,
              user_password_new: form_changePass.confirmPass,
            },
          }
          changePas(transObj)
            .then((res) => {
              if (res.code == '1') {
                ElMessage({
                  type: 'success',
                  message: res.msg,
                })
                // 页面初始化信息一次
                inintData()
              }
              console.log(res)
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}
const dialogVisible_familyNumber = ref(false)
const dialog_familyNumber_style = ref({
  'border-radius': '16px',
  'width': '496px',
})
// 任职信息-局端
const dialogVisible_employmentInforAdmin = ref(false)
const dialog_employmentInforAdmin_style = ref({
  'border-radius': '16px',
  'width': '496px',
})

const dialogVisible_employmentInforTeacher = ref(false)
const dialog_employmentInforTeacher_style = ref({
  'border-radius': '16px',
  'width': '496px',
})

const dialogVisible_workExperience = ref(false)
const dialog_workExperience_style = ref({
  'border-radius': '16px',
  'width': '496px',
})
const dialogVisible_honorList = ref(false)
const dialog_honor_style = ref({
  'border-radius': '16px',
  'width': '496px',
})

// 查看更多（工作经历 获取荣誉）
const checkMore = (marklabel) => {
  switch (marklabel) {
    case 'familyNumber_dialog':
      dialogVisible_familyNumber.value = true

      break
    case 'employmentInforAdmin_dialog':
      dialogVisible_employmentInforAdmin.value = true

      break
    case 'employmentInforTeacher_dialog':
      dialogVisible_employmentInforTeacher.value = true

      break

    case 'workExperience_dialog':
      dialogVisible_workExperience.value = true
      getWorkExp('all')
      break
    case 'honorList_dialog':
      dialogVisible_honorList.value = true
      getHonor('all')
      break
  }
}

const dialog_style_W100 = ref({
  width: '100%',
})

/** ****************************基本信息**********************************/
const politicalOptions = ref([
  { value: '1', label: '群众' },
  { value: '2', label: '少先队员' },
  { value: '3', label: '共青团员' },
  { value: '4', label: '中国党员' },
])
const gradeOptions = ref([
  { 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: '11', label: '高一' },
  { value: '12', label: '高二' },
  { value: '13', label: '高三' },

])
const classOption = ref([
  { value: '1', label: '1班' },
  { value: '2', label: '2班' },
])
const subjectOption = ref([
  { 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: '14', label: '体育' },
  { value: '19', label: '美术' },
  { value: '20', label: '信息技术' },
  { value: '21', label: '科学' },
  { value: '22', label: '社会' },

])
const academicQuali = ref([
  { value: '1', label: '博士' },
  { value: '2', label: '硕士' },
  { value: '3', label: '本科' },
  { value: '4', label: '专科' },
])

const ruleFormRef_edit_baseInfo = ref()
const form_edit_baseInfo = ref({
  xm: '', // 姓名
  jg: '', // 籍贯
  cym: '', // 曾用名
  mz: '', // 民族
  zzmm: '', // 政治面貌
  szzb: '', // 所在支部
  bzlx: '', // 编制类型
  yynl: '', // 语言能力
  xx: '', // 学校
  nj: '', // 年级

  zgbh: '', // 职工编号
  sfzhm: '', // 身份证号码
  csrq: '', // 出生日期
  xb: '', // 性别
  whcd: '', // 文化程度
  rdsj: '', // 入党时间
  szdxz: '', // 所在党小组
  jzglb: '', // 教职工类别
  xk: '', // 学科
  xlbj: '', // 训练背景
  tc: '', // 特长

  dzyx: '', // 电子邮箱
  lxdh: '', // 联系电话
})

const rules_edit_baseInfo = reactive({
  xm: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  jg: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
  mz: [{ required: true, message: '请输入民族', trigger: 'blur' }],
  zzmm: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
  bzlx: [{ required: true, message: '请输入编制类型', trigger: 'blur' }],
  yynl: [{ required: true, message: '请输入语言能力', trigger: 'blur' }],
  xx: [{ required: true, message: '请输入学校', trigger: 'blur' }],
  nj: [{ required: true, message: '请选择年级', trigger: 'change' }],

  zgbh: [
    { required: true, message: '请输入职工编号', trigger: 'blur' },
    { min: 0, max: 30, message: '长度在0到30个字符', trigger: 'blur' },
  ],
  sfzhm: [{ required: true, message: '请输入省份证号码', trigger: 'blur' }],
  csrq: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  xb: [{ required: true, message: '请选择性别', trigger: 'change' }],
  whcd: [{ required: true, message: '请选择文化程度', trigger: 'change' }],
  xk: [{ required: true, message: '请输入学科', trigger: 'blur' }],
})

// 身份证失去焦点
const checkNameMatchidNum = (event) => {
  const inputValue = event.target.value
  const transName = form_edit_baseInfo.value.xm
  const linkUrl = `https://myxjyszptxapi.bozedu.top/openapi/idn.php?name=${transName}&idno=${inputValue}`
  axios({
    method: 'post',
    url: linkUrl,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    // data:{}
  })
    .then((res) => {
      const responseData = res.data
      if (responseData.code == '1') {
        const judgeMark = responseData.data.result.isok
        if (!judgeMark) {
          ElMessage({
            message: '身份证和用户名不匹配，请重新输入姓名和身份证号',
            type: 'error',
          })
          form_edit_baseInfo.value.sfzhm = ''
        }
        else {
          ElMessage({
            message: '身份证和用户名匹配',
            type: 'success',
          })
        }
      }
    })
    .catch((error) => { console.log(error) })
}
// 提交_编辑_基础信息(保存按钮)
const submitFormEditBaseInfo = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const transObj = {
            user_profile: {
              user_realname: form_edit_baseInfo.value.xm, // 用户姓名
              idcard: form_edit_baseInfo.value.sfzhm, // 身份证
              gender: form_edit_baseInfo.value.xb == '男' ? 1 : 2, // 性别 1 男 2 女
            },
            user_ext: {
              ue_zgbh: form_edit_baseInfo.value.zgbh, // 职工编号
              ue_jgmc: form_edit_baseInfo.value.jg, // 籍贯
              ue_cym: form_edit_baseInfo.value.cym, // 曾用名
              ue_mzmc: form_edit_baseInfo.value.mz, // 民族
              ue_zzmmbh: form_edit_baseInfo.value.zzmm.value, // 政治面貌编号
              ue_zzmmmc: form_edit_baseInfo.value.zzmm.label, // 政治面貌名称
              ue_whcdbh: form_edit_baseInfo.value.whcd.value, // 文化程度编号
              ue_whcdmc: form_edit_baseInfo.value.whcd.label, // 文化程度名称
              ue_szzbmc: form_edit_baseInfo.value.szzb, // 所在支部
              ue_rdsj: form_edit_baseInfo.value.rdsj, // 入党时间
              ue_bzlxmc: form_edit_baseInfo.value.bzlx, // 编制类型
              ue_szdxzmc: form_edit_baseInfo.value.szdxz, // 所在党小组
              ue_yynlmc: form_edit_baseInfo.value.yynl, // 语言能力
              ue_jzglbmc: form_edit_baseInfo.value.jzglb, // 教职工类别
              ue_xxmc: form_edit_baseInfo.value.xx, // 学校
              subject_name: form_edit_baseInfo.value.xk, // 学科(多个英文逗号间隔)
              grade_id: form_edit_baseInfo.value.nj.value, // 年级id
              grade_name: form_edit_baseInfo.value.nj.label, // 年级名称

              ue_xlbj: form_edit_baseInfo.value.xlbj, // 训练背景
              ue_tc: form_edit_baseInfo.value.tc, // 特长

              ue_user_gender:
                form_edit_baseInfo.value.xb == '男'
                  ? 1
                  : form_edit_baseInfo.value.xb == '女'
                    ? 2
                    : 3,
              ue_user_cardno: form_edit_baseInfo.value.sfzhm,
              ue_user_birthday: form_edit_baseInfo.value.csrq,
              ue_user_realname: form_edit_baseInfo.value.xm,

              // dzyx: contactList.value[0].cont,//电子邮箱
              // lxdh: contactList.value[0].cont,//联系电话
            },
          }
          userEdit(transObj)
            .then((res) => {
              console.log(res)
              if (res.code == 1) {
                ElMessage({
                  message: res.msg,
                  type: 'success',
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

/** ****************************工作经历****************************/
const ruleFormRef_edit_workExprice = ref()
const form_edit_workExprice = ref({
  cjgzny: '', // 参加工作年月
  lxny: '', // 来校年月
  ssbm: '', // 所属部门/教研组
  cjny: '', // 从教年月
  ncgznx: '', // 农村工作年限
  sydw: '', // 事业单位
})
const rules_edit_workExprice = reactive({
  cjgzny: [
    { required: true, message: '请选择参加工作年月', trigger: 'change' },
  ],
  lxny: [{ required: true, message: '请选择来校年月', trigger: 'change' }],
  ssbm: [{ required: true, message: '所属部门/教研组', trigger: 'blur' }],
  cjny: [{ required: true, message: '请选择从教年月', trigger: 'change' }],
  ncgznx: [
    { required: true, message: '请选择农村工作年限', trigger: 'change' },
  ],
  sydw: [{ required: true, message: '请输入事业单位', trigger: 'blur' }],
})
// 提交_编辑_工作经历
const submitFormEditWorkExprice = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const transObj = {
            user_working: {
              uw_cjgzny: form_edit_workExprice.value.cjgzny,
              uw_cjny: form_edit_workExprice.value.cjny,
              uw_lxny: form_edit_workExprice.value.lxny,
              uw_ncgznx: form_edit_workExprice.value.ncgznx,
              uw_ssbmyhjzbh: '', // 所属部门/教研组编号
              uw_ssbmyhjzmc: form_edit_workExprice.value.ssbm, // 所属部门/教研组名称
              uw_sydwbh:'', // 事业单位编号
              uw_sydwmc:form_edit_workExprice.value.sydw,//事业单位名称
            },
          }
          getWorkExpAdd(transObj)
            .then((res) => {
              if (res.code == '1') {
                ElMessage({
                  message: res.msg,
                  type: 'success',
                });
                form_edit_workExprice.value.cjgzny="";// 参加工作年月
                form_edit_workExprice.value.lxny="";// 来校年月
                form_edit_workExprice.value.ssbm="";// 所属部门/教研组
                form_edit_workExprice.value.cjny="";// 从教年月
                form_edit_workExprice.value.ncgznx="";// 农村工作年限
                form_edit_workExprice.value.sydw = "";// 事业单位

                edit_workExprice();
              }
            })
            .catch((err) => { console.log(err) })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

/** ****************************获取荣誉****************************/
const ifShowInput = ref(false)
const agreeChange = (val) => {
  ifShowInput.value = (val === '1')
}

const ruleFormRef_edit_honor = ref()
const form_edit_honor = ref({
  sfhj: '', // 是否获奖
  rymc: '', // 荣誉名称
})
const rules_edit_honor = reactive({
  // sfhj: [{ required: true, message: "请选择是否获奖", trigger: "change" }],
  rymc: [{ required: true, message: '请输入荣誉名称', trigger: 'blur' }],
})
// 提交_编辑_获取荣誉
const submitFormEditHonor = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const transObj = {
            user_honor: {
              uh_sfhj: form_edit_honor.value.sfhj == '是' ? 1 : 0, // 是否获奖
              uh_rymc: form_edit_honor.value.rymc, // 荣誉名称
              uh_user_id: userId.value, // 荣誉所属用户
            },
          }
          getHonorAdd(transObj)
            .then((res) => {
              if (res.code == '1') {
                ElMessage({
                  type: 'success',
                  message: res.msg,
                });
                form_edit_honor.value.rymc = "";
                edit_getHonor();
              }
            })
            .catch((err) => { console.log(err) })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

/** ***********************************联系方式**********************************/
const validatePhoneCall = (rule, value, callback) => {
  const regExp = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
  if (!regExp.test(value))
    callback(new Error('请输入正确的手机号'))
  else
    callback()
}

const ruleFormRef_edit_contact = ref()
const form_edit_contact = ref({
  lxdh: '', // 联系电话
  dzyx: '', // 电子邮箱
})
const rules_edit_contact = reactive({
  lxdh: [
    { required: true, validator: validatePhoneCall, message: '请输入正确的联系方式', trigger: 'blur' },
  ],
  dzyx: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
  ],
})
// 提交_编辑_提交联系方式
const submitFormEditContact = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const user_ext = {
            ue_user_email: form_edit_contact.value.lxdh,
            ue_user_phone: form_edit_contact.value.dzyx,
          }
          userEdit(user_ext)
            .then((res) => {
              if (res.code == '1') {
                ElMessage({
                  type: 'success',
                  message: res.msg,
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '提交失败',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

/** ***********************************任职信息（老师）**********************************/
const ruleFormRef_edit_emp = ref()
const form_edit_emp = ref({
  xx: '', // 学校
  nj: '', // 年级
  xk: '', // 学科
  bj: '', // 班级
})
const rules_edit_emp = reactive({
  xx: [{ required: true, message: '请输入学校', trigger: 'blur' }],
  nj: [{ required: true, message: '请选择年级', trigger: 'change' }],
  xk: [{ required: true, message: '请输入学科', trigger: 'blur' }],
  bj: [{ required: true, message: '请选择班级', trigger: 'change' }],
})
// 提交_编辑_提交任职信息(老师)
const submitFormEditEmp = async (formEl) => {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm('确定此次提交吗？', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const transObj = {
            user_rzxx: {
              ur_user_id: userId.value, // 荣誉所属用户
              ur_xuexiao: form_edit_emp.value.xx, // 学校
              ur_grade_id: '', //
              ur_grade_name: form_edit_emp.value.nj, // 年级
              ur_subject_id: '', //
              ur_subject_name: form_edit_emp.value.xk, // 学科
              ur_class_id: '', //
              ur_classs_name: form_edit_emp.value.bj, // 班级
            },
          }
          EmploymentInforAdd(transObj)
            .then((res) => {
              if (res.code == '1') {
                ElMessage({
                  type: 'success',
                  message: res.msg,
                })
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '提交失败',
          })
        })
    }
    else {
      console.log('error submit!', fields)
    }
  })
}

// 荣誉名称
const honorName = ref([
  {
    id: '1',
    name: '全国优秀教师',
  },
  {
    id: '2',
    name: '课堂教学先进教师',
  },
  {
    id: '3',
    name: '创新科研先进教师',
  },
])
const delItem = (markLabel, item) => {
  switch (markLabel) {
    case 'exprice' :
      getWorkExpDel({ uw_id: item.uw_id })
        .then((res) => {
          if (res.code == '1') {
            ElMessage({
              type: 'success',
              message: res.msg,
            });
            edit_workExprice();
          }
          else {
            ElMessage({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })

      break

    case 'honor' :
      getHonorDel({ uh_id: item.uh_id })
        .then((res) => {
          if (res.code == '1') {
            ElMessage({
              type: 'success',
              message: res.msg,
            })
            edit_getHonor()
          }
          else {
            ElMessage({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
      break
  }
}

const judgeEditDialogIndex = ref('')

// dialog弹出-tab切换
const activeName = ref('first')
const handleClick = (tab, event) => {
  judgeEditDialogIndex.value = tab.index
  if (tab.index == 0 || tab.index == 3) {
    // 基本信息 包含 联系方式（数据回填）
    edit_baseInfo()
  }
  else if (tab.index == 1) {
    // 工作经历(数据回填)
    edit_workExprice()
  }
  else {
    // 获取荣耀(数据回填)
    edit_getHonor()
  }
}

const dialogFormVisible_edit = ref(false)
// 编辑按钮
const handleEditBtn = () => {
  dialogFormVisible_edit.value = true
  activeName.value = 'first'
  // 第一个tab是基本信息(请求基本信息)
  edit_baseInfo()
}

// dialog关闭按钮
const closeDialog = () => {
  // 用户信息
  getBaseInfo()
  // 工作经历
  getWorkExp('pices')
  // 获取荣耀
  getHonor('pices')
  // 家庭成员
  getFamilyNumber()
  // 任职信息
  getEmploymentInfor()
}

// 编辑-基本信息编辑(数据回填)
const contactList = ref([
  {
    name: '联系方式',
    cont: '',
  },
  {
    name: '电子邮件',
    cont: '',
  },
])
const edit_baseInfo = () => {
  userDetail()
    .then((res) => {
      if (res.code == '1') {
        const allData = res.data
        form_edit_baseInfo.value = {
          xm: allData.user_realname, // 姓名
          jg: allData.user_ext.ue_jgmc, // 籍贯
          cym: allData.user_ext.ue_cym, // 曾用名
          mz: allData.user_ext.ue_mzmc, // 民族
          zzmm: allData.user_ext.ue_zzmmmc, // 政治面貌
          szzb: allData.user_ext.ue_szzbmc, // 所在支部
          bzlx: allData.user_ext.ue_bzlxmc, // 编制类型
          yynl: allData.user_ext.ue_yynlmc, // 语言能力
          xx: allData.user_ext.ue_xxmc, // 学校
          nj: allData.user_ext.grade_name, // 年级

          zgbh: allData.user_ext.ue_zgbh, // 职工编号
          sfzhm: allData.user_ext.ue_user_cardno, // 身份证号码
          csrq: allData.user_ext.ue_user_birthday, // 出生日期
          xb:
            allData.user_ext.ue_user_gender == 1
              ? '男'
              : allData.user_ext.ue_user_gender == 2
                ? '女'
                : '保密', // 性别
          whcd: allData.user_ext.ue_whcdmc, // 文化程度
          rdsj: allData.user_ext.ue_rdsj, // 入党时间
          szdxz: allData.user_ext.ue_szdxzmc, // 所在党小组
          jzglb: allData.user_ext.ue_jzglbmc, // 教职工类别
          xk: allData.user_ext.subject_name, // 学科

          xlbj:
            allData.user_ext.ue_xlbj != '' ? allData.user_ext.ue_xlbj : '无', // 训练背景
          tc: allData.user_ext.ue_tc ? allData.user_ext.ue_tc : '无', // 特长

          csqi: allData.user_ext.ue_user_birthday, // 出生日期
          sfzh: allData.user_ext.ue_user_cardno, // 身份证号
          dzyx: allData.user_ext.ue_user_email, // 电子邮箱
          lxdh: allData.user_ext.ue_user_phone, // 联系电话
        }
        form_edit_contact.value = {
          lxdh: allData.user_ext.ue_user_phone, // 联系电话
          dzyx: allData.user_ext.ue_user_email, // 电子邮箱
        }
        contactList.value = [
          {
            name: '联系方式',
            cont: allData.user_ext.ue_user_phone,
          },
          {
            name: '电子邮件',
            cont: allData.user_ext.ue_user_email,
          },
        ]
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
// 编辑-基本工作经历（数据回填）
const BackFillworkExpriceList = ref('')
const edit_workExprice = () => {
  getWorkExpList()
    .then((res) => {
      if (res.code == '1') {
        console.log(res, '工作经历消息')
        BackFillworkExpriceList.value = res.data.page_data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}
// 编辑-基本获取荣耀(数据回填)
const BackFillHonorList = ref('')
const edit_getHonor = () => {
  getHonorList()
    .then((res) => {
      if (res.code == '1')
        BackFillHonorList.value = res.data.page_data
    })
    .catch((err) => {
      console.log(err)
    })
}
</script>

<template>
  <div class="grzxContent">
    <div class="baseTopInfo">
      <div class="BGshow">
        <img :src="topBG" alt="">
      </div>
      <div class="buttonShow">
        <el-button type="primary" plain class="Lcus_changePasBtn" @click="changePass_switch">
          修改密码
        </el-button>
        <el-button type="primary" class="Lcus_eidtBtn" @click="handleEditBtn">
          编辑
        </el-button>
      </div>
      <div class="baseInfoShow">
        <ul>
          <li v-if="isAdmin || isTeacher">
            职工编号：{{ baseInfoShow.empNumber }}
          </li>
          <li v-if="isAdmin || isTeacher">
            账号：{{ baseInfoShow.acountNumber }}
          </li>
          <li v-if="isAdmin || isTeacher">
            ID：{{ baseInfoShow.IDNumber }}
          </li>
          <li v-if="false">
            单位：{{ baseInfoShow.departMent }}
          </li>
          <li v-if="isTeacher">
            职位：{{ baseInfoShow.career }}
          </li>
          <li v-if="isStudent">
            年级/学科：{{ baseInfoShow.gradeSubject }}
          </li>
        </ul>
      </div>
      <!-- 定位 -->
      <div class="posiNic">
        <div class="avator_nic">
          <div class="avator_nicIn">
            <img v-if="baseInfoShow.userAvatar" :src="baseInfoShow.userAvatar.middle" alt="头像">
          </div>
        </div>
        <p class="userName">
          {{ baseInfoShow.userName }}
        </p>
      </div>
    </div>
    <div class="partShow">
      <div class="partShow_left">
        <div class="partShow_left_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              基本信息
            </div>
          </div>
          <div class="normalContent">
            <div v-for="item in baseInfoListShow" :key="item.name" class="normal_single_2">
              <div class="markTitle">
                {{ item.name }}
              </div>
              <div class="markShow">
                {{ item.cont }}
              </div>
            </div>
          </div>
          <div class="normalContent_1">
            <div v-for="item in baseInfoListShow_less" :key="item.name" class="normal_single_1">
              <div class="markTitle">
                {{ item.name }}
              </div>
              <div class="markShow">
                {{ item.cont }}
              </div>
            </div>
          </div>
        </div>

        <div class="partShow_left_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              管理单位
            </div>
          </div>
          <div class="managePart">
            <p v-for="item in manageUnit" :key="item.uom_id">
              {{ item.uo_name_0 }}
            </p>
          </div>
        </div>
      </div>
      <div class="partShow_right">
        <div v-if="isStudent" class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              家庭主要成员
            </div>
            <div class="normalTitle_optionR" @click="checkMore('familyNumber_dialog')">
              <span>查看更多 ></span>
            </div>
          </div>
          <div class="normalContent">
            <div
              v-for="item in singleFamilyNumber" :key="item.name"
              class="singleWorkExperienceGroup normal_single_1"
            >
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    称谓
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_cw }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    姓名
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_xm }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    政治面貌
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_zzmmmc }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    工作单位
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_gzdw }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    职务
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_zw }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    手机号码
                  </div>
                  <div class="markShowMore">
                    {{ item.uf_sjhm }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="isAdmin" class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              任职信息
            </div>
            <div class="normalTitle_optionR" @click="checkMore('employmentInforAdmin_dialog')">
              <span>查看更多></span>
            </div>
          </div>
          <div class="normalContent">
            <div
              v-for="item in singleEmploymentInfor" :key="item.ur_id"
              class="singleWorkExperienceGroup normal_single_1"
            >
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    事业单位
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_sydw }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    部门
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_bm }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    职位
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_zw }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="isTeacher" class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              任职信息
            </div>
            <div class="normalTitle_optionR" @click="checkMore('employmentInforTeacher_dialog')">
              <span>查看更多 ></span>
            </div>
          </div>
          <div class="normalContent">
            <div v-for="item in singleEmploymentInfor" :key="item.name" class="singleWorkExperienceGroup normal_single_1">
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    学校
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_xuexiao }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    年级
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_grade_name }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    学科
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_subject_name }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    班级
                  </div>
                  <div class="markShowMore">
                    {{ item.ur_classs_name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              工作经历
            </div>
            <div class="normalTitle_optionR" @click="checkMore('workExperience_dialog')">
              <span>查看更多 ></span>
            </div>
          </div>
          <div class="normalContent">
            <div
              v-for="item in singleWorkExperience" :key="item.name"
              class="singleWorkExperienceGroup normal_single_1"
            >
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    参加工作年月
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_cjgzny }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    从教年月
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_cjny }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    来校年月
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_lxny }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    农村工作年限
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_ncgznx }}
                  </div>
                </div>
              </div>
              <div class="lineCover">
                <div class="lineCover_left">
                  <div class="markTitleMore">
                    所属部门/教研组
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_ssbmyhjzmc }}
                  </div>
                </div>
                <div class="lineCover_right">
                  <div class="markTitleMore">
                    事业单位
                  </div>
                  <div class="markShowMore">
                    {{ item.uw_sydwmc }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              获取荣誉
            </div>
            <div class="normalTitle_optionR" @click="checkMore('honorList_dialog')">
              <span>查看更多 ></span>
            </div>
          </div>
          <div class="normalContent">
            <div v-for="item in honorList" :key="item.name" class="normal_single_2">
              <div class="markTitle">
                {{ item.name }}
              </div>
              <div class="markShow">
                {{ item.cont }}
              </div>
            </div>
          </div>
          <div class="honorLis">
            <p v-for="(item, index) in singleHonorLis" :key="index">
              {{ item.uh_rymc }}
            </p>
          </div>
        </div>

        <div class="partShow_right_part">
          <div class="normalTitle">
            <div class="normalTitle_bigTitleL">
              联系方式
            </div>
          </div>
          <div class="normalContent">
            <div v-for="item in contactList" :key="item.name" class="normal_single_2">
              <div class="markTitle">
                {{ item.name }}
              </div>
              <div class="markShow">
                {{ item.cont }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- dialog修改密码 -->
    <el-dialog v-model="dialogFormVisible" title="修改密码" class="dialog_modifyContent" :style="[dialog_changePass_style]">
      <el-form
        ref="ruleFormRef" :model="form_changePass" class="modifyContent" label-width="auto"
        :label-position="labelPosition" :rules="rules_changePass"
      >
        <div class="dialog_nic">
          <div class="imgUrl">
            <img :src="baseInfoShow.userAvatar.middle" alt="">
          </div>
          <div class="modifyIcon" @click="uploadNic">
            <img :src="modifyIcon" alt="">
          </div>
        </div>
        <el-form-item label="ID">
          <el-input v-model="form_changePass.IDNum" autocomplete="off" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form_changePass.userName" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form_changePass.account" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="form_changePass.oldPass" autocomplete="off" class="Lucs_inputBG" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="form_changePass.newPass" autocomplete="off" class="Lucs_inputBG" maxlength="12" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPass">
          <el-input v-model="form_changePass.confirmPass" autocomplete="off" class="Lucs_inputBG" maxlength="12" show-word-limit clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- dialog 家庭成员-查看更多(学生登录) -->
    <el-dialog v-model="dialogVisible_familyNumber" title="家庭成员" :style="[dialog_familyNumber_style]">
      <div>
        <div class="normalContent">
          <div v-for="item in allFamilyNumber" :key="item.name" class="singleWorkExperienceGroup normal_single_1">
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  称谓
                </div>
                <div class="markShowMore">
                  {{ item.uf_cw }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  姓名
                </div>
                <div class="markShowMore">
                  {{ item.uf_xm }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  政治面貌
                </div>
                <div class="markShowMore">
                  {{ item.uf_zzmmbh }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  工作单位
                </div>
                <div class="markShowMore">
                  {{ item.uf_gzdw }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  职务
                </div>
                <div class="markShowMore">
                  {{ item.uf_zw }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  手机号
                </div>
                <div class="markShowMore">
                  {{ item.uf_sjhm }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- dialog任职信息(局端)-查看更多 -->
    <el-dialog v-model="dialogVisible_employmentInforAdmin" title="任职信息" :style="[dialog_employmentInforAdmin_style]">
      <div>
        <div class="normalContent">
          <div v-for="item in allEmploymentInfor" :key="item.name" class="singleWorkExperienceGroup normal_single_1">
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  事业单位
                </div>
                <div class="markShowMore">
                  {{ item.ur_sydw }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  部门
                </div>
                <div class="markShowMore">
                  {{ item.ur_bm }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  职位
                </div>
                <div class="markShowMore">
                  {{ item.ur_zw }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- dialog任职信息（老师）-查看更多 -->
    <el-dialog v-model="dialogVisible_employmentInforTeacher" title="任职信息" :style="[dialog_employmentInforTeacher_style]">
      <div>
        <div class="normalContent">
          <div v-for="item in allEmploymentInfor" :key="item.name" class="singleWorkExperienceGroup normal_single_1">
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  学校
                </div>
                <div class="markShowMore">
                  {{ item.ur_xuexiao }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  年级
                </div>
                <div class="markShowMore">
                  {{ item.ur_grade_name }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  学科
                </div>
                <div class="markShowMore">
                  {{ item.ur_subject_name }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  班级
                </div>
                <div class="markShowMore">
                  {{ item.ur_classs_name }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- dialog工作经历-查看更多 -->
    <el-dialog v-model="dialogVisible_workExperience" title="工作经历" :style="[dialog_workExperience_style]">
      <div>
        <div class="normalContent">
          <div v-for="item in workExperience" :key="item.name" class="singleWorkExperienceGroup normal_single_1">
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  参加工作年月
                </div>
                <div class="markShowMore">
                  {{ item.uw_cjgzny }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  从教年月
                </div>
                <div class="markShowMore">
                  {{ item.uw_cjny }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  来校年月
                </div>
                <div class="markShowMore">
                  {{ item.uw_lxny }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  农村工作年限
                </div>
                <div class="markShowMore">
                  {{ item.uw_ncgznx }}
                </div>
              </div>
            </div>
            <div class="lineCover">
              <div class="lineCover_left">
                <div class="markTitleMore">
                  所属部门/教研组
                </div>
                <div class="markShowMore">
                  {{ item.uw_ssbmyhjzmc }}
                </div>
              </div>
              <div class="lineCover_right">
                <div class="markTitleMore">
                  事业单位
                </div>
                <div class="markShowMore">
                  {{ item.uw_sydwmc }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- dialog获取荣誉-查看更多 -->
    <el-dialog v-model="dialogVisible_honorList" title="获取荣誉" :style="[dialog_honor_style]">
      <div>
        <div class="normalContent">
          <div v-for="item in honorList" :key="item.name" class="normal_single_2">
            <div class="markTitle">
              {{ item.name }}
            </div>
            <div class="markShow">
              {{ item.cont }}
            </div>
          </div>
        </div>
        <div class="honorLis">
          <p v-for="(item, index) in allHonorList" :key="index">
            {{ item.uh_rymc }}
          </p>
        </div>
      </div>
    </el-dialog>

    <!-- dialog编辑信息_tab版本 -->
    <el-dialog v-model="dialogFormVisible_edit" title="编辑" class="dialog_editor" :style="[dialog_style_edit]" @close="closeDialog">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form
            v-if="activeName == 'first'" ref="ruleFormRef_edit_baseInfo" :model="form_edit_baseInfo"
            class="modifyContent_edit" label-width="auto" :label-position="labelPosition"
            :rules="rules_edit_baseInfo"
          >
            <div class="big_box">
              <div class="edit_baseInfo">
                <div class="edit_baseInfo_left">
                  <el-form-item label="姓名" prop="xm">
                    <el-input v-model="form_edit_baseInfo.xm" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="籍贯" prop="jg">
                    <el-input v-model="form_edit_baseInfo.jg" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="曾用名">
                    <el-input v-model="form_edit_baseInfo.cym" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="民族" prop="mz">
                    <el-input v-model="form_edit_baseInfo.mz" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="政治面貌" prop="zzmm">
                    <el-select v-model="form_edit_baseInfo.zzmm" placeholder="请选择政治面貌" :style="[dialog_style_W100]" class="Lucs_inputBG">
                      <el-option v-for="(item, index) in politicalOptions" :key="index" :label="item.label" :value="item" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="所在支部">
                    <el-input v-model="form_edit_baseInfo.szzb" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="编制类型" prop="bzlx">
                    <el-input v-model="form_edit_baseInfo.bzlx" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="语言能力" prop="yynl">
                    <el-input v-model="form_edit_baseInfo.yynl" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="学校" prop="xx">
                    <el-input v-model="form_edit_baseInfo.xx" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="年级" prop="nj">
                    <el-select v-model="form_edit_baseInfo.nj" placeholder="请选择年级" :style="[dialog_style_W100]" class="Lucs_inputBG">
                      <el-option v-for="(item, index) in gradeOptions" :key="index" :label="item.label" :value="item" />
                    </el-select>
                  </el-form-item>
                </div>
                <div class="edit_baseInfo_right">
                  <el-form-item label="职工编号" prop="zgbh">
                    <el-input
                      v-model="form_edit_baseInfo.zgbh" autocomplete="off" maxlength="30" show-word-limit
                      class="Lucs_inputBG"
                    />
                  </el-form-item>
                  <el-form-item label="身份证号码" prop="sfzhm">
                    <el-input v-model="form_edit_baseInfo.sfzhm" autocomplete="off" class="Lucs_inputBG" @blur="checkNameMatchidNum($event)" />
                  </el-form-item>
                  <el-form-item label="出生日期" prop="csrq">
                    <el-date-picker
                      v-model="form_edit_baseInfo.csrq" type="date" placeholder="请选择出生日期"
                      class="Lucs_inputBG Lucs_timePickerIcon" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                  <el-form-item label="性别" prop="xb">
                    <el-radio-group v-model="form_edit_baseInfo.xb" class="Lucs_inputBG">
                      <el-radio label="男" />
                      <el-radio label="女" />
                      <el-radio label="保密" />
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="文化程度" prop="whcd">
                    <el-select v-model="form_edit_baseInfo.whcd" placeholder="请选择文化程度" :style="[dialog_style_W100]" class="Lucs_inputBG">
                      <el-option v-for="(item, index) in academicQuali" :key="index" :label="item.label" :value="item" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="入党时间">
                    <el-date-picker v-model="form_edit_baseInfo.rdsj" type="date" placeholder="请选择入党时间" class="Lucs_inputBG Lucs_timePickerIcon" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                  </el-form-item>
                  <el-form-item label="所在党小组">
                    <el-input v-model="form_edit_baseInfo.szdxz" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="教职工类别">
                    <el-input v-model="form_edit_baseInfo.jzglb" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                  <el-form-item label="学科" prop="xk">
                    <el-input v-model="form_edit_baseInfo.xk" autocomplete="off" class="Lucs_inputBG" />
                  </el-form-item>
                </div>
              </div>
              <el-form-item label="训练背景">
                <el-input
                  v-model="form_edit_baseInfo.xlbj" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"
                  maxlength="255" show-word-limit clearable class="Lucs_textAreaBG"
                />
              </el-form-item>
              <el-form-item label="特长">
                <el-input
                  v-model="form_edit_baseInfo.tc" type="textarea" :autosize="{ minRows: 4, maxRows: 8 }"
                  maxlength="255" show-word-limit clearable class="Lucs_textAreaBG"
                />
              </el-form-item>
            </div>
            <div style="text-align: right">
              <el-button
                type="primary" plain size="small"
                @click="submitFormEditBaseInfo(ruleFormRef_edit_baseInfo)"
              >
                保存
              </el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="工作经历" name="second">
          <el-form
            v-if="activeName == 'second'" ref="ruleFormRef_edit_workExprice" :model="form_edit_workExprice"
            class="modifyContent_edit" label-width="auto" :label-position="labelPosition"
            :rules="rules_edit_workExprice"
          >
            <div class="big_box">
              <div class="big_box_edit_workExprice" style="margin-bottom: 20px">
                <h3 class="dialogTitle">
                  工作经历
                </h3>
                <div class="edit_workExprice">
                  <div class="edit_workExprice_left">
                    <el-form-item label="参加工作年月" prop="cjgzny">
                      <el-date-picker
                        v-model="form_edit_workExprice.cjgzny" type="date" value-format="YYYY-MM-DD" placeholder="请选择参加工作年月"
                        style="width: 100%" :clearable="true" class="Lucs_inputBG"
                      />
                    </el-form-item>
                    <el-form-item label="来校年月" prop="lxny">
                      <el-date-picker
                        v-model="form_edit_workExprice.lxny" type="date" value-format="YYYY-MM-DD" placeholder="请选择来校年月"
                        style="width: 100%" :clearable="true" class="Lucs_inputBG"
                      />
                    </el-form-item>
                    <el-form-item label="所属部门/教研组 " prop="ssbm">
                      <el-input v-model="form_edit_workExprice.ssbm" autocomplete="off" class="Lucs_inputBG" placeholder="请输入所属部门/教研组" />
                    </el-form-item>
                  </div>
                  <div class="edit_workExprice_right">
                    <el-form-item label="从教年月" prop="cjny">
                      <el-date-picker
                        v-model="form_edit_workExprice.cjny" type="date" value-format="YYYY-MM-DD" placeholder="请选择从教年月"
                        style="width: 100%" :clearable="true" class="Lucs_inputBG"
                      />
                    </el-form-item>
                    <el-form-item label="农村工作年限" prop="ncgznx">
                      <el-date-picker v-model="form_edit_workExprice.ncgznx" type="daterange" range-separator="-" start-placeholder="请选择农村工作年限开始时间" end-placeholder="请选择农村工作年限结束时间" value-format="YYYY-MM-DD" style="width: 100%" :clearable="true" class="Lucs_inputBG" />
                    </el-form-item>
                    <el-form-item label="事业单位" prop="sydw">
                      <el-input v-model="form_edit_workExprice.sydw" autocomplete="off" class="Lucs_inputBG" placeholder="请输入事业单位" />
                    </el-form-item>
                  </div>
                </div>
                <el-button type="primary" plain size="small" style="margin-top: 15px" @click="submitFormEditWorkExprice(ruleFormRef_edit_workExprice)">
                  添加经历
                </el-button>
                <div v-for="item in BackFillworkExpriceList" :key="item.uw_id" class="honorList_single">
                  {{ item.uw_sydwmc }}-{{ item.uw_ssbmyhjzmc }}
                  <span @click="delItem('exprice', item)">x</span>
                </div>
              </div>
            </div>
            <!-- <div style="text-align: right">
              <el-button type="primary" plain size="small"
                @click="submitFormEditWorkExprice(ruleFormRef_edit_workExprice)">保存</el-button>
            </div> -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="获取荣誉" name="third">
          <el-form
            v-if="activeName == 'third'" ref="ruleFormRef_edit_honor" :model="form_edit_honor"
            class="modifyContent_edit" label-width="auto" :label-position="labelPosition" :rules="rules_edit_honor"
          >
            <div class="big_box">
              <div class="big_box_edit_getHonor" style="margin-bottom: 20px">
                <h3 class="dialogTitle">
                  获奖荣誉
                </h3>
                <div class="edit_getHonor">
                  <div class="edit_getHonor_left">
                    <el-form-item label="是否获奖">
                      <el-radio-group v-model="form_edit_honor.sfhj" class="Lucs_inputBG" @change="agreeChange">
                        <el-radio label="1">
                          是
                        </el-radio>
                        <el-radio label="2">
                          否
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item v-if="ifShowInput" label="荣誉名称" prop="rymc">
                      <el-input v-model="form_edit_honor.rymc" autocomplete="off" class="Lucs_inputBG" />
                    </el-form-item>
                  </div>
                  <div class="edit_getHonor_right" style="position: relative">
                    <el-button v-if="ifShowInput" type="primary" plain size="small" class="addHonor" @click="submitFormEditHonor(ruleFormRef_edit_honor)">
                      添加
                    </el-button>
                  </div>
                </div>
                <div v-for="item in BackFillHonorList" :key="item.uh_id" class="honorList_single">
                  {{ item.uh_rymc }}
                  <span @click="delItem('honor', item)">x</span>
                </div>
              </div>
            </div>
            <!-- <div style="text-align: right">
              <el-button type="primary" plain size="small"
                @click="submitFormEditHonor(ruleFormRef_edit_honor)">保存</el-button>
            </div> -->
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="联系方式" name="fourth">
          <el-form
            v-if="activeName == 'fourth'" ref="ruleFormRef_edit_contact" :model="form_edit_contact"
            class="modifyContent_edit" label-width="auto" :label-position="labelPosition" :rules="rules_edit_contact"
          >
            <div class="big_box">
              <div class="big_box_edit_contact">
                <h3 class="dialogTitle">
                  联系方式
                </h3>
                <div class="edit_contact">
                  <div class="edit_contact_left">
                    <el-form-item label="联系电话" prop="lxdh">
                      <el-input
                        v-model="form_edit_contact.lxdh" autocomplete="off" placeholder="1xxxx"
                        class="Lucs_inputBG"
                      />
                    </el-form-item>
                  </div>
                  <div class="edit_contact_right">
                    <el-form-item label="电子邮箱">
                      <el-input
                        v-model="form_edit_contact.dzyx" autocomplete="off" placeholder="xxxxxx@sina.com"
                        class="Lucs_inputBG"
                      />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
            <div style="text-align: right">
              <el-button
                type="primary" plain size="small"
                @click="submitFormEditContact(ruleFormRef_edit_contact)"
              >
                保存
              </el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="isTeacher" label="任职信息" name="firth">
          <el-form
            v-if="activeName == 'firth'" ref="ruleFormRef_edit_emp" :model="form_edit_emp"
            class="modifyContent_edit" label-width="auto" :label-position="labelPosition" :rules="rules_edit_emp"
          >
            <div class="big_box">
              <div class="big_box_edit_contact">
                <h3 class="dialogTitle">
                  任职信息
                </h3>
                <div class="edit_contact">
                  <div class="edit_contact_left">
                    <el-form-item label="学校" prop="xx">
                      <el-input
                        v-model="form_edit_emp.xx" autocomplete="off" placeholder="请输入学校"
                        class="Lucs_inputBG"
                      />
                    </el-form-item>
                    <el-form-item label="学科" prop="xk">
                      <el-input
                        v-model="form_edit_emp.xk" autocomplete="off" placeholder="请输入学科"
                        class="Lucs_inputBG"
                      />
                    </el-form-item>
                  </div>
                  <div class="edit_contact_right">
                    <el-form-item label="年级" prop="nj">
                      <el-select-v2 v-model="form_edit_emp.nj" placeholder="请选择年级" :options="gradeOptions" :style="[dialog_style_W100]" class="Lucs_inputBG" />
                    </el-form-item>
                    <el-form-item label="班级" prop="bj">
                      <el-select-v2 v-model="form_edit_emp.bj" placeholder="请选择班级" :options="classOption" :style="[dialog_style_W100]" class="Lucs_inputBG" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>
            <div style="text-align: right">
              <el-button
                type="primary" plain size="small"
                @click="submitFormEditEmp(ruleFormRef_edit_emp)"
              >
                保存
              </el-button>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
@import "~/styles/button.scss";
@import "~/styles/dialog.scss";

.grzxContent {
  width: 100%;
  height: auto;
  background: #f6f9fd;
  box-sizing: border-box;
  padding: 0 10px;

  .baseTopInfo {
    width: 100%;
    position: relative;

    .BGshow {
      width: 100%;
      height: 103px;
      border-radius: 16px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .buttonShow {
      text-align: right;
      margin: 20px 16px;
    }

    .baseInfoShow {
      box-sizing: border-box;
      padding: 20px 10%;

      ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        li {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #8f95b2;
          line-height: 20px;
        }
      }
    }

    .posiNic {
      position: absolute;
      left: 50%;
      top: 20%;
      margin-left: -46px;
      text-align: center;

      .avator_nic {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        box-sizing: border-box;
        padding: 5px;

        .avator_nicIn {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #8f95b2;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .userName {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #081735;
      }
    }
  }

  .partShow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 15px;

    .partShow_left {
      width: 48%;
      min-height: 600px;

      .partShow_left_part {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
        margin-bottom: 25px;
        min-height: 200px;

        .managePart {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;

          p {
            text-align: center;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;
            color: #000000;
            margin-bottom: 5px;
            width: 140px;
            flex: 1;
            margin: 20px 25px 0 0; // 间隙为50px
            width: calc((100% - 50px) / 2); // 这里的50px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
            min-width: calc((100% - 50px) / 2); // 加入这两个后每个item的宽度就生效了
            max-width: calc((100% - 50px) / 2); // 加入这两个后每个item的宽度就生效了

            &:nth-child(2n) {
              // 去除第2n个的margin-right
              margin-right: 0;
            }
          }
        }
      }

      .partShow_left_part:last-child {
        margin-bottom: 0 !important;
      }
    }

    .partShow_right {
      width: 48%;

      .partShow_right_part {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0px 8px 16px 0px rgba(143, 149, 178, 0.15);
        margin-bottom: 25px;
        min-height: 200px;
      }

      .partShow_right_part:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
}

.honorLis {
  box-sizing: border-box;
  padding: 10px;

  p {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #000000;
    margin-bottom: 5px;
  }
}

//通用标题
.normalTitle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 47px;
  line-height: 47px;
  box-sizing: border-box;
  padding: 0 15px;
  border-bottom: 1px solid #e6e8f0;

  .normalTitle_bigTitleL {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    text-align: left;
    color: #081735;
  }

  .normalTitle_optionR {
    cursor: pointer;

    span {
      width: 73px;
      height: 25px;
      background: #eff3fb;
      border-radius: 8px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #4d4d4d;
      letter-spacing: 0.06px;
      padding: 5px 10px;
    }
  }
}

.normalContent {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;

  .singleWorkExperienceGroup {
    border-bottom: 1px dashed #3f8cff;
    box-sizing: border-box;
    padding: 10px 0 10px 0;

    .lineCover {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 5px;

      .lineCover_left {
        width: 50%;
        margin-right: 20px;
      }

      .lineCover_right {
        width: 50%;
      }

      &:last-child {
        margin-bottom: 0 !important;
      }
    }

    &:last-child {
      border-bottom: 0px dashed #3f8cff !important;
    }

    .markTitleMore {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #3f8cff;
      margin-bottom: 5px;
    }

    .markShowMore {
      height: 40px;
      line-height: 40px;
      border: 1px solid #ebf3ff;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #000000;
      box-sizing: border-box;
      padding: 0 10px;
    }
  }

  .normal_single_1 {
    width: 100%;
  }

  .normal_single_2 {
    flex: 1;
    margin: 25px 25px 0 0; // 间隙为50px
    width: calc((100% - 50px) / 2); // 这里的50px = (分布个数2-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 50px) / 2); // 加入这两个后每个item的宽度就生效了
    max-width: calc((100% - 50px) / 2); // 加入这两个后每个item的宽度就生效了

    &:nth-child(2n) {
      // 去除第2n个的margin-right
      margin-right: 0;
    }

    .markTitle {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #3f8cff;
      margin-bottom: 5px;
    }

    .markShow {
      height: 40px;
      line-height: 40px;
      border: 1px solid #ebf3ff;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #000000;
      box-sizing: border-box;
      padding: 0 10px;
    }
  }
}

.normalContent_1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;

  .normal_single_1 {
    flex: 1;
    margin-bottom: 25px;

    .markTitle {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #3f8cff;
      margin-bottom: 5px;
    }

    .markShow {
      height: 65px;
      line-height: 65px;
      border: 1px solid #ebf3ff;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #000000;
      box-sizing: border-box;
      padding: 0 10px;
    }
  }
}

.dialog_modifyContent {
  width: 680px !important;
  background: #ffffff;
  border-radius: 16px !important;

  .el-dialog__header {
    border: 1px dashed rgba(63, 63, 68, 0.1) !important;
  }

  .modifyContent {
    box-sizing: border-box;
    padding: 0 30%;
  }

  .el-dialog__footer {
    text-align: center !important;
  }
}

.dialog_nic {
  width: 92px;
  height: 92px;
  margin: 0 auto 20px auto;
  position: relative;

  .imgUrl {
    width: 82px;
    height: 82px;
    line-height: 82px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
  }

  .modifyIcon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 0%;
    background-color: #3f8cff;
    transform: translate(-50%, 0);
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.dialog_editor {
  .modifyContent_edit {
    .edit_baseInfo {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      max-height: 400px;
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
      border: 1px dashed #3f8cff;

      /*滚动条样式*/
      .innerbox::-webkit-scrollbar {
        width: 4px;
        /*height: 4px;*/
      }

      .innerbox::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(63, 140, 255, 1);
        background: rgba(63, 140, 255, 1);
      }

      .innerbox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(63, 140, 255, 1);
        border-radius: 0;
        background: rgba(63, 140, 255, 1);
      }

      .edit_baseInfo_left {
        flex: 1;
        margin-right: 2%;
      }

      .edit_baseInfo_right {
        flex: 1;
      }
    }

    .el-input__wrapper {
      width: 100% !important;
    }

    .edit_workExprice,
    .edit_getHonor,
    .edit_contact {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .edit_workExprice_left,
      .edit_getHonor_left,
      .edit_contact_left {
        flex: 1;
        margin-right: 2%;
      }

      .edit_workExprice_right,
      .edit_getHonor_right,
      .edit_contact_right {
        flex: 1;
      }
    }
  }
}

.dialogTitle {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #3f8cff;
  margin-bottom: 20px;
}

.addHonor {
  position: absolute;
  left: 10%;
  top: 70%;
  z-index: 13;
}

.honorList_single {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #000000;

  span {
    font-size: 16px;
    color: #3f8cff;
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
  }
}

:deep() .demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep() .el-dialog__body {
  padding: 5px 10px;
}
</style>
