<template>
  <div id="content">
    <div v-if="formAll&&formAllBody&&formAllBody.length" style="text-align:left;padding:10px">
        <el-select v-model="querySite" @change="selectChange">
          <el-option v-for="item in querySiteList" :key="item" :label="item" :value="item" >
            <span style="float: left">{{ item }}</span>
          </el-option>
        </el-select>
        <el-button type="primary" @click="echoClick">
          回显
        </el-button>
        <el-button type="primary" @click="temStorage">
          暂存
        </el-button>
        <el-button type="primary" @click="temStorageEcho">
          暂存回显
        </el-button>
        <el-button type="primary" @click="sunmitAll">
          提交
        </el-button>
      </div>
    <div id="navMenuContent">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="index">{{item}}</el-menu-item>
      </el-menu>
    </div>
    <div class="switchContent">
      <div v-if="formAll&&formAllBody&&formAllBody.length">
        <div v-for="(formItem,formItemIndex) in formAll" :key="formItemIndex">
          <el-form
            v-show="formItem[`form${formItemIndex+1}Show`]"
            :model="formItem[`form${formItemIndex+1}`]"
            :rules="rules"
            ref="form"
            class="demo-ruleForm"
            label-position="right"
            label-width="130px"
            size="mini"
          >
          <!-- {{`form${index+1}`}} -->
            <el-row v-for="(i,index) in formAllBody[formItemIndex+1] " :key="index" class="rowClass">
              <el-col :span="6" v-if="i.name" class="subTitle">{{i.name}}</el-col>
              <el-col :span="6" v-for="(item,index) in i.data " :key="index" style="position:relative">
                <el-form-item v-if="parseInt(item.fieldType) === 1" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input">
                  <el-input v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark"><i slot="suffix">{{item.unit}}</i></el-input>
                </el-form-item>
                <el-form-item v-if="parseInt(item.fieldType) === 2" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input">
                  <el-select v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark">
                    <el-option v-for="item in creatListTest(item.selectOption)" :key="item.code" :label="item.value" :value="item.value" >
                      <span style="float: left">{{ item.value }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="parseInt(item.fieldType) === 3" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input form-switch">
                  <el-switch v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </el-form-item>
                <el-form-item v-if="parseInt(item.fieldType) === 5" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input">
                  <el-input v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark"><i slot="suffix">{{item.unit}}</i></el-input>
                </el-form-item>
                <div v-if="parseInt(item.fieldType) === 4" class="input-switch-div">
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <!-- <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input> -->
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1;">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${0}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${1}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${1}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${2}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${2}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${3}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${3}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${4}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1;">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${4}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${5}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${5}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${6}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${6}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                  <el-form-item :prop="item.fieldIdentifier" class="el-form-item-input input-switch" style="flex:1">
                    <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${7}`]" :placeholder="item.validatorMark"></el-input>
                  </el-form-item>
                  <el-form-item class="el-form-item-input input-switch" style="flex:1">
                    <el-switch v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}switch${7}`]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                  </el-form-item>
                </div>
                <el-form-item v-if="parseInt(item.fieldType) === 6" :label="item.fieldName" :prop="item.fieldIdentifier" class="el-form-item-input">
                    <el-select v-model="formItem[`form${formItemIndex+1}`][item.fieldIdentifier]" :placeholder="item.validatorMark" multiple collapse-tags>
                      <el-option v-for="(item,index) in creatListTest(item.selectOption)" :key="item.code" :label="item.value" :value="index" >
                        <span style="float: left">{{ item.value }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      
    </div>
  </div>
</template>
<script>


export default {
  data() {
    return {
      querySite:'2020081800',
      rtuCode:'',
      querySiteList:[],
      siteNameList:['遥测站设置','中心站设置','传感器型号选择','气象传感通信设置','工业相机设置','水文传感通信','从机设置',
      '数据滤波','水位计','雨量计','流量计','蒸发皿','土壤沉降仪','4-20mA设置','其他设置'],
      formAll:[],
      // siteNameList:[],
      formAllBody:[],
      activeIndex: '0',
      rules:{},
    };
  },
  mounted() {
    
  },
  methods: {
    echoClick(){
      this.formAll=[]
      this.activeIndex = '0'
      this.initPage(this.querySite)
      // this.handleSelect(0)
      // console.log(this.activeIndex)
    },
    temStorageEcho(){
      // this.activeIndex = '0'

      // console.log(JSON.parse(sessionStorage.getItem(name)),111)
      this.formAll = JSON.parse(sessionStorage.getItem(name))
    },
    temStorage(){
      try{
        sessionStorage.setItem(name, JSON.stringify(this.formAll));
        this.$message({message: `保存成功`,type: "success"});
      } catch(err) {
        this.$message({message: err,type: "warning"});
      }
      // localStorage.getItem(name);
      // console.log(sessionStorage.getItem(name),111)
    },
    sunmitAll(){
      // 提交所有表单，循环校验所有表单，当有个表单校验失败就break，提示该表单校验失败，根据校验成功总数或者无失败确定完成，组装数据发送到后台
      var successCount = 0
      var successFlag = false
      for(var i = 0; i<15;i++){
        this.$refs['form'][i].validate((valid) => {
          if (valid) {
            successCount++
          } else {
            // this.$message({message: `${this.siteNameList[i]} 校验失败，请查看`,type: "warning"});
            // alert(`${this.siteNameList[i]} 校验失败，请查看`);
            // this.$notify({
            //   title: '警告',
            //   message: `${this.siteNameList[i]} 校验失败，请查看`,
            //   type: 'warning'
            // });
            successFlag = true
            // return false;
          }
        });
        // if(successFlag){
        //   return false
        // }
      }
      if(successCount === this.siteNameList.length){
        this.$message({message: '表单全部校验成功',type: "success"});
      }else{
        // this.$message({message: `第${i}个表单校验失败，请查看`,type: "warning"});
      }
      // 组装数据需要的属性，暂时是死值，也可以循环出来
      const parmas ={
        data:{
          rtuCode:this.rtuCode,
          rtuTelemeteringStationSetting:this.formAll[0].form1,
          rtuCentreSetting:this.formAll[1].form2,
          rtuSenseTypeSetting:this.formAll[2].form3,
          rtuMeteorologicalSensingCommunicationSetting:this.formAll[3].form4,
          rtuIndustrialCameraSetting:this.formAll[4].form5,
          rtuHydrologicSensingCommunication:this.formAll[5].form6,
          rtuSlaveSetting:this.formAll[6].form7,
          rtuDataFilter:this.formAll[7].form8,
          rtuWaterLevelSetting:this.formAll[8].form9,
          rtuRainSetting:this.formAll[9].form10,
          rtuFlowmeterSetting:this.formAll[10].form11,
          rtuEvaporatingDishSetting	:this.formAll[11].form12,
          rtuSoilSettler:this.formAll[12].form13,
          rtu4To20Setting:this.formAll[13].form14,
          rtuOtherSetting:this.formAll[14].form15
        }
      }
      // 之前初始化时将3处的两个数组生成了需要的字段，现在需要把每处16个字段组装成两数组，删除不需要的字段,转化方法暂时写在这里
      function dealInputSwitch(str='rtushuiwen_shangqingarrInt',strBool='rtushuiwen_shangqingarrboolean'){
        var form6Input=[];
        var form6Switch=[];
        var strTarget='rtuHydrologicSensingCommunication'
        for(let i =0;i<8;i++){
          var hasInput = parmas.data[strTarget].hasOwnProperty(`${str}input${i}`)
          if(hasInput){
            form6Input[i]=parmas.data[strTarget][`${str}input${i}`]
          }else{
            form6Input[i]= null
          }
          parmas.data[strTarget][str]=form6Input
          delete parmas.data[strTarget][`${str}input${i}`]
          var hasSwitch = parmas.data[strTarget].hasOwnProperty(`${str}switch${i}`)
          if(hasSwitch){
            form6Switch[i]=parmas.data[strTarget][`${str}switch${i}`]
          }else{
            form6Switch[i]= false
          }
          parmas.data[strTarget][strBool]=form6Switch
          delete parmas.data[strTarget][`${str}switch${i}`]
        }
      }
      dealInputSwitch('rtushuiwen_shangqingarrInt','rtushuiwen_shangqingarrboolean');
      dealInputSwitch('rtushuiwen_chenjiangarrInt','rtushuiwen_chenjiangarrboolean');
      dealInputSwitch('rtushuiwen_zhaweiarrInt','rtushuiwen_zhaweiarrboolean');
      let rtuAddUpTimes= parmas.data['rtuTelemeteringStationSetting']['rtuAddUpTimes'].sort((item1, item2) => item1 - item2)
      let rtucamera_jiabao= parmas.data['rtuIndustrialCameraSetting']['rtucamera_jiabao'].sort((item1, item2) => item1 - item2)
      let rtuAddUpTimesNew=[]
      let rtucamera_jiabaoNew=[]
      // console.log(rtuAddUpTimes,'rtuAddUpTimes')
      for(var i =0;i<24;i++){
        rtuAddUpTimesNew.push(0)
        rtucamera_jiabaoNew.push(0)
      }
      rtuAddUpTimes.forEach((item,index)=>{rtuAddUpTimesNew[item]= 1})
      rtucamera_jiabao.forEach((item,index)=>{rtucamera_jiabaoNew[item]= 1})
      parmas.data['rtuTelemeteringStationSetting']['rtuAddUpTimes'] = rtuAddUpTimesNew
      parmas.data['rtuIndustrialCameraSetting']['rtucamera_jiabao'] = rtucamera_jiabaoNew
      this.$http.post(`${this.nozzle.rTUSettingServiceUpdate}`,parmas).then(res=>{
        // console.log(res,'rTUSettingServiceUpdate')
        this.echoClick()
      })
      // console.log(parmas,'form6Inputform6Input')
      // this.formAll=[]
      // this.initPage(this.querySiteList[1])
    },
    creatListTest(arr){
       var arrList = arr.split(',')
      // console.log(arrList,'arrrrrrrr')
      let list = arrList.map((item,index)=>{
        let obj={};obj['code']=index;obj['value']=item;return obj
      })
      return list
    },
    creatList(arr){
      // 下拉框需要的option数据，ele需要value和lable，value是点击后的字段值，lable是展示值
      let list = arr.map((item,index)=>{
        let obj={};obj['code']=index+1;obj['value']=item;return obj
      })
      return list
    },
    handleSelect(key) {
      this.activeIndex = key
      // console.log(key)
      for(var i = 0;i<15;i++){
        if(key != i){
          this.formAll[i][`form${i+1}Show`]= false
        }else{
          this.formAll[i][`form${i+1}Show`]= true
        }
      }
    },
    selectChange(val){
      // console.log(val,'val')
      this.echoClick(val)
    },
    async initPage(site){
      // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
      let resFirst = await this.$http.post(`${this.nozzle.rTUSettingServiceQueryById}?code=${site}`)
      let resData = resFirst.data.data
      let formArr=['rtuTelemeteringStationSetting','rtuCentreSetting','rtuSenseTypeSetting','rtuMeteorologicalSensingCommunicationSetting','rtuIndustrialCameraSetting','rtuHydrologicSensingCommunication',
      'rtuSlaveSetting','rtuDataFilter','rtuWaterLevelSetting','rtuRainSetting','rtuFlowmeterSetting','rtuEvaporatingDishSetting','rtuSoilSettler','rtu4To20Setting','rtuOtherSetting']
      // console.log(this.formAll,'ressssss')
      // this.formAll={}
      this.rtuCode = resData.rtuCode
      for(let i = 1;i<=15;i++){
        let obj ={};
        // 水文传感里是第6个表单
        if(i!==6 && i!==1&& i!==5){
          obj[`form${i}`]=resData[formArr[i-1]]
        }else if(i===1){
          var formObj = Object.assign(resData[formArr[i-1]])
          var rtuAddUpTimesNew=[]
          if(!formObj.hasOwnProperty('rtuAddUpTimes')){
            return
          }
          formObj.rtuAddUpTimes.forEach((res,index)=>{
            if(res===1){
              rtuAddUpTimesNew.push(index)
            }
          })
          // form1Obj.hasOwnProperty('rtuAddUpTimes')
          formObj.rtuAddUpTimes=rtuAddUpTimesNew
          // console.log(form1Obj,'form1Obj')
          obj[`form${i}`]=formObj
        }else if(i===5){
          let formObj = Object.assign(resData[formArr[i-1]])
          let rtucamera_jiabaoNew=[]
          if(!formObj.hasOwnProperty('rtucamera_jiabao')){
            return
          }
          formObj.rtucamera_jiabao.forEach((res,index)=>{
            if(res===1){
              rtucamera_jiabaoNew.push(index)
            }
          })
          formObj.rtucamera_jiabao=rtucamera_jiabaoNew
          // console.log(form1Obj,'form1Obj')
          obj[`form${i}`]=formObj
        }else if(i===6){
          var form6Obj = resData[formArr[i-1]]
          // 每一处需要input switch各8个共16个模拟字段，只处理第6个表单
          function creatInputSwitch(str,strBool){
            if(form6Obj.hasOwnProperty(str)&&form6Obj.hasOwnProperty(strBool)){
              for(let i=0;i<8;i++){
                form6Obj[`${str}input${i}`]= form6Obj[str][i]
                form6Obj[`${str}switch${i}`]= form6Obj[strBool][i]
              }
              delete form6Obj[str]
              delete form6Obj[strBool]
            }
          }
          creatInputSwitch('rtushuiwen_shangqingarrInt','rtushuiwen_shangqingarrboolean');
          creatInputSwitch('rtushuiwen_chenjiangarrInt','rtushuiwen_chenjiangarrboolean');
          creatInputSwitch('rtushuiwen_zhaweiarrInt','rtushuiwen_zhaweiarrboolean');
          obj[`form${i}`]=form6Obj
        }
        if(i!==1){
          obj[`form${i}Show`]=false
        }else{
          obj[`form${i}Show`]=true
        }
        // 表单数据赋值完成，控制表单切换的formshow,也放在一起了
        this.formAll.push(obj)
        // console.log(this.formAll,'this.formAll')
      }
    },
    validatorAll(rule, value, callback,type,sug,alart){
      let typeLocal = type;
      let sugLocal = sug;
      let alartLocal = alart;
      // 数字范围、数字长度、字符串长度、正则等
      if(value&&parseInt(typeLocal) === 1){ // 数字范围
        if(value !== undefined){
          let sug1=parseInt(sugLocal.split(',')[0])
          let sug2=parseInt(sugLocal.split(',')[1])
          if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))}
        }else{
          callback()
        }
      }else
      if(value&&parseInt(typeLocal) === 2 &&sugLocal){ // 正则
        let regExp =sugLocal.slice(1,-1)
        let reg = new RegExp(regExp)
          if(reg.test(value)){
            callback()
          }else{
            callback(new Error(alartLocal))
          }
      }else
      if(value&&parseInt(typeLocal) === 3){
        if(sugLocal === undefined || sugLocal === ''){ // 下拉框 不显示错误信息
          callback()
        }else{
          // console.log(value,sugLocal.indexOf(','),'value')
          if(sugLocal.indexOf(',') !== -1){ // 带，的是范围，不带则是固定长度
            let sug1=parseInt(sugLocal.split(',')[0])
            let sug2=parseInt(sugLocal.split(',')[1])
            if(value.length >=sug1 && value.length <=sug2){callback()}else{callback(new Error(alartLocal))}
          }else if(sugLocal.indexOf(',') === -1){
            // console.log(sugLocal.indexOf(','),parseInt(sugLocal))
            if(value.length === parseInt(sugLocal)){callback()}else{callback(new Error(alartLocal))}
          }
        }
      }else
      if(value&&parseInt(typeLocal) === 4){
        if(sugLocal === undefined || sugLocal === ''){
          callback()
        }else{
          let sug1=parseInt(sugLocal.split(',')[0])
          let sug2=parseInt(sugLocal.split(',')[1])
          if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))}
        }
      }else
      if(value&&parseInt(typeLocal) === 5){
        // console.log(value,'value')
        if(typeof value !== 'number'){
          callback(new Error('请输入纯数字'))
        }else{
          let sug1=parseInt(sugLocal.split(',')[0])
          let sug2=parseInt(sugLocal.split(',')[1])
          if(sug1<=value && value<=sug2){callback()}else{callback(new Error(alartLocal))}
        }
      }else{callback()}
    },
    formControl(){
      function uniq(array){
          var temp = []; //一个新的临时数组
          for(var i = 0; i < array.length; i++){
              if(temp.indexOf(array[i]) == -1){
                  temp.push(array[i]);
              }
          }
          return temp;
      }
      // 生成表单控件的接口
      this.$http.post(this.nozzle.rtuPageQueryPage).then(res=>{
        var dataRes = res.data.data
            // console.log(dataRes,'dataRes')
        for(var i in dataRes){
            if(dataRes[i].length !==0){
            dataRes[i].forEach((item,index,arr) =>{
                this.rules[item.fieldIdentifier] = [{ validator: (rule, value, callback)=>{this.validatorAll(rule, value, callback,item.validatorType,item.validatorRules,item.validatorErrorText)}, trigger: 'change' }]
            })
            let sub_titleList = dataRes[i].map(item=>{
                return item.subTitle
            })
            var newObj =[]
            // 根据小标题去重
            uniq(sub_titleList).forEach(item=>{
                var obj={name:item,data:[]}
                var data = dataRes[i].forEach(l=>{
                if(l.subTitle === item && l.subTitle!=='' &&l.subTitle!==undefined){
                    obj.data.push(l)
                }else if(l.subTitle==='' || l.subTitle===undefined){
                    obj.data.push(l)
                }
                })
                if(obj.name ===undefined){
                return
                }
                // obj.data= data 将后台数据生成带有小标题的
                newObj.push(obj)
            })
            this.$set(this.formAllBody,i,newObj)
            }
        }
      })
    },
    async getSiteList(){
      await this.$http.post(this.nozzle.rTUSettingServiceQueryList).then(res=>{
        // console.log(res.data.data,'resss')
        this.querySiteList = res.data.data
      })
    }
  },
  created(){
    this.getSiteList().then(res=>{
      this.initPage(this.querySiteList[1]);
    });
    this.formControl();
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$confirm("请检查是否需要暂存！", "提示", {
      confirmButtonText: "已暂存",
      cancelButtonText: "取消",
      type: "warning"
    }).then(res=>{ next() }).catch(() => {});
  }
};
</script>
<style scoped>
#content{
    width: 100%;
    height: 100%;
}
#navMenuContent {
  /* height: calc(100% - 20px);
  width: calc(100% - 20px);
  float: left;
  border: 1px solid aqua;
  box-sizing: border-box;
  margin: 10px;
  position: relative; */
  width: 100%;
  /* background-color: #fff; */
}
.switchContent{
  color: rgb(99, 96, 96);
  /* background-color: #fff; */
  /* background-color: #fff; */
  padding: 2%;
}
/deep/.el-form-item {
  /* color: red!important; */
}
.el-menu-item.is-active{
    background-color: #fff !important;
}
.el-menu-item:hover{
    background-color: #fff !important;
}
/deep/.el-form-item__content .el-input .el-input__inner{
    color: black !important;
}
/deep/.el-form-item__content i{
    font-style:normal;
    padding-right: 5px;
}
.el-form-item, .el-form-item-input{
  margin:11px 0 11px 0
}
/deep/.rowClass .subTitle{
  /* height:40px!important; */
  line-height:51px;
  color:aqua;
  /* margin-top: 11px; */
}
.demo-ruleForm .rowClass:nth-child(2n) {
  /* background-color: pink; */
}
/deep/.el-col .input-switch .el-form-item-input{
  /* display: flex; */
  margin: initial!important;
}
/deep/.rowClass .el-col{
  height: 51px!important;
}
/deep/.form-switch .el-form-item__label{
  width: 180px!important;
}
/deep/.form-switch .el-form-item__content{
  width: 150px!important;
  margin-left: 150px!important;
}
/deep/.input-switch .el-form-item__content{
  margin-left: 0!important;
}
/deep/.rowClass .el-form-item__label{
  /* line-height: initial; */
}
.input-switch-div{
  position:absolute;left:0;top:0;width:1000px;display:flex
}
/deep/.el-col .input-switch-div .el-form-item__content{
  width: 66px;
}
</style>