<script setup>
import { ElMessage } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import {
  base_list,
  class_add,
  class_exit,
  grade_list,
  honor_add,
  honor_delete,
  honor_list,
  org_list,
  org_member_add,
  org_member_delete,
  org_member_list,
  user_Edit,
  user_detail,
  work_add,
  work_delete,
  work_edit,
  work_list,
} from '../api'
import { dealFigureToChinese } from '~/utils/common-util'

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  userId: {
    type: String,
    default: '',
  },
  schoolData: [],
  areaData: [],
  sydwData: [],
  showType: '',
})

const emit = defineEmits(['close'])
const ruleForm = ref({})

const formData = ref(props.data)
formData.value = formData.value.filter(item => item.key != 'gldw')
const ruleFormRef = ref(null)
const rules = reactive({})

const validateTel = (rule, value, callback) => {
  const reg_ph
    = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
  if (value && !reg_ph.test(value))
    callback(new Error('请输入正确的电话号码'))
  else callback()
}

initRules()
function initRules() {
  formData.value.map((item) => {
    if (!item.children)
      return

    item.children.map((val) => {
      if (val.required) {
        const obj = {
          required: true,
          message:
            val.type && val.type != 'textarea'
              ? `请选择${val.name}`
              : `请输入${val.name}`,
          trigger: val.type && val.type != 'textarea' ? 'change' : 'blur',
        }
        rules[val.key] = [obj]
      }
      if (val.type == 'email') {
        const obj = {
          type: 'email',
          message: '请输入正确的电子邮箱',
          trigger: ['blur', 'change'],
        }
        rules[val.key] = [obj]
      }
      else if (val.type == 'tel') {
        const obj = {
          validator: validateTel,
          message: '请输入正确的电话号码',
          trigger: ['blur', 'change'],
        }
        rules[val.key] = [obj]
      }
    })
  })
}

const selectObj = ref({
  ue_user_gender: [
    {
      name: '男',
      value: '1',
    },
    {
      name: '女',
      value: '2',
    },
  ],
  sfhj: [
    {
      name: '是',
      value: '1',
    },
    {
      name: '否',
      value: '2',
    },
  ],
})

const gradeData = ref([])
const jsRzxxSelectData = ref([])
const jdRzxxSelectData = ref([])

const handleAddData = (value) => {
  const data = JSON.parse(JSON.stringify(value.children))
  if (value.key == 'gzjl') {
    data.map((val) => {
      val.value = ''
    })
    value.childrenData.push({
      uw_id: '',
      data,
    })
  }
  else if (value.key == 'rzxx') {
    if (props.showType == 'jsxx') {
      data.map((val) => {
        val.value = ''
        if (val.key == 'sm_id')
          val.value = ruleForm.value.sm_id
      })
      value.childrenData.push({
        exist_cm_id: '',
        data,
      })
      jsRzxxSelectData.value.push({
        schoolData: props.schoolData,
        gradeData: gradeData.value,
        classData: [],
        subjectData: [],
      })
    }
    else if (props.showType == 'jdxx') {
      data.map((val) => {
        val.value = ''
      })
      value.childrenData.push({
        uom_id: '',
        uom_default: false,
        data,
      })
      jdRzxxSelectData.value.push({
        areaData: props.areaData,
        sydwData: props.sydwData,
        deptData: [],
      })
    }
  }
}

