<template>
  <div class="page-container iotHardware-batchAddPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">批量新增{{pageTitleName?'-'+pageTitleName:''}}</p>
      <p v-if="formData.userList[0]"
        class="page-top-title-button-p" style="width:120px;"
        @click="previewSwitch">{{showType?'高级预览':'简化预览'}}</p>
      <p class="page-top-title-save-p" style="width:120px;" @click="dialogOpen">选择设备类型</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box">
      <el-form class="batch-add-form-box scrollbar-box" :model="formData" ref="form" label-width="120px">
        <div class="batch-add-for-box" v-for="(userItem,userIndex) in formData.userList" :key="userIndex">
          <div class="batch-add-title-box">
            <p class="position-index-p">编号：{{userItem.deviceNo}}</p>
            <div class="batch-add-title-min-box"></div>
            <p class="position-button-p" @click="itemShow(userIndex)"
               :class="userItem.showType?'el-icon-caret-top':'el-icon-caret-bottom'"></p>
            <p class="position-del-p el-icon-close" @click="delItem(userIndex)"></p>
          </div>
          <div class="batch-add-for-simplify-box">
            <el-form-item label="名称" class="batch-add-form-item-box"
                          :prop="'userList.'+userIndex+'.deviceName'" :rules="basicsRules.deviceName">
              <el-input v-model="userItem.deviceName" placeholder="请输入名称" maxLength="20" style="width:177px;"></el-input>
            </el-form-item>
            <!--<el-form-item label="编号" class="batch-add-form-item-box"-->
                          <!--:prop="'userList.'+userIndex+'.deviceNo'" :rules="basicsRules.deviceNo">-->
              <!--<el-input v-model="userItem.deviceNo" disabled placeholder="请输入名称" maxLength="20" style="width:177px;"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="设备类型" class="batch-add-form-item-box"-->
                          <!--:prop="'userList.'+userIndex+'.typeId'" :rules="basicsRules.typeId">-->
              <!--<el-select v-model="userItem.typeId " placeholder="请选择类型" style="width: 177px">-->
                <!--<el-option-->
                  <!--v-for="dict in options"-->
                  <!--:key="dict.typeId"-->
                  <!--:label="dict.typeName"-->
                  <!--:value="dict.typeId"/>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
            <el-form-item label="设备属性" class="batch-add-form-item-box"
                          :prop="'userList.'+userIndex+'.attributeId'" :rules="basicsRules.attributeId">
              <el-select v-model="userItem.attributeId " @change="(val)=>selectChangeStats(userIndex,val)" placeholder="请选择属性" style="width: 177px">
                <el-option
                  v-for="dict in attributeInfo"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"/>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="状态" class="batch-add-form-item-box"-->
                          <!--:prop="'userList.'+userIndex+'.state'" :rules="basicsRules.state">-->
              <!--<el-radio-group v-model="userItem.state" style="width: 177px">-->
                <!--<el-radio :label="true">启用</el-radio>-->
                <!--<el-radio :label="false">禁用</el-radio>-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->
            <el-form-item label="楼栋楼层" class="batch-add-form-item-box"
                          :prop="'userList.'+userIndex+'.address'">
              <el-cascader
                style="width:177px;"
                v-model="userItem.address"
                @change="(val)=>cascaderChange(userIndex,val)"
                :props="{value: 'id', label: 'name',children:'buildFloorVoList'}"
                :options="treeOptions" :show-all-levels="false"></el-cascader>
            </el-form-item>
            <el-form-item label="实验室" :prop="'userList.'+userIndex+'.subId'" class="batch-add-form-item-box">
              <el-select v-model="userItem.subId" placeholder="请选择类型" style="width: 177px">
                <el-option v-for="item in userItem.subOptions" :key="item.subId" :label="item.subName" :value="item.subId"/>
              </el-select>
            </el-form-item>
            <el-form-item label="说明" :prop="'userList.'+userIndex+'.remark'" class="batch-add-form-item-box">
              <el-input v-model="userItem.remark" placeholder="请输入说明" maxLength="50" style="width:177px;"></el-input>
            </el-form-item>
          </div>
          <div class="batch-add-for-advanced-box" v-show="userItem.showType">
            <el-form-item v-for="(item,index) in modelList" :key="index" class="batch-add-form-item-box"
                          :label="item.label" :prop="'userList.'+userIndex+'.'+item.field" :rules="rules[item.field]">
              <!--文本框-->
              <el-input v-if="item.modelType == 'text'" style="width:177px;"
                        v-model="userItem[item.field]" :placeholder="'请输入'+item.label"
                        maxLength="50">
              </el-input>
              <!--文本域-->
              <el-input v-if="item.modelType == 'textarea'" style="width:177px;"
                        v-model="userItem[item.field]" :placeholder="'请输入'+item.label"
                        maxLength='200' type="textarea" resize="none" show-word-limit :autosize="{ minRows: 2, maxRows: 4}">
              </el-input>
              <!--密码框-->
              <el-input v-if="item.modelType == 'password'" style="width:177px;"
                        v-model="userItem[item.field]" :placeholder="'请输入'+item.label"
                        maxLength='30' show-password>
              </el-input>
              <!--计数器-->
              <el-input-number v-if="item.modelType == 'number'" style="width:177px;"
                               v-model="userItem[item.field]" :placeholder="'请输入'+item.label"
                               controls-position="right" :min="1" :max="9999">
              </el-input-number>
              <!--单选下拉框-->
              <el-select v-if="item.modelType == 'select'" style="width:177px;"
                         v-model="userItem[item.field]" :placeholder="'请选择'+item.label">
                <el-option v-for="minItem in item.models" :key="minItem.dictValue" :label="minItem.dictKey" :value="minItem.dictValue"></el-option>
              </el-select>
              <!--多选下拉框-->
              <el-select v-if="item.modelType == 'selectMultiple'" style="width:177px;"
                         v-model="userItem[item.field]" :placeholder="'请选择'+item.label"
                         multiple collapse-tags>
                <el-option v-for="minItem in item.models" :key="minItem.dictValue" :label="minItem.dictKey" :value="minItem.dictValue"></el-option>
              </el-select>
              <!--单选框-->
              <el-radio-group v-if="item.modelType == 'radio'" style="width:177px;"
                              v-model="userItem[item.field]" :placeholder="'请选择'+item.label">
                <el-radio v-for="minItem in item.models" :label="minItem.dictValue" style="padding:10px 0;">{{minItem.dictKey}}</el-radio>
              </el-radio-group>
              <!--复选框-->
              <el-checkbox-group v-if="item.modelType == 'checkbox'" style="width:177px;"
                                 v-model="userItem[item.field]" :placeholder="'请选择'+item.label">
                <el-checkbox v-for="minItem in item.models" :label="minItem.dictValue">{{minItem.dictKey}}</el-checkbox>
              </el-checkbox-group>
              <!--滑块-->
              <el-slider v-if="item.modelType == 'slider'" style="width:177px;"
                         v-model="userItem[item.field]" ></el-slider>
              <!--时间选择器-->
              <el-time-picker v-if="item.modelType == 'timePicker'" style="width:177px;"
                              v-model="userItem[item.field]" :placeholder="'请选择'+item.label"
                              format="HH:mm">
              </el-time-picker>
              <!--时间范围选择器-->
              <el-time-picker v-if="item.modelType == 'timePickerRange'" style="width:177px;"
                              v-model="userItem[item.field]" :placeholder="'请选择'+item.label"
                              is-range
                              format="HH:mm"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间">
              </el-time-picker>
              <!--日期选择器-->
              <el-date-picker v-if="item.modelType == 'datePicker'" style="width:177px;"
                              v-model="userItem[item.field]" :placeholder="'请选择'+item.label"
                              type="date">
              </el-date-picker>
              <!--日期范围选择器-->
              <el-date-picker v-if="item.modelType == 'datePickerRange'" style="width:177px;"
                              v-model="userItem[item.field]"
                              type="daterange"

                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
              </el-date-picker>
              <!--颜色选择器-->
              <el-color-picker v-if="item.modelType == 'colorPicker'"
                               v-model="userItem[item.field]">
              </el-color-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <img class="null-img-p" v-if="!formData.userList[0]" src="@/assets/ZDimages/basicsModules/null-data-1.png" alt="">
    </div>
    <!--新增弹窗-->
    <el-dialog class="iotHardware-batchAddPage-dialog" title='选择设备' width="1200px" append-to-body
               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="iotHardware-batchAddPage-dialog-box">
        <el-form class="dialog-form-box" label-width="120px">
          <el-form-item label="设备类型：">
            <el-select v-model="selectedData.dialogTypeId" @change="typeSelectChange" placeholder="请选择类型" style="width: 200px">
              <el-option
                v-for="dict in options"
                :key="dict.typeId"
                :label="dict.typeName"
                :value="dict.typeId"/>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="page-content-box">
          <el-table class="table-box" border :data="dataList" ref="multipleTable" :row-key="getRowKeys"
                    tooltip-effect="dark" @select-all="dialogCheck" @select="dialogCheck">
            <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
            <el-table-column label="名称" prop="deviceName"  show-overflow-tooltip/>
            <el-table-column label="编号" prop="deviceNo" width="200" show-overflow-tooltip/>
            <el-table-column label="sn" prop="sn" width="200" show-overflow-tooltip/>
            <el-table-column label="ip" prop="ip" width="200" show-overflow-tooltip/>
            <el-table-column label="端口号" prop="port" width="200" show-overflow-tooltip/>
          </el-table>
          <div class="selected-num-box" v-show="total>0">
            <p class="selected-num-p">
              <i class="el-icon-warning"></i>
              已选择 {{selectedData.selection.length?selectedData.selection.length:"0"}} 项
            </p>
            <pagination :page-sizes="[20, 30, 40, 50]"
                        :total="total"
                        style="margin:0;"
                        :page.sync="queryParams.page"
                        :limit.sync="queryParams.pageSize"
                        @pagination="iotDeviceExtraDeviceList"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
        <p class="dialog-footer-button-primary" @click="dialogSubmit">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { systemBuildingGetTreeList,laboratorySubRelInfoGetListByFloor } from "@/api/commonality/permission";
  import { iotTypeGetAllTypes,iotTypeGetParamByTypeId,iotAttributeGetByTypeId,iotDeviceExtraDeviceList,iotDeviceAddBatch } from "@/api/iotDevice/index";
  export default {
    name: 'batchAddPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        pageTitleName:'',
        showType:false,
        // 设备类型
        options:[],
        //楼栋楼层
        treeOptions:[],
        //查询条件
        queryParams:{
          page:1,
          pageSize:20,
          typeKey:null,
          state:true,
        },
        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
        selectedData:{
          dialogTypeId:null,
          selection:{},
          userList:[],
        },
        //列表数据
        dataList:[],
        //数据数量
        total:0,
        dialogType:false,
        //提交数据
        formData:{
          userList:[],
        },
        //属性信息
        attributeInfo:[],
        //配置信息
        modelList:[],
        rules:{},
        basicsRules:{
          deviceName: [
            { required: true, message: "请输入名称", trigger: "blur" },
            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          deviceNo: [
            { required: true, message: "请输入编号", trigger: "blur" },
            { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          typeId: [
            { required: true, message: "请选择设备类型", trigger: "blur" },
          ],
          attributeId: [
            { required: true, message: "请选择设备属性", trigger: "blur" },
          ],
          state: [
            { required: true, message: "请选择状态", trigger: "blur" },
          ],
          address: [
            { required: true, message: "请选择楼栋楼层", trigger: "blur" },
          ],
        },
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(){
        //设备类型列表
        iotTypeGetAllTypes({}).then(response => {
          this.$set(this,'options',response.data);
        });
        //楼栋楼层
        systemBuildingGetTreeList({}).then(response => {
          let list = JSON.parse(JSON.stringify(response.data));
          pushNode(list)
          function pushNode(list){
            for(let i=0;i<list.length;i++){
              if(list[i].type != 3 && !list[i].buildFloorVoList[0]){
                list.splice(i,1)
                i--
              }else if(list[i].type == 3){
                delete list[i].buildFloorVoList;
              }else{
                pushNode(list[i].buildFloorVoList)
              }
            }
          }
          this.$set(this,'treeOptions',list);
        })
      },
      //预览模式切换
      previewSwitch(){
        let self = this;
        for(let i=0;i<self.formData.userList.length;i++){
          this.$set(self.formData.userList[i],'showType',!self.showType);
          self.formData.userList[i].showType = !self.showType;
        }
        this.$set(self,'showType',!self.showType);
      },
      //单独项模式切换
      itemShow(index){
        this.formData.userList[index].showType = !this.formData.userList[index].showType;
        this.showDetection();
      },
      //展示状态监测
      showDetection(){
        let self = this;
        let openNum = 0;
        let shutNum = 0;
        for(let i=0;i<self.formData.userList.length;i++){
          if(self.formData.userList[i].showType){
            openNum++
          }else{
            shutNum++
          }
        }
        if(openNum == self.formData.userList.length){
          this.$set(self,'showType',true);
        }else if(shutNum == self.formData.userList.length) {
          this.$set(self,'showType',false);
        }
      },
      //删除
      delItem(index){
        let self = this;
        this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          self.formData.userList.splice(index,1);
          if(!self.formData.userList[0]){
            self.$set(self,'pageTitleName','');
          }
        }).catch(() => {});
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            let list = JSON.parse(JSON.stringify(this.formData.userList));
            let newList = [];
            for(let i=0;i<list.length;i++){
              let obj = JSON.parse(JSON.stringify({
                deviceNo : list[i].deviceNo,
                deviceName : list[i].deviceName,
                code : list[i].code,
                networkId : list[i].networkId,
                attributeId : list[i].attributeId,
                remark : list[i].remark,
                typeKey : list[i].typeKey,
                typeName : list[i].typeName,
                typeId : list[i].typeId,
              }));
              //匹配校区-楼栋-楼层数据
              if(list[i].address[0]){
                for(let y=0;y<self.treeOptions.length;y++){
                  if(self.treeOptions[y].id == list[i].address[0]){
                    for(let o=0;o<self.treeOptions[y].buildFloorVoList.length;o++){
                      if(self.treeOptions[y].buildFloorVoList[o].id == list[i].address[1]){
                        for(let x=0;x<self.treeOptions[y].buildFloorVoList[o].buildFloorVoList.length;x++){
                          if(self.treeOptions[y].buildFloorVoList[o].buildFloorVoList[x].id == list[i].address[2]){
                            obj.schoolId = self.treeOptions[y].id;
                            obj.schoolName = self.treeOptions[y].name;
                            obj.buildId = self.treeOptions[y].buildFloorVoList[o].id;
                            obj.buildName = self.treeOptions[y].buildFloorVoList[o].name;
                            obj.floorId = self.treeOptions[y].buildFloorVoList[o].buildFloorVoList[x].id;
                            obj.floorName = self.treeOptions[y].buildFloorVoList[o].buildFloorVoList[x].name;
                          }
                        }
                      }
                    }
                  }
                }
              }else{
                obj.schoolId = '';
                obj.schoolName = '';
                obj.buildId = '';
                obj.buildName = '';
                obj.floorId = '';
                obj.floorName = '';
              }
              //匹配实验室数据
              if(list[i].subId){
                for(let o=0;o<list[i].subOptions.length;o++){
                  if(list[i].subOptions[o].subId == list[i].subId){
                    obj.subjectId = list[i].subOptions[o].subId
                    obj.subjectName = list[i].subOptions[o].subName
                    obj.room = list[i].subOptions[o].roomNum
                  }
                }
              }else{
                obj.subjectId = ''
                obj.subjectName = ''
                obj.room = ''
              }
              //匹配分类参数
              let reservedField = {};
              for(let o=0;o<self.modelList.length;o++){
                reservedField[self.modelList[o].field] = list[i][self.modelList[o].field]
              }
              // delete list[i].showType;
              // delete list[i].subOptions;
              // delete list[i].address;
              // delete list[i].subId;
              // delete list[i].deviceNo;
              // delete list[i].deviceName;
              // delete list[i].code;
              // delete list[i].networkId;
              // delete list[i].attributeId;
              // delete list[i].remark;
              // delete list[i].typeKey;
              // delete list[i].typeName;
              // delete list[i].typeId;
              obj.reservedField = JSON.stringify(reservedField)
              newList.push(obj);
            }
            this.$confirm('是否确认提交?', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              iotDeviceAddBatch(newList).then(response => {
                self.msgSuccess(response.message)
                self.$set(self,'formData',{
                  userList:[],
                });
                self.$set(self,'queryParams',{
                  page:1,
                  pageSize:20,
                  typeKey:null,
                  state:true,
                });
                self.$set(self,'dataList',[]);
                self.$set(self,'selectedData',{
                  dialogTypeId:null,
                  selection:{},
                  userList:[],
                });
              })
            }).catch(() => {});
          }
        })
      },
      //弹层开启
      dialogOpen(){
        this.$set(this,'queryParams',{
          page:1,
          pageSize:20,
          typeKey:null,
          state:true,
        });
        this.$set(this,'dataList',[]);
        this.$set(this,'selectedData',{
          dialogTypeId:null,
          selection:{},
          userList:[],
        });
        this.$set(this,'dialogType',true);
      },
      //弹层关闭
      dialogOff(){
        this.$set(this,'dialogType',false);
      },
      //弹层确定
      dialogSubmit(){
        let self = this;
        if(!this.selectedData.userList[0]){
          this.msgError('请选择设备')
          return
        }
        //标记页面类型名称
        for(let i=0;i<self.options.length;i++){
          if(self.selectedData.dialogTypeId == self.options[i].typeId){
            self.$set(self,'pageTitleName',self.options[i].typeName);
          }
        }
        //条件过滤 剔除没有设备编号的设备
        let list = [];
        let listNum = 0;
        for(let i=0;i<self.selectedData.userList.length;i++){
          if(self.selectedData.userList[i].deviceNo){
            let obj = {
              deviceNo : self.selectedData.userList[i].deviceNo,
              deviceName : self.selectedData.userList[i].deviceName?self.selectedData.userList[i].deviceName:'',
              code : self.selectedData.userList[i].code?self.selectedData.userList[i].code:'',
              networkId : self.selectedData.userList[i].networkId?self.selectedData.userList[i].networkId:'',
              attributeId : self.selectedData.userList[i].attributeId?self.selectedData.userList[i].attributeId:'',
              address : self.selectedData.userList[i].address?self.selectedData.userList[i].address:'',
              subId : self.selectedData.userList[i].subId?self.selectedData.userList[i].subId:'',
              remark : self.selectedData.userList[i].remark?self.selectedData.userList[i].remark:'',
              typeKey : '',
              typeName : '',
              typeId : '',
            };
            for(let o=0;o<self.modelList.length;o++){
              obj[self.modelList[o].field] = self.selectedData.userList[i][self.modelList[o].field]
            }
            list.push(obj)
          }else{
            listNum++
          }
        }
        if(!list[0]){
          this.msgError('未检测到设备编号,请勾选带有设备编号的设备!')
          return
        }
        this.$set(this.formData,'userList',JSON.parse(JSON.stringify(list)));
        //数据处理
        for(let i=0;i<self.formData.userList.length;i++){
          //写入设备类型相关数据
          for(let o=0;o<self.options.length;o++){
            if(self.selectedData.dialogTypeId == self.options[o].typeId){
              self.$set(self,'pageTitleName',self.options[o].typeName);
              self.$set(self.formData.userList[i],'typeKey',self.options[o].typeKey);
              self.$set(self.formData.userList[i],'typeName',self.options[o].typeName);
              self.$set(self.formData.userList[i],'typeId',self.options[o].typeId);
            }
          }
          //写入设备属性相关数据
          if(self.attributeInfo[0]){
            self.$set(self.formData.userList[i],'code',self.attributeInfo[0].code);
            self.$set(self.formData.userList[i],'networkId',self.attributeInfo[0].networkId);
            self.$set(self.formData.userList[i],'attributeId',self.attributeInfo[0].id);
          }else{
            self.$set(self.formData.userList[i],'code','');
            self.$set(self.formData.userList[i],'networkId','');
            self.$set(self.formData.userList[i],'attributeId','');
          }
          //写入设备状态
          // self.$set(self.formData.userList[i],'state',true);
          //写入实验室列表选择字段
          self.$set(self.formData.userList[i],'subOptions',[]);
          //写入页面展示状态
          self.$set(self.formData.userList[i],'showType',false);
        }
        if(listNum != 0){
          this.msgError('有'+listNum+'个设备,因没有设备编号,未加入编辑列表.')
        }
        self.$set(self,'showType',false);
        self.$set(self,'dialogType',false);
      },
      //设备属性选中
      selectChangeStats(index,val){
        let self = this;
        for(let i=0;i<self.attributeInfo.length;i++){
          if(val == self.attributeInfo[i].id){
            self.$set(self.formData.userList[index],'code',self.attributeInfo[i].code);
            self.$set(self.formData.userList[index],'networkId',self.attributeInfo[i].networkId);
          }
        }
      },
      //楼栋楼层选中
      cascaderChange(index,val){
        laboratorySubRelInfoGetListByFloor({floorId:val[val.length-1]}).then(response => {
          this.$set(this.formData.userList[index],'subId','');
          this.$set(this.formData.userList[index],'subOptions',response.data);
        })
      },
      //设备类型选中
      typeSelectChange(val){
        let self = this;
        //标记页面类型名称
        for(let i=0;i<self.options.length;i++){
          if(val == self.options[i].typeId){
            self.$set(self.queryParams,'typeKey',self.options[i].typeKey);
          }
        }
        this.iotTypeGetParamByTypeId(val).then(res=>{
          this.iotAttributeGetByTypeId(val).then(res=>{
            this.iotDeviceExtraDeviceList();
          })
        })
      },
      //顺序执行-获取配置信息
      iotTypeGetParamByTypeId(val){
        return new Promise(resolve=>{
          iotTypeGetParamByTypeId({typeId:val}).then(response => {
            //处理返回数据
            let rules = {};
            let modelList = [];
            for(let i=0;i<response.data.length;i++){
              //验证数据处理
              if (response.data[i].required){
                if(response.data[i].type == 'text' || response.data[i].type == 'textarea' || response.data[i].type == 'password'){
                  rules[response.data[i].field] = [
                    { required: true, message: "请输入" + response.data[i].label, trigger: "blur" },
                    { required: true, message: "请输入" + response.data[i].label, validator: this.spaceJudgment, trigger: "blur" }
                  ];
                }else {
                  rules[response.data[i].field] = [
                    { required: true, message: "请选择" + response.data[i].label, trigger: "blur" },
                  ];
                }
              }
              //model数据处理
              let obj = {
                label:response.data[i].label,
                field:response.data[i].field,
                modelType:response.data[i].type,
                required: response.data[i].required,
                models:response.data[i].iotParamValueModels
              }
              modelList.push(obj)
            }
            this.$set(this,'modelList',modelList);
            this.$set(this,'rules',rules);
            resolve()
          });
        })
      },
      //顺序执行-获取属性信息
      iotAttributeGetByTypeId(val){
        return new Promise(resolve=>{
          iotAttributeGetByTypeId({typeId:val}).then(response => {
            this.$set(this,'attributeInfo',response.data);
            resolve()
          });
        })
      },
      //顺序执行-获取设备列表
      iotDeviceExtraDeviceList(){
        iotDeviceExtraDeviceList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        });
      },

      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.deviceNo
      },
      //勾选数量限制
      dialogCheck (selection) {
        let self = this;
        if(selection[20]){
          this.$refs['multipleTable'].clearSelection();
          this.$nextTick(()=>{
            let list = [];
            for(let i=0;i<selection.length;i++){
              if(i<20){
                list.push(selection[i]);
                self.$refs.multipleTable.toggleRowSelection(selection[i],true);
              }
            }
            self.$set(self.selectedData,'selection',list);
            self.$set(self.selectedData,'userList',JSON.parse(JSON.stringify(list)));
          })
          this.msgError('最多勾选20条数据')
        }else{
          this.$set(this.selectedData,'selection',selection.map(item => item));
          this.$set(this.selectedData,'userList',JSON.parse(JSON.stringify(selection)));
        }
        // if(this.selectedData.selection[19]){
        //   self.$refs.multipleTable.toggleRowSelection(selection[selection.length-1],false);
        //   this.$set(this.selectedData,'selection',selection.map(item => item));
        //   this.$set(this.selectedData,'userList',JSON.parse(JSON.stringify(selection)));
        //   if(this.selectedData.selection[19]){
        //     this.msgError('最多勾选20条数据');
        //   }
        // }else{
        //   this.$set(this.selectedData,'selection',selection.map(item => item));
        //   this.$set(this.selectedData,'userList',JSON.parse(JSON.stringify(selection)));
        // }
      },
    },
  }
