<template>
  <div class="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: "",
      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'
      if (localStorage.getItem(name)) {
        this.formAll = JSON.parse(localStorage.getItem(name));
        this.$message({ message: "暂存回显成功", type: "success" });
      } else {
        this.$message({ message: "无暂存内容", type: "warning" });
      }
      // console.log(JSON.parse(sessionStorage.getItem(name)),111)
    },
    temStorage() {
      try {
        localStorage.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[0]);
    });
    this.formControl();
  }
  // beforeRouteLeave (to, from, next) {
  //   // 导航离开该组件的对应路由时调用
  //   // 可以访问组件实例 `this`
  //   this.$confirm("请检查是否需要暂存！", "提示", {
  //     confirmButtonText: "已暂存",
  //     cancelButtonText: "取消",
  //     type: "warning"
  //   }).then(res=>{ next() }).catch(() => {});
  // }
};
</script>
<style lang="scss" scoped>
.content {
  width: 100% !important;
  height: 100% !important;
  #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);
    color: red;
    /* background-color: #fff; */
    /* background-color: #fff; */
    // color: white !important;

    padding: 2%;
    /deep/ .el-form {
      .el-col {
        height: 51px !important;
        .el-form-item {
          margin: 11px 0 11px 0 !important;
          .el-form-item__label {
            // text-align: right;
            width: 130px;
            text-align: right !important;
            color: var(--white) !important;
          }
          .el-form-item__content {
            .el-select {
              width: 100% !important;
              .el-input .el-input__inner {
                width: 100% !important;
              }
            }
            .el-input {
              width: 100% !important;
              .el-input__inner {
                width: 100% !important;
                color: var(--white) !important;
              }
            }

            i {
              color: var(--white);
              font-style: normal !important;
              padding-right: 5px !important;
            }
            //
          }
        }
        // input的单位，i图标
        // .el-form-item__content i{
        //   color: var(--white);
        //   font-style:normal !important;
        //   padding-right: 5px !important;
        // }
        // 普通input框100，select框也100
        // .el-form-item.el-form-item-input{
        //   // margin:11px 0 11px 0 !important;
        //   .el-form-item__content{
        //     // .el-select, .el-input{
        //     //   width: 100%;
        //     // }
        //     .el-input__inner{
        //       // width: 100%;
        //     }
        //   }
        // }
        // 小标题
        &.subTitle {
          /* height:40px!important; */
          line-height: 51px !important;
          color: var(--diatitle);
          /* margin-top: 11px; */
        }

        // 普通switch框，左180，右居中
        .el-form-item.el-form-item-input.form-switch .el-form-item__label {
          width: 180px !important;
        }
        .el-form-item.el-form-item-input.form-switch .el-form-item__content {
          // width: 100% !important;
          text-align: center !important;
          margin-left: 180px !important;
        }

        .input-switch-div {
          position: absolute !important;
          left: 0 !important;
          top: 0 !important;
          width: 1000px !important;
          display: flex !important;
          // 土地商情哪里，input content左为0，.input-switch-div定位，el-form-item__content定位66px
          .el-form-item-input.input-switch .el-form-item__content {
            margin-left: 0 !important;
          }
          .el-form-item-input.input-switch .el-form-item-input {
            /* display: flex; */
            margin: initial !important;
          }
          .el-form-item .el-form-item__content .el-input .el-input__inner {
            width: 66px !important;
          }
        }
      }
    }
  }
  // /deep/.el-menu-item{
  //   background-color: #fff !important;
  // }
  /deep/ .el-menu.el-menu-demo.el-menu--horizontal {
    border-bottom: initial !important;
    background-color: initial !important;
    li.el-menu-item {
      background-image: initial !important;
      background-color: #fff !important;
    }
    .el-menu-item.is-active {
      // background-color: var(--dialogtitle)!important;
      // background-color: #fff !important;
    }
    .el-menu-item:hover {
      background-color: #fff !important;
    }
  }
  // .el-menu--horizontal>.el-menu-item.is-active{
  //   background-color: #fff !important;
  // }
  // .el-menu-item .is-active {
  //   background-color: #fff !important;
  // }
  // .el-menu-item:hover {
  //   background-color: #fff !important;
  // }
  // /deep/ .el-menu-item {
  //   background-color: #fff!important;
  // }
}
</style>