const handleRemoveData = async (data, i, key) => {
  if (key == 'gzjl') {
    if (data[i].uw_id == '') {
      data.splice(i, 1)
    }
    else {
      ElMessageBox.confirm('确定要删除该工作经历吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true,
        buttonSize: 'large',
        customClass: '_',
      })
        .then(async () => {
          const res = await work_delete({ uw_id: data[i].uw_id })
          if (res.code == 1) {
            ElMessage.success('删除成功！')
            initWorkData()
          }
        })
        .catch(() => { })
    }
  }
  else if (key == 'rzxx') {
    if (props.showType == 'jsxx') {
      if (data[i].exist_cm_id == '') {
        data.splice(i, 1)
        jsRzxxSelectData.value.splice(i, 1)
      }
      else {
        ElMessageBox.confirm('确定要删除该任职信息吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          buttonSize: 'large',
          customClass: '_',
        })
          .then(async () => {
            const res = await class_exit({
              cm_id: data[i].exist_cm_id,
              user_id: props.userId,
            })
            if (res.code == 1) {
              ElMessage.success('删除成功！')
              data.splice(i, 1)
              jsRzxxSelectData.value.splice(i, 1)
            }
          })
          .catch(() => { })
      }
    }
    else if (props.showType == 'jdxx') {
      if (data[i].uom_id == '') {
        data.splice(i, 1)
        jdRzxxSelectData.value.splice(i, 1)
        const arr = data.filter(item => item.uom_default == true)
        if (arr.length == 0)
          data[0].uom_default = true
      }
      else {
        ElMessageBox.confirm('确定要删除该任职信息吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          buttonSize: 'large',
          customClass: '_',
        })
          .then(async () => {
            const res = await org_member_delete({ uom_id: data[i].uom_id })
            if (res.code == 1) {
              ElMessage.success('删除成功！')
              initJdRzxxData()
            }
          })
          .catch(() => { })
      }
    }
  }
}

const rymcData = ref([])
const rymcValue = ref('')
const handleAddRymc = async () => {
  if (rymcValue.value.trim() == '') {
    ElMessage.error('请输入荣誉名称！')
    return
  }
  const obj = {
    user_honor: {
      uh_rymc: rymcValue.value,
      uh_user_id: props.userId,
    },
  }
  const res = await honor_add(obj)
  if (res.code == 1) {
    initHonorData()

    rymcValue.value = ''
  }
}

const handleRemoveRymc = async (i) => {
  ElMessageBox.confirm('确定要删除该荣誉名称吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    center: true,
    buttonSize: 'large',
    customClass: '_',
  })
    .then(async () => {
      const res = await honor_delete({ uh_id: rymcData.value[i].uh_id })
      if (res.code == 1) {
        ElMessage.success('删除成功！')
        initHonorData()
      }
    })
    .catch(() => { })
}

// 基础信息
initDetailInfo()
async function initDetailInfo() {
  const res = await user_detail({ user_id: props.userId })
  if (res.code == 1) {
    const allData = res.data
    ruleForm.value = {
      ue_user_realname: allData.user_realname, // 姓名
      ue_zgbh: allData.user_ext.ue_zgbh, // 职工编号
      ue_jgmc: allData.user_ext.ue_jgmc, // 籍贯
      ue_user_cardno: allData.user_ext.ue_user_cardno, // 身份证号码
      ue_cym: allData.user_ext.ue_cym, // 曾用名
      ue_user_birthday: allData.user_ext.ue_user_birthday, // 出生日期
      ue_mzmc: allData.user_ext.ue_mzmc, // 民族
      ue_user_gender: allData.user_ext.ue_user_gender, // 性别
      ue_zzmmmc: allData.user_ext.ue_zzmmmc, // 政治面貌
      ue_whcdmc: allData.user_ext.ue_whcdmc, // 文化程度
      ue_szzbmc: allData.user_ext.ue_szzbmc, // 所在支部
      ue_rdsj: allData.user_ext.ue_rdsj, // 入党时间
      ue_bzlxmc: allData.user_ext.ue_bzlxmc, // 编制类型
      ue_szdxzmc: allData.user_ext.ue_szdxzmc, // 所在党小组
      ue_yynlmc: allData.user_ext.ue_yynlmc, // 语言能力
      ue_jzglbmc: allData.user_ext.ue_jzglbmc, // 教职工类别
      sm_id: allData.sm_info.sm_id, // 学校
      sm_name: allData.user_ext.sm_name,
      subject_name: allData.user_ext.subject_name, // 学科
      ue_xlbj: allData.user_ext.ue_xlbj, // 训练背景
      ue_tc: allData.user_ext.ue_tc, // 特长
      ue_user_phone: allData.user_ext.ue_user_phone, // 联系方式
      ue_user_email: allData.user_ext.ue_user_email, // 电子邮件
    }

    if (props.showType == 'jsxx') {
      ruleForm.value.sm_id
        && ruleForm.value.sm_id != 0
        && (await handleSchoolChange(ruleForm.value.sm_id))
      initJsRzxxData(allData.cm_info)
    }
    else if (props.showType == 'jdxx') {
      initJdRzxxData()
    }

    initWorkData()
    initHonorData()
  }
}