</script>

<style scoped lang="scss">
  .iotHardware-batchAddPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
      .null-img-p{
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-120px;
        margin-left:-138px;
        display: block;
        width:276px;
        height:321px;
      }
      .batch-add-form-box{
        position: relative;
        .batch-add-for-box:nth-child(1){
          border-top:1px solid #dedede;
        }
        .batch-add-for-box{
          /*padding:40px 0 20px;*/
          border:1px solid #dedede;
          border-top:none;
          .batch-add-title-box{
            display: flex;
            .position-button-p{
              font-size:24px;
              width:30px;
              height:30px;
              line-height:30px;
              text-align: center;
              color:#fff;
              background-color:#999;
              cursor: pointer;
            }
            .position-index-p{
              font-size:14px;
              padding:0 20px;
              line-height:30px;
              text-align: center;
              color:#fff;
              background-color:#0183FA;
            }
            .batch-add-title-min-box{
              flex:1;
              background-color:#0183FA;
            }
            .position-del-p{
              font-size:24px;
              width:30px;
              height:30px;
              line-height:30px;
              text-align: center;
              color:#fff;
              background-color:#FF6666;
              cursor: pointer;
            }
          }
          .batch-add-for-simplify-box{
            padding-top:20px;
          }
          .batch-add-for-advanced-box{
          }
          .batch-add-form-item-box{
            display: inline-block;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .iotHardware-batchAddPage-dialog{
    .iotHardware-batchAddPage-dialog-box{
      height:600px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
</style>
