<template>
  <!-- 空开 -->
  <div class="light">
    <!-- 各楼栋楼层切换 -->
    <clickCp :bimModel="bimModel" sbType="空开" ref="clickcp"></clickCp>
    <!-- 返回主视角 -->
    <backHome :bimModel="bimModel" type="照明" dom=".mapDom"></backHome>
    <div class="mapDom" style="
        position: absolute;
        left: 105px;
        top: 210px;
        width: 250px;
        height: 180px;
        margin: 45px auto;
      " v-if="bimModel == 1"></div>

    <div class="box2">
      <div class="title flex-center">
        <img class="icon" src="../../../public/img/monitoring/electricity/sbIcon.png" />
        <span>设备概况</span>
      </div>
      <div class="state flex-center-center">
        <div class="zc flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ tableData.openCount }}</span>
        </div>
        <div class="lx flex-center" style="font-family: fantasy">
          <span style="margin-left: 72px">{{ tableData.closeCount }}</span>
        </div>
      </div>
      <div class="stateName flex-center-center">
        <span class="zc">开灯</span>
        <span class="lx">关灯</span>
      </div>
      <div class="tab_box">
        <div class="tab_one" @click="clickAlarm(1)" :style="{ color: activeTab == 1 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isAlarm" class="item">设备告警</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEquipWarnNumber }})</span>
        </div>
        <div class="tab_one tab_two" @click="clickAlarm(2)" :style="{ color: activeTab == 2 ? '#07E6ED' : '#fff' }">
          <el-badge :is-dot="isSafe" class="item">告警事件</el-badge><span
            style="margin-left: 5px; vertical-align: bottom">({{ listData.warnEventWarnMumber }})</span>
        </div>
      </div>
      <div class="flex-center tit" :class="bimModel == 2 ? 'tataitit' : ''">
        <p>设备名称</p>
        <span>|</span>
        <p>报警信息</p>
        <span>|</span>
        <p>报警时间</p>
      </div>
      <!-- <div v-if="listData.length == 0" class="noBjxx">暂无报警信息</div> -->
      <div v-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEquipList &&
        listData.warnEquipList.length == 0 &&
        activeTab == 1
      " class="noBjxx">
        暂无故障报警信息
      </div>
      <div v-else-if="
        JSON.stringify(listData) != '{}' &&
        listData.warnEventList &&
        listData.warnEventList.length == 0 &&
        activeTab == 2
      " class="noBjxx">
        暂无安全报警信息
      </div>
      <div v-else class="warp">
        <div class="item flex-center" v-for="(item, index) in listData.warnEquipList" :key="index" v-if="activeTab == 1"
          style="position: relative" @mouseenter="showAlarkAlert(item, index, 0)"
          @mouseleave="closeAlarkAlert(item, index, 0)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjclick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center" style="justify-content: space-around" :class="bimModel == 2 ? 'tataicon' : ''">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.status == '2'" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" v-text="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
              }" :title="item.name"></span>
            </div>
            <span></span>
            <span class="data" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }" :title="item.warnContent">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
        <div class="item flex-center" v-for="(item, index) in listData.warnEventList" :key="'warnEvent' + index" v-if="activeTab == 2"
          @mouseenter="showAlarkAlert(item, index, 1)" style="position: relative"
          @mouseleave="closeAlarkAlert(item, index, 1)">
          <div :style="{ display: item.showAlert ? 'flex' : 'none' }" class="alark-alert">
            <p @click="bjClick(item)" v-if="item.modelId != ''">
              <img src="../../../public/img/monitoring/electricity/alark-detail-icon.png" alt="" />
              <span>查看详情</span>
            </p>
            <span v-if="item.confirmStatus == '0' && item.modelId != ''">|</span>
            <p v-if="item.confirmStatus == '0'" @click="doCancelWarn(item)">
              <img src="../../../public/img/monitoring/electricity/close-alark-icon.png" alt="" />
              <span>确认告警</span>
            </p>
            <span v-if="item.warnStatus == 1 && (item.modelId != '' || item.confirmStatus == '0')">|</span>
            <p v-if="item.warnStatus == 1" @click="doRecoveryWarn(item)">
              <i class="el-icon-refresh-right" style="margin-right:10px;"></i>
              <span>告警恢复</span>
            </p>
          </div>
          <div class="box flex-center">
            <div class="left flex-center-center">
              <img class="icon" src="../../../public/img/monitoring/electricity/lx.png" v-if="item.status == 2" />
              <img class="icon" src="../../../public/img/monitoring/electricity/bj.png" v-else />
              <span class="message" v-text="item.name" :title="item.name" :style="{
                color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
              }"></span>
            </div>
            <span class="data" title="item.warnContent" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnContent }}</span>
            <span class=""></span>
            <span class="time" :style="{
              color: item.warnStatus == 2 ? 'white' : item.warnStatus == 1 ? '#ff0000' : 'white',
            }">{{ item.warnDate.substring(5, 16) }}</span>
          </div>
        </div>
      </div>
      <div style=" position: absolute; bottom: 10px; right: 10px; width: 345px; text-align: right; color: rgb(7, 230, 237); font-size: 14px;cursor: pointer;">
        <span @click="goMoreWarnList">查看报警详情</span>
      </div>
    </div>
    <div v-if="bimModel == 1" class="switch">
      <div class="title flex-center">
        <!-- <img
          class="icon"
          src="../../../public/img/monitoring/electricity/sbIcon.png"
        /> -->
        <img src="../../../public/img/monitoring/electricity/listIcon3.png" />
        <span id="light_box">开关列表</span>
      </div>
      <div class="main-switch" v-if="floored == null">
        <div>
          <img class="switch_icon" src="../../../public/img/monitoring/switch/all-on.png"
            v-if="tableData.buildStatus == 1" alt="" @click="closeTotal" />
          <img class="switch_icon" src="../../../public/img/monitoring/switch/all-off.png" v-else alt=""
            @click="openTotal"  />
        </div>
        <div class="right_main">
          <img src="../../../public/img/monitoring/switch/beijing.png" alt="" />
          <div class="main_title">
            <div style="color: #00eeff; margin: 12px 0 0 20px">
              {{ tableData.buildCode | buildValue }}
            </div>
            <div style="color: #a5bbe5; margin: 10px 0 0 20px">
              <span>当前状态</span><span style="color: #fff; margin-left: 10px">{{
                  tableData.buildStatus == 1 ? "ON" : "OFF"
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <div style="overflow: auto" v-if="tableData.floorData && tableData.floorData.length > 0">
        <div v-for="(item, index) in tableData.floorData" :key="index">
          <div>
            <img src="../../../public/img/monitoring/switch/xian.png" alt="" />
          </div>
          <div style="display: flex">
            <div style="margin-left: 1.562rem">
              <div style="text-align: center; color: white">
                <img class="switch_icon" src="../../../public/img/monitoring/switch/on.png"
                  v-show="item.floorStatus == 1" alt="" style="width: 3.437rem; height: 3.437rem"
                  @click="closeAllSwitch(item)" />
                <img class="switch_icon" src="../../../public/img/monitoring/switch/off.png"
                  v-show="item.floorStatus == 2" alt="" style="width: 3.437rem; height: 3.437rem"
                  @click="openAllSwitch(item)" />
                <p style="
                    margin-top: -3px;
                    width: 3.437rem;
                    background-color: rgb(26, 197, 191);
                    border-radius: 0.187rem;
                    font-size: 14px;
                  ">
                  {{ item.floorName }}
                </p>
              </div>
            </div>
            <div class="first_switch">
              <div class="switch_item" v-for="(item1, index1) in item.lightList" :key="index1" @contextmenu="clickLight(item1,$event)">
                <div>
                  <img class="switch_icon" src="../../../public/img/monitoring/switch/on_lit.png"
                    v-show="item1.openStatus == 1" alt="" @click="controlFun(item1)" />
                  <img class="switch_icon" src="../../../public/img/monitoring/switch/off_lit.png"
                    v-show="item1.openStatus == 2" alt="" @click="controlFun(item1)" />
                  <p style="
                      margin-top: -3px;
                      width: 2.312rem;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      cursor: pointer;
                      background-color: rgb(14, 49, 139);
                      padding: 5px;
                      border-radius: 2px;
                    " :title="item1.shortName">
                    {{ item1.shortName }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else style="color: white; margin: 30px auto; width: 100%; text-align: center">
        暂无开关列表
      </div>
    </div>
  </div>
</template>

<script>
import * as bfHelper from "../../util/bfHelper";
import * as commonValue from "../../util/commonValue";
import clickCp from "./clickCp";
import {
  getLightSblb, //设备列表
  lightControl, //开控制
  lightControl2, //关控制
  lightOpenBuild,
  lightCloseBuild,
  getLightWarnList, //告警列表
  getCancelWarn, //关闭报警
  recoveryWarn,//恢复告警
} from "@/api/garden/monitoring";
import backHome from "./backHome";
export default {
  props: {
    bimModel: {
      type: Number,
    },
  },
  components: {
    clickCp,
    backHome,
  },
  filters: {
    buildValue(data) {
      switch (data) {
        case "00":
          return "室外总开关";
        case "01":
          return "1#总开关";
        case "02":
          return "2#总开关";
        case "03":
          return "3#总开关";
        case "04":
          return "4#总开关";
        case "05":
          return "5#总开关";
        case "06":
          return "6#总开关";
        case "07":
          return "地下室总开关";
      }
    },
  },
  data() {
    return {
      path:'ws://10.90.100.204/blade-websocket/ws?light_kk',//socket地址
      // path:'ws://192.168.1.3/blade-websocket/ws?light_kk',//socket地址
      build: "00", //楼
      floored: null, //楼层
      controlAll: 2, //批量控制开关
      current: 1, //当前页
      size: 6, //每页数量
      total: 0, //总条目数
      chooseId: [], //多选
      tableData: [], //设备列表
      setInterval: null,

      mainSwitch: 1,
      arr: [], //照明信息
      activeTab: 1,
      listData: {
        systemWarnEquipList: [],
        safeWarnEquipList: [],
      }, //告警列表

      intervalCheckLight: 0,//轮询获取空开状态
    };
  },
  watch: {
    bimModel: {
      handler(newVal, oldVal) {
        this.getLifLists(); //设备信息和告警信息
        this.current = 1; //当前页
        this.total = 0; //总条目数
        if (this.setInterval) {
          clearInterval(this.setInterval);
        }
        if (this.intervalCheckLight) {
          clearInterval(this.intervalCheckLight);
        }

        this.setInterval = setInterval(() => {
          // this.getSblb(); //获取设备列表
          this.getLightWarnList(); //告警列表
        }, 3600000);

        this.getSblb(); //获取设备列表
        this.getLightWarnList(); //告警列表
        if (newVal == 1) {
        } else {
        }
      },
    },
    //模型是否加载完成监听
    "$store.state.bfHelperState.bfState": {
      immediate: true,
      handler(newval, olval) {
        if (newval) {
          // 模型恢复全部状态
          // bfHelper.resetStatus(2);
          bfHelper.clearDrawableContainer();
          bfHelper.clearTags();
          if (newval == 1) {
            window.sessionStorage.setItem(
              "camera",
              JSON.stringify(bfHelper.getCameraStatus())
            );
            let build = sessionStorage.getItem("build");
            let floor = sessionStorage.getItem("floor");
            let type = sessionStorage.getItem('type') ? sessionStorage.getItem('type') : 'build'
            if (build) {
              if (build == 10) {
                //如果点击的是地下室
                setTimeout(() => {
                  this.setTowerLight("07");
                  this.$refs.clickcp.active = 26;
                  this.$refs.clickcp.area = 1;
                  this.$refs.clickcp.type = 'build';
                  this.$refs.clickcp.tower = 9;
                }, 300);
                bfHelper.lookPipeline2(
                  null,
                  null,
                  build - 1,
                  null,
                  "空开",
                  bfHelper.equipmentCondition2[2]
                );
              } else if (build == 26) {
                //如果点击的是园区
                bfHelper.resetStatus(2, null, "照明");
                bfHelper.lookEquipmentCop("照明");
                this.$refs.clickcp.active = 26;
                this.$refs.clickcp.type = 'build';
                this.$refs.clickcp.area = 1;
                setTimeout(() => {
                  this.setTowerLight("00");
                }, 300);
              } else {
                if (floor.indexOf("null") == -1) {
                  setTimeout(() => {
                    this.setTowerLight("0" + build, "0" + floor);
                    this.$refs.clickcp.active = commonValue.activeValue(
                      Number(build),
                      Number(floor)
                    );
                    this.$refs.clickcp.area = 1;
                    this.$refs.clickcp.type = 'floor';
                    this.$refs.clickcp.tower = commonValue.towerValue(build);
                  }, 300);
                  bfHelper.lookPipeline2(
                    null,
                    null,
                    build - 1,
                    floor,
                    "空开",
                    bfHelper.equipmentCondition2[2]
                  );
                } else {
                  setTimeout(() => {
                    this.setTowerLight("0" + build);
                    this.$refs.clickcp.active = commonValue.activeValue(
                      Number(build),
                      null
                    );
                    this.$refs.clickcp.area = 1;
                    this.$refs.clickcp.type = 'build';
                    this.$refs.clickcp.tower = commonValue.towerValue(build);
                  }, 300);
                  bfHelper.lookPipeline2(
                    null,
                    null,
                    build - 1,
                    null,
                    "空开",
                    bfHelper.equipmentCondition2[2]
                  );
                }
              }
            } else {
              bfHelper.lookEquipmentCop("照明");
              bfHelper.setOpacityFun();
              setTimeout(() =>{
                this.$refs.clickcp.area = 1;
                this.$refs.clickcp.type = 'build';
                this.$refs.clickcp.active = 25;
                this.$refs.clickcp.getTypeList('build')
              },300)
              this.getNavigationMap();
            }
          } else {
          }
        }
      },
    },
  },
  created() {
    this.getSblb(); //获取设备列表
    // this.setLight(); // 获取开启状态的空开
    this.getLightWarnList(); //告警列表
    this.setInterval = setInterval(() => {
      // this.getSblb(); //获取设备列表
      this.getLightWarnList(); //告警列表
      // this.setLight(); // 获取开启状态的空开
    }, 3600000);
  },
  mounted() {
    let dom = document.getElementById('light_box');
    dom.addEventListener('contextmenu', (event)=> {
      event.preventDefault(); // 阻止默认菜单
      const routerUrl = this.$router.resolve({ path: '/equipment/index', query: { classCode: '0500' } });
      window.open(routerUrl.href, "_blank");
    });
    this.getNavigationMap();
    this.initSocket();
  },
  beforeDestroy() {
    if (this.socket) {
			console.log('close scoket');
			this.socket.close();
			this.socket = "";
		}
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
    if (this.intervalCheckLight) {
      clearInterval(this.intervalCheckLight);
    }
  },
  methods: {
    //socket 接收空开状态
    initSocket() {
      if (typeof (WebSocket) === "undefined") {
				alert("您的浏览器不支持socket");
			} else {
				this.socket = new WebSocket(this.path);
				// 监听socket连接
				this.socket.onopen = this.open;
				// 监听socket错误信息
				this.socket.onerror = this.error;
				// 监听socket消息
				this.socket.onmessage = this.getMessage;
			}
    },
    open() {
      console.log("socket连接成功")
    },
    error() {
      console.log("socket连接错误")
    },
    getMessage(msg) {
      // console.log('scoket 模拟',msg)
      let retData = JSON.parse(msg.data);
      if (this.tableData.floorData && this.tableData.floorData.length > 0) {
        this.tableData.floorData.map((item1,index) => {
          let lightObjIndex = item1.lightList.findIndex(item2 => item2.code == retData.code);
          if(lightObjIndex > -1 && item1.lightList[lightObjIndex].openStatus != retData.openStatus){
            item1.lightList[lightObjIndex].openStatus = retData.openStatus;
            if(retData.openStatus == 1){
              //开灯
              console.log(item1.lightList[lightObjIndex].name,'开灯')
              //验证是否全开
              let checkOpenStatus = item1.lightList.filter(item2 => item2.openStatus == 1);
              console.log('全开',checkOpenStatus)
              if(checkOpenStatus != undefined && checkOpenStatus.length == item1.lightList.length){
                item1.floorStatus = 1;
              }
              this.getLight([{arr: item1.lightList[lightObjIndex].ctrlList.split(','),build: item1.lightList[lightObjIndex].build}]);
            }else{
              //关灯
              console.log(item1.lightList[lightObjIndex].name,'关灯')
              this.cleanLight([{arr: item1.lightList[lightObjIndex].ctrlList.split(','),build: item1.lightList[lightObjIndex].build}]);
              //验证是否全关
              let checkOpenStatus = item1.lightList.filter(item2 => item2.openStatus == 2);
              console.log('全关',checkOpenStatus)
              if(checkOpenStatus != undefined && checkOpenStatus.length == item1.lightList.length){
                item1.floorStatus = 2;
              }
            }
          }
        })
      }
    },
    //确认告警 - 重新查询告警列表
    doCancelWarn(item) {
      getCancelWarn(item.id).then((res) => {
        // this.getLightWarnList();
        item.confirmStatus = 1;
      });
    },
    //恢复告警
    doRecoveryWarn(item) {
      recoveryWarn(item.id).then((res) => {
        item.warnStatus = 2;
      })
    },
    //跳转历史告警列表
    goMoreWarnList() {
      // this.$router.push({ path: '/equipment/warnHistory' });
      const routerUrl = this.$router.resolve({
        path: "/equipment/warnHistory",
        query: { classCode: "0500", area: this.bimModel },
      });
      window.open(routerUrl.href, "_blank");
    },
    // 报警记录-20221031改版
    getLightWarnList() {
      getLightWarnList({
        area: this.bimModel,
        build: this.tower ? this.tower : "",
        floor: this.layer ? this.layer : "",
      }).then((res) => {
        this.listData = res.data.data;
        for (let i = 0; i < this.listData.warnEquipList.length; i++) {
          this.listData.warnEquipList[i].showAlert = false;
        }
        for (let i = 0; i < this.listData.warnEventList.length; i++) {
          this.listData.warnEventList[i].showAlert = false;
        }
      });
    },
    // 设备告警、告警事件
    showAlarkAlert(item, index, key) {
      //鼠标悬停在设备概况列表里出现查看详情和确认告警
      item.showAlert = true;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    closeAlarkAlert(item, index, key) {
      item.showAlert = false;
      if (key == 0) {
        this.listData.warnEquipList.splice(index, 1, item);
      } else {
        this.listData.warnEventList.splice(index, 1, item);
      }
    },
    getFightWarnList() {
      getFightWarn(
        this.bimModel,
        this.towers ? this.towers : "",
        this.layer ? this.layer : ""
      ).then((res) => {
        this.alarmLists = res.data.data;
      });
    },
    clickAlarm(item) {
      this.activeTab = item;
    },
    // 设备信息、告警信息
    getLifLists() {
      getLifList(this.bimModel).then((res) => {
        if (res.data.code == 200) {
          this.arr = res.data.data;
          this.setLiftColor(this.arr);
        }
      });
    },
    setLiftColor(arr) {
      let arrs = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].status != 90000) {
          arrs.push(arr[i]);
        }
      }

      this.listData = arrs;

      for (let j = 0; j < this.listData.length; j++) {
        this.listData[j].showAlert = false;
      }
      let offList = [];
      let bjList = [];
      let normalList = [];
      for (let i = 0; i < arr.length; i++) {
        let objectId = bfHelper.getExternalComponentId(arr[i].modelId);
        if (arr[i].status == 90000) {
          normalList.push(objectId);
        } else if (arr[i].status == 90001) {
          offList.push(objectId);
        } else {
          bjList.push(objectId);
        }
      }
      bfHelper.restoreColor(normalList);
      bfHelper.setFlicker(bjList, "#ff0000", 100);
      bfHelper.cancelFlicker(normalList);
      bfHelper.setColor("#a5bbe5", offList);
    },
    getNavigationMap() {
      commonValue.getNavigationMap("water");
    },
    // 接收子组件当前点击楼号
    setTowerLight(i, j) {
      this.current = 1; //当前页
      this.total = 0; //总条目数
      this.build = i;
      this.floored = j;
      this.getSblb();
      if (this.bimModel == 1) {
        commonValue.getUpdateMap("water", i, j);
      }
    },
    // 获取开启状态的空开
    // setLight() {
    //   if (this.setInterval) {
    //     clearInterval(this.setInterval);
    //   }
    //   this.getLight();
    //   this.setInterval = setInterval(() => {
    //     this.getLight();
    //   }, 30000);
    // },
    getLight(data) {
      // console.log(data)
      // if (data.length > ) {
      if (data) {
        let arr = [];
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].arr.length; j++) {
            if (data[i].arr[j] != "") {
              let id = bfHelper.disposeId(1, data[i].build, data[i].arr[j]);
              arr.push(id);
            }
          }
        }
        if (arr.length > 0) {
          // console.log('arr', arr)
          bfHelper.setGlowEffectById(arr); //根据构件ID设置发光效果
          bfHelper.setColor("#fff99a", arr);
          bfHelper.restoreComponentsOpacityById(arr);
        }
      }
    },
    cleanLight(data) {
      bfHelper.clearAllLight();
      let arr = [];
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].arr.length; j++) {
          if (data[i].arr[j] != "") {
            let id = bfHelper.disposeId(1, data[i].build, data[i].arr[j]);
            arr.push(id);
          }
        }
      }
      if (arr.length > 0) {
        bfHelper.removeGlowEffectById(arr); //根据构件ID删除发光效果
        bfHelper.restoreColor(arr);
        // bfHelper.overrideComponentsOpacityById(arr, 0.5)
      }
    },
    //获取设备列表
    getSblb() {
      getLightSblb(
        1,
        this.build ? this.build : "",
        this.floored ? this.floored : ""
      ).then((res) => {
        this.tableData = res.data.data;
        if (this.tableData.floorData && this.tableData.floorData.length > 0) {
          let data = [];
          let data1 = [];
          for (let i = 0; i < this.tableData.floorData.length; i++) {
            for (
              let j = 0;
              j < this.tableData.floorData[i].lightList.length;
              j++
            ) {
              if (this.tableData.floorData[i].lightList[j].openStatus == 1) {
                data.push({
                  arr: this.tableData.floorData[i].lightList[j].ctrlList.split(
                    ","
                  ),
                  build: this.tableData.floorData[i].lightList[j].build,
                });
                this.getLight(data);
              } else {
                data1.push({
                  arr: this.tableData.floorData[i].lightList[j].ctrlList.split(
                    ","
                  ),
                  build: this.tableData.floorData[i].lightList[j].build,
                });
                this.cleanLight(data1);
              }
            }
          }
        }
      });
    },
    // 页码改变时触发
    handleCurrentChange(val) {
      this.current = val;
      this.getSblb();
    },
    clickLight(row,event){
      event.preventDefault(); // 阻止默认菜单
			const routerUrl = this.$router.resolve({ path: '/equipment/index', query: {code: row.code } });
			window.open(routerUrl.href, "_blank");
    },
    // 单个开关
    controlFun(row) {
      this.chooseId = [];
      if (row.agentCtrl == 0) {
        this.$message.error("暂无控制权限！");
      } else if (row.agentCtrl == 1) {
        let arr = row.ctrlList.split(",");
        let build = row.build;
        let data = [
          {
            arr: arr,
            build: build,
          },
        ];
        if (row.openStatus == 2) {
          lightControl(row.code).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("指令发送成功");
              if (res.data.data[0].status == 1) {
                // this.getSblb();
                // this.checkLight();
                //模拟
                // setTimeout(() => {
                //   this.getMessage({code: row.code, openStatus: 1, ctrlList: row.ctrlList, build: row.build});
                // },10*1000)
              } else {
                this.$message.warning(res.data.data[0].msg);
              }
            }
          });
        } else {
          lightControl2(row.code).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("指令发送成功");
              if (res.data.data[0].status == 1) {
                // this.getSblb();
                // this.checkLight();
                //模拟
                // setTimeout(() => {
                //   this.getMessage({code: row.code, openStatus: 2, ctrlList: row.ctrlList, build: row.build});
                // },10*1000)
              } else {
                this.$message.warning(res.data.data[0].msg);
              }
            }
          });
        }
      }
    },
    //批量操作 开
    openAllSwitch(row) {
      let tmp = row.agentCtrl;
      if (tmp) {
        let codes = [];
        for (let i = 0; i < row.lightList.length; i++) {
          codes.push(row.lightList[i].code);
        }

        lightControl(codes.toString()).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("指令发送成功");
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].status == 0) {
                setTimeout(() => {
                  this.$message.warning(res.data.data[i].msg);
                }, 200 * i);
              }
            }
            // this.getSblb();
            // this.checkLight();
          }
        });
      } else {
        this.$message.warning("您没有控制权限");
      }
    },
    //批量操作 关
    closeAllSwitch(row) {
      let tmp = row.agentCtrl;
      if (tmp) {
        let codes = [];
        for (let i = 0; i < row.lightList.length; i++) {
          codes.push(row.lightList[i].code);
        }

        lightControl2(codes.toString()).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("指令发送成功");
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].status == 0) {
                setTimeout(() => {
                  this.$message.warning(res.data.data[i].msg);
                }, 200 * i);
              }
            }
            // this.getSblb();
            // this.checkLight();
          }
        });
      } else {
        this.$message.warning("您没有控制权限");
      }
    },
    openTotal() {
      for (let i = 0; i < this.tableData.floorData.length; i++) {
        if (this.tableData.floorData[i].agentCtrl) {
        } else {
          this.$message.warning("第" + (i + 1) + "层没有控制权限");
        }
      }
      lightOpenBuild(this.tableData.buildCode).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("指令发送成功");
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].status == 0) {
              setTimeout(() => {
                this.$message.warning(res.data.data[i].msg);
              }, 200 * i);
            }
          }
          // this.getSblb();
          // this.checkLight();
        }
      });
    },
    closeTotal() {
      for (let i = 0; i < this.tableData.floorData.length; i++) {
        if (this.tableData.floorData[i].agentCtrl) {
        } else {
          this.$message.warning("第" + (i + 1) + "层没有控制权限");
        }
      }
      lightCloseBuild(this.tableData.buildCode).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("指令发送成功");
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].status == 0) {
              setTimeout(() => {
                this.$message.warning(res.data.data[i].msg);
              }, 200 * i);
            }
          }
          // this.getSblb();
          // this.checkLight();
        }
      });
    },
    /**
     * 定时轮询空开状态
     * 15秒执行一次，执行5次
     * 废弃 - 变更使用socket 20230313
    */
    checkLight() {
      if (this.intervalCheckLight == 0) {
        let count = 5;
        this.intervalCheckLight = setInterval(() => {
          if (count == 0) {
            clearInterval(this.intervalCheckLight);
            this.intervalCheckLight = 0;
            return;
          }
          this.getSblb();
          count--;
        }, 1000 * 15);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.switch {
  z-index: 99;
  position: absolute;
  right: 40px;
  bottom: 41px;
  // background: url(../../../public/img/monitoring/switch/switchbac.png) no-repeat;
  background-size: 100% 100%;
  width: 402px;
  height: 342px;
  background: url(../../../public/img/monitoring/electricity/newbg.png) no-repeat;
  background-size: cover;

  .switch_icon {
    cursor: pointer;
  }

  .title {
    margin: 1rem 0 2rem 1.25rem;
    color: #fff;
    font-size: 15px;
    font-weight: bold;

    img {
      display: block;
      width: 16px;
      margin-right: 10px;
    }
  }

  .main-switch {
    margin: 1rem 1.2rem 1.5rem 1.25rem;
    display: flex;
    justify-content: space-between;

    .right_main {
      display: flex;

      .main_title {
        width: 158px;
        height: 68px;
        background: url(../../../public/img/monitoring/switch/little_bac.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .first_switch {
    margin: 0rem 1.2rem 0rem 0rem;
    display: flex;
    flex-wrap: wrap;

    img {
      margin: 0 1px 0 1px;
    }

    .switch_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      color: #fff;
      margin-bottom: 10px;

      // &:nth-child(8){
      // 	margin-left: 65px;
      // }
    }
  }

  .controlAll {
    padding-right: 42px;
    box-sizing: border-box;
    margin: auto;
    border: 1px solid #07a7ff;
    border-top: none;
    width: 347px;
    height: 36px;
    justify-content: flex-end;
  }
}

.box2 {
  z-index: 99;
  background: url(../../../public/img/monitoring/electricity/genbag.png) no-repeat;
  background-size: 100% 100%;
  width: 402px;
  height: 450px;
  position: absolute;
  top: 150px;
  right: 40px;
  transition: all 0.5s;

  .title {
    margin: 17px 0 0 17px;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;

    img {
      margin-right: 5px;
      width: 20px;
      height: 19px;
    }
  }

  .state {
    margin-top: 30px;
    font-size: 28px;
    line-height: 17px;
    color: #ffffff;

    .zc {
      // padding-right: 36px;
      box-sizing: border-box;
      // justify-content: flex-end;
      background: url(../../../public/img/monitoring/electricity/lighton.png) no-repeat;
      background-size: cover;
      width: 176px;
      height: 78px;
    }

    .lx {
      // padding-right: 36px;
      box-sizing: border-box;
      // justify-content: flex-end;
      background: url(../../../public/img/monitoring/electricity/lightoff.png) no-repeat;
      background-size: cover;
      width: 176px;
      height: 78px;
    }
  }

  .stateName {
    margin: 5px 0 20px;
    color: #2cd52c;
    font-size: 14px;

    .lx {
      padding-left: 146px;
      color: #cfcfcf;
    }
  }

  // 设备告警
  .tab_box {
    width: 80%;
    display: flex;
    margin-top: 25px;
    margin-bottom: 30px;
    margin-left: 23px;
    color: #fff;

    .tab_one {
      cursor: pointer;
    }

    .tab_two {
      margin-left: 20px;
    }

    /deep/ .item .is-dot {
      background: red;
      border: none;
    }
  }

  .tit {
    margin: 0 auto 6px;
    width: 345px;
    height: 34px;
    line-height: 34px;
    background-color: #07a7ff;
    font-size: 14px;
    color: white;
    justify-content: space-around;

    &.tataitit {
      background: rgb(34, 110, 196);

      span {
        color: #1851ab;
      }
    }

    p {
      width: 33.3%;
      text-align: center;
    }

    span {
      color: silver;
    }
  }

  .noBjxx {
    color: white;
    font-size: 1rem;
    margin: 2.5rem 0 0;
    text-align: center;
  }

  .warp {
    height: 120px;
    width: 345px;
    margin: auto;
    overflow-y: auto;

    .item {
      height: 40px;
      font-size: 14px;
      color: #9d9d9d;

      .alark-alert {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(11, 34, 74, 0.8);
        // display: flex;
        justify-content: space-around;
        align-items: center;
        color: #07e6ed;

        p {
          display: flex;
          align-items: center;

          img {
            margin-right: 7px;
          }
        }
      }

      .box {
        width: 100%;
        height: 34px;
        background-color: rgba($color: #0d318b, $alpha: 0.6);

        &.tataicon {
          background-color: rgba($color: #1f355c, $alpha: 1);

          span {
            color: #1851ab;
          }
        }

        .left {
          width: 33.3%;
          text-align: center;

          img {
            width: 16px;
            height: auto;
            margin: 0 5px 0 10px;
          }

          .message {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .data {
          width: 33.3%;
          text-align: center;
        }

        .time {
          width: 33.3%;
          text-align: center;
        }
      }
    }

    .item:hover {
      cursor: pointer;
    }
  }
}
</style>