// 教师任职信息
function initJsRzxxData(data) {
  if (data.length == 0) {
    formData.value.map((item) => {
      if (item.key == 'rzxx' && item.showType == 'jsxx') {
        const children = JSON.parse(JSON.stringify(item.children))
        children.map((val) => {
          val.value = ''
        })
        item.childrenData = [
          {
            exist_cm_id: '',
            data: [...children],
          },
        ]
        jsRzxxSelectData.value = [
          {
            schoolData: props.schoolData,
            gradeData: gradeData.value,
            classData: [],
            subjectData: [],
          },
        ]
      }
    })
  }
  else {
    formData.value.map((item) => {
      if (item.key == 'rzxx' && item.showType == 'jsxx') {
        item.childrenData = []
        jsRzxxSelectData.value = []
        data.map((v, index) => {
          jsRzxxSelectData.value.push({
            schoolData: props.schoolData,
            gradeData: gradeData.value,
            classData: [],
            subjectData: [],
          })
          const children = JSON.parse(JSON.stringify(item.children))
          children.map((value) => {
            value.value = v[value.key]
            if (value.key == 'grade')
              handleJsRzxxChange(value, index, value.value, children)
          })
          item.childrenData.push({
            exist_cm_id: v.cm_id,
            data: [...children],
          })
        })
      }
    })
  }
}

const handleSchoolChange = async (sm_id) => {
  // 年级学科
  const res2 = await base_list({ sm_id, token: '' })
  const arr1 = []
  if (res2.code == 1) {
    for (const key in res2.data)
      arr1.push(res2.data[key])
  }

  // 年级班级
  const res3 = await grade_list({ sm_id })
  let arr2 = []
  if (res3.code == 1)
    arr2 = [...res3.data]

  gradeData.value = []
  arr1.map((item) => {
    arr2.map((val) => {
      if (item.grade == val.grade) {
        const obj = {
          grade: val.grade,
          gradename: item.gradename,
          subjects: item.subjects,
          classes: val.classes,
        }
        gradeData.value.push(obj)
      }
    })
  })
}

const handleJsRzxxChange = async (item, index, val, data, childrenData) => {
  if (item.key == 'sm_id') {
    ruleForm.value.sm_id = val
    childrenData.map((item) => {
      item.data.map((value) => {
        value.value = ''
        if (value.key == 'sm_id')
          value.value = val
      })
    })
    gradeData.value = []
    val && (await handleSchoolChange(val))
    jsRzxxSelectData.value.map((item) => {
      item.gradeData = gradeData.value
      item.classData = []
      item.subjectData = []
    })
  }
  else if (item.key == 'grade') {
    data.map((v) => {
      v.key != 'sm_id' && v.key != 'grade' && (v.value = '')
    })
    gradeData.value.map((item) => {
      if (val == item.grade) {
        jsRzxxSelectData.value[index].classData = item.classes
        jsRzxxSelectData.value[index].subjectData = item.subjects
      }
    })
  }
}

// 局端任职信息
async function initJdRzxxData() {
  const res = await org_member_list({ uom_user_id: props.userId })
  if (res.code == 1) {
    const data = res.data.page_data
    if (data.length != 0) {
      formData.value.map((item) => {
        if (item.key == 'rzxx' && item.showType == 'jdxx') {
          item.childrenData = []
          jdRzxxSelectData.value = []
          data.map((value, index) => {
            jdRzxxSelectData.value.push({
              areaData: props.areaData,
              sydwData: props.sydwData,
              deptData: [],
            })
            const children = JSON.parse(JSON.stringify(item.children))
            const nameObj = {}
            children.map((val) => {
              if (val.keyName)
                nameObj[val.keyName] = value[val.keyName]

              val.value = value[val.key]
              if (val.key == 'uo_id_0')
                handleJdRzxxChange(val, index, val.value)
            })

            let obj = {
              uom_id: value.uom_id,
              uom_default: value.uom_default_option_k == 1,
              data: children,
            }
            obj = Object.assign(obj, nameObj)
            item.childrenData.push(obj)
          })
        }
      })
    }
    else {
      formData.value.map((item) => {
        if (item.key == 'rzxx' && item.showType == 'jdxx') {
          const children = JSON.parse(JSON.stringify(item.children))
          children.map((val) => {
            val.value = ''
          })
          item.childrenData = [
            {
              uom_id: '',
              uom_default: true,
              data: [...children],
            },
          ]
          jdRzxxSelectData.value = [
            {
              areaData: props.areaData,
              sydwData: props.sydwData,
              deptData: [],
            },
          ]
        }
      })
    }
  }
}

const handleJdRzxxChange = async (item, index, val, data, childrenData) => {
  if (item.key == 'uo_id_0') {
    if (data) {
      data.map((v) => {
        v.key == 'uo_id_1' && (v.value = '')
      })
    }
    const res = await org_list({ uo_pid: val, limit: '100' })
    if (res.code == 1)
      jdRzxxSelectData.value[index].deptData = res.data.page_data
  }
  else if (item.key == 'uom_default') {
    childrenData.map((v, i) => {
      v[item.key] = i == index
    })
  }

  if (item.keyName && childrenData) {
    jdRzxxSelectData.value[index][item.selectKey].map((v) => {
      if (val == v[item.field]) {
        childrenData[index][item.keyName] = v[item.fieldName]
        if (item.key == 'uo_id_1')
          childrenData[index].uom_uo_path = v.uo_path
      }
    })
  }
}

// 工作经历
async function initWorkData() {
  const res1 = await work_list({ uw_user_id: props.userId, sort: 'asc' })
  if (res1.code == 1) {
    const data = res1.data.page_data
    if (data.length != 0) {
      formData.value.map((item) => {
        if (item.key == 'gzjl') {
          item.childrenData = []
          data.map((value) => {
            const children = JSON.parse(JSON.stringify(item.children))
            children.map((val) => {
              val.value = value[val.key]
            })
            item.childrenData.push({
              uw_id: value.uw_id,
              data: children,
            })
          })
        }
      })
    }
    else {
      formData.value.map((item) => {
        if (item.key == 'gzjl') {
          const children = JSON.parse(JSON.stringify(item.children))
          children.map((val) => {
            val.value = ''
          })
          item.childrenData = [
            {
              uw_id: '',
              data: [...children],
            },
          ]
        }
      })
    }
  }
}

// 获奖荣誉
async function initHonorData() {
  const res2 = await honor_list({ uh_user_id: props.userId })
  if (res2.code == 1) {
    rymcData.value = res2.data.page_data
    ruleForm.value.sfhj = rymcData.value.length != 0 ? '1' : '2'
  }
}

const handleCancel = (type) => {
  emit('close', type)
}

const handleSubmit = async (formEl) => {
  if (!formEl)
    return

  formEl.validate(async (valid, fields) => {
    if (valid) {
      // 基础信息
      const filterKeys = ['sfhj']
      const obj = {}
      for (const key in ruleForm.value) {
        if (!filterKeys.includes(key))
          obj[key] = ruleForm.value[key]
      }
      const data = {
        user_ext: obj,
        user_profile: {
          user_realname: ruleForm.value.ue_user_realname,
        },
        user_id: props.userId,
      }
      const res = await user_Edit(data)
      if (res.code != 1)
        return

      // 教师任职信息
      if (props.showType == 'jsxx') {
        const child1 = formData.value.filter(
          item => item.key == 'rzxx' && item.showType == props.showType,
        )[0].childrenData
        if (child1) {
          const arr = []
          child1.map((item) => {
            const jsRzObj = {}
            item.data.map((value) => {
              jsRzObj[value.key] = value.value
            })
            if (jsRzObj.sm_id) {
              arr.push({
                user_id: props.userId,
                cm_id: jsRzObj.cm_id,
                subject_id: jsRzObj.subjectid,
              })
            }
          })
          if (arr.length != 0) {
            const res1 = await class_add({ join: arr })
            if (res1.code != 1)
              return
          }
        }
      }

      // 局端任职信息
      if (props.showType == 'jdxx') {
        const child2 = formData.value.filter(
          item => item.key == 'rzxx' && item.showType == props.showType,
        )[0].childrenData
        if (child2) {
          const arr = []
          child2.map((item) => {
            const jdRzObj = {}
            item.data.map((value) => {
              jdRzObj[value.key] = value.value
            })
            const obj = {
              uom_user_id: props.userId,
              uom_id: item.uom_id,
              uo_id_0: jdRzObj.uo_id_0,
              uo_name_0: item.uo_name_0 || '',
              uo_id_1: jdRzObj.uo_id_1,
              uo_name_1: item.uo_name_1 || '',
              uom_uo_path: item.uom_uo_path || '',
              uom_zw: jdRzObj.uom_zw,
              uom_default: item.uom_default ? '1' : '2',
              uom_area_id1: '15',
              uom_area_id2: '235',
              uom_area_id3: '2615',
              uom_area_id4: jdRzObj.uom_area_id4,
              uom_area_id4_name: item.uom_area_id4_name || '',
            }
            arr.push(obj)
          })
          await org_member_add({ user_org_member: arr })
        }
      }

      // 工作经历
      const child = formData.value.filter(item => item.key == 'gzjl')[0]
        .childrenData
      if (child) {
        child.map(async (item) => {
          const obj = {
            uw_user_id: props.userId,
          }
          item.data.map((val) => {
            obj[val.key] = val.value
          })
          let data1 = {
            user_working: obj,
          }
          if (item.uw_id == '') {
            await work_add(data1)
          }
          else {
            data1 = Object.assign({ uw_id: item.uw_id }, data1)
            await work_edit(data1)
          }
        })
      }

      ElMessage.success('保存成功！')
      handleCancel(1)
    }
    else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<template>
  <div class="addAndEdit px-50px">
    <el-form ref="ruleFormRef" label-position="top" :model="ruleForm" :rules="rules" label-width="120px">
      <template v-for="(value, i) in formData" :key="i">
        <div v-if="!value.showType || value.showType == showType" class="mb-10">
          <template v-if="value.key == 'rzxx'">
            <div v-for="(children, ci) in value.childrenData" :key="ci">
              <div class="flex justify-between items-center mb-20px">
                <div class="title">
                  <span>{{ value.name }}</span>
                  <span v-if="value.childrenData.length > 1">{{
                    dealFigureToChinese(ci + 1)
                  }}</span>
                </div>
                <div class="flex items-center space-x-6">
                  <el-checkbox
                    v-if="showType == 'jdxx'" v-model="children.uom_default" label="登录默认部门" @change="
                      (val) =>
                        handleJdRzxxChange(
                          { key: 'uom_default' },
                          ci,
                          undefined,
                          undefined,
                          value.childrenData,
                        )
                    "
                  />
                  <el-button v-if="value.childrenData.length > 1" type="primary" size="small" plain @click="handleRemoveData(value.childrenData, ci, value.key)">
                    删除
                  </el-button>
                </div>
              </div>
              <div v-if="jsRzxxSelectData.length != 0 && showType == 'jsxx'" class="grid grid-cols-2 gap-x-10">
                <el-form-item v-for="(item, index) in children.data" :key="index" :class="item.class" :label="item.name" :prop="item.key">
                  <el-input v-if="!item.type" v-model="item.value" />
                  <el-select
                    v-if="item.type == 'select'" v-model="item.value" class="w-full" filterable clearable @change="
                      (val) =>
                        handleJsRzxxChange(
                          item,
                          ci,
                          val,
                          children.data,
                          value.childrenData,
                        )
                    "
                  >
                    <el-option v-for="(val, vi) in jsRzxxSelectData[ci][item.selectKey]" :key="vi" :label="val[item.fieldName]" :value="val[item.field]" />
                  </el-select>
                </el-form-item>
              </div>
              <div v-if="jdRzxxSelectData.length != 0 && showType == 'jdxx'" class="grid grid-cols-2 gap-x-10">
                <el-form-item v-for="(item, index) in children.data" :key="index" :class="item.class" :label="item.name" :prop="item.key">
                  <el-input v-if="!item.type" v-model="item.value" />
                  <el-select
                    v-if="item.type == 'select'" v-model="item.value" class="w-full" filterable clearable @change="
                      (val) =>
                        handleJdRzxxChange(
                          item,
                          ci,
                          val,
                          children.data,
                          value.childrenData,
                        )
                    "
                  >
                    <el-option v-for="(val, vi) in jdRzxxSelectData[ci][item.selectKey]" :key="vi" :label="val[item.fieldName]" :value="val[item.field]" />
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <el-button type="primary" size="small" plain @click="handleAddData(value)">
              添加任职
            </el-button>
          </template>
          <template v-else-if="value.key == 'gzjl'">
            <div v-for="(children, ci) in value.childrenData" :key="ci">
              <div class="flex justify-between">
                <div class="title mb-20px">
                  <span>{{ value.name }}</span>
                  <span v-if="value.childrenData.length > 1">{{
                    dealFigureToChinese(ci + 1)
                  }}</span>
                </div>
                <el-button v-if="value.childrenData.length > 1" type="primary" size="small" plain @click="handleRemoveData(value.childrenData, ci, value.key)">
                  删除
                </el-button>
              </div>
              <div class="grid grid-cols-2 gap-x-10">
                <el-form-item v-for="(item, index) in children.data" :key="index" :class="item.class" :label="item.name" :prop="item.key">
                  <el-input v-if="!item.type" v-model="item.value" />
                  <el-date-picker v-if="item.type == 'date'" v-model="item.value" class="w-full" value-format="YYYY-MM-DD" />
                </el-form-item>
              </div>
            </div>
            <el-button type="primary" size="small" plain @click="handleAddData(value)">
              添加经历
            </el-button>
          </template>
          <template v-else>
            <div class="title mb-20px">
              {{ value.name }}
            </div>
            <div class="grid grid-cols-2 gap-x-10">
              <template v-for="(item, index) in value.children" :key="index">
                <el-form-item v-if="!item.showType || item.showType == showType" :class="item.class" :label="item.name" :prop="item.key">
                  <el-input
                    v-if="
                      !item.type || item.type == 'email' || item.type == 'tel'
                    " v-model="ruleForm[item.key]" :show-word-limit="item.limit" :maxlength="item.limitLen"
                  />
                  <el-input v-if="item.type == 'textarea'" v-model="ruleForm[item.key]" type="textarea" :rows="3" />
                  <el-date-picker v-if="item.type == 'date'" v-model="ruleForm[item.key]" class="w-full" value-format="YYYY-MM-DD HH:mm:ss" />
                  <el-select v-if="item.type == 'select'" v-model="ruleForm[item.key]" class="w-full" filterable clearable :multiple="item.multiple">
                    <el-option v-for="(val, vi) in selectObj[item.key]" :key="vi" :label="val.name || val[item.fieldName]" :value="val.value || val[item.field]" />
                  </el-select>
                  <el-radio-group v-if="item.type == 'radio'" v-model="ruleForm[item.key]">
                    <el-radio v-for="(val, vi) in selectObj[item.key]" :key="vi" :label="val.value">
                      {{ val.name }}
                    </el-radio>
                  </el-radio-group>
                  <div v-if="item.type == 'rymc'">
                    <div class="flex items-center space-x-4">
                      <el-input v-model="rymcValue" />
                      <el-button type="primary" size="small" @click="handleAddRymc">
                        添加
                      </el-button>
                    </div>
                    <div>
                      <div v-for="(val, vi) in rymcData" :key="vi" class="flex items-center space-x-4">
                        <span class="rymcName">{{ val.uh_rymc }}</span>
                        <el-icon color="#3F8CFF" class="cursor-pointer" @click="handleRemoveRymc(vi)">
                          <Close />
                        </el-icon>
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </template>
            </div>
          </template>
        </div>
      </template>
    </el-form>

    <div class="flex_center space-x-12">
      <el-button size="large" @click="handleCancel(2)">
        取消
      </el-button>
      <el-button size="large" type="primary" @click="handleSubmit(ruleFormRef)">
        确定
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/message-box.scss";
.addAndEdit {
  :deep(.el-form) {
    .title {
      color: #3f8cff;
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
    }
    .el-form-item__label {
      font-size: 14px;
      color: #3f3f44;
      font-weight: 600;
      margin-bottom: 5px;
    }
    .el-form-item__content {
      .el-input,
      .el-input__wrapper,
      .el-textarea__inner {
        width: 100%;
        box-shadow: none;
        border-radius: 8px;
        background: #f7f7f7;
      }
      .rymcName {
        color: #000;
        font-weight: 600;
        line-height: 30px;
      }
      .el-input__count-inner {
        background: transparent;
      }
    }
  }
}
</style>
