<!-- 应急管理 -->
<template>
  <div class="emergencyManagement-index">
    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>应急指挥平台</i>
      </div>
    </div>
    <div class="emergencyManagement-index-page">
      <div class="left-max-big-box">
        <deptListComponent></deptListComponent>
      </div>
      <div class="center-max-big-box">
        <mapComponent ref="mapComponent"></mapComponent>
        <div class="center-bottom-max-box">
          <equipmentComponent ref="equipmentComponent" style="margin-right:20px;"></equipmentComponent>
          <dangerComponent ref="dangerComponent"></dangerComponent>
        </div>
      </div>
      <div class="right-max-big-box">
        <videoListComponent ref="videoListComponent"></videoListComponent>
      </div>
    </div>
  </div>
</template>
<script>
  import Header from '@/components/header.vue'
  import mqtt from 'mqtt'
  import deptListComponent from "./pageComponent/deptListComponent.vue";
  import mapComponent from "./pageComponent/mapComponent.vue";
  import videoListComponent from "./pageComponent/videoListComponent.vue";
  import equipmentComponent from "./pageComponent/equipmentComponent.vue";
  import dangerComponent from "./pageComponent/dangerComponent.vue";
  export default {
    name: 'index',
    components: {
      Header,
      deptListComponent,
      mapComponent,
      videoListComponent,
      equipmentComponent,
      dangerComponent,
    },
    data () {
      return {
        //预案
        planOpic:'lab/risk/plan/change',
        planClient:{},
      }
    },
    created () {

    },
    mounted () {
      this.offPlanMQTT('on');
    },
    methods: {
      setDanger(floorId){
        this.$refs['dangerComponent'].laboratoryBigViewHazardStatistics(floorId);
      },
      setAddress(list){
        this.$refs['mapComponent'].getAddress(list);
      },
      setUserNum(num){
        this.$refs['mapComponent'].getUserNum(num);
      },
      setMapData(data){
        this.$refs['equipmentComponent'].initialize({floorId:data.treeId});
        this.$refs['mapComponent'].initialize({floorId:data.treeId});
        this.$refs['videoListComponent'].initialize({floorId:data.treeId});
      },
      checkComponent(item){
        this.$refs['equipmentComponent'].initialize(item);
        this.$refs['mapComponent'].initialize(item);
        this.$refs['videoListComponent'].initialize(item);
      },
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              // console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            // console.log('预案-message',message);
            //获取预案数据
            this.$refs['equipmentComponent'].laboratoryBigViewSelectTriggerInfo()
            this.$refs['mapComponent'].laboratoryBigViewSelectTriggerInfo()
          }
        });
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offPlanMQTT();
    },
  }
</script>
<style scoped lang="scss">
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .emergencyManagement-index{
    margin-top: 138px;
    width: 1920px;
    height: 1080px;
    padding:0 60px;
    display: flex;
    flex-direction: column;
    .main_t {
      background: #062338;
      width: 1852px;
      position: absolute;
      left: 34px;
      top: 86px;
      z-index: 200;
      .main_t_t {
        margin: 20px 0 0 18px;
        > i {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #FFFFFF;
          line-height: 16px;
        }
        > i:nth-of-type(1) {

        }
        > i:nth-of-type(2) {
          color: #1ED0F8;
        }
      }
    }
    .emergencyManagement-index-page{
      /*margin-top: 138px;*/
      /*flex:1;*/
      display: flex;
      background-color: #052F48;
      height: 910px;
      .left-max-big-box{
        width:300px;
        /*margin-top: 10px;*/
      }
      .center-max-big-box{
        width:1090px;
        .center-bottom-max-box{
          width:1090px;
          height:423px;
          margin:0 20px 0;
          display: flex;
        }
      }
      .right-max-big-box{
        width: 410px;
      }
    }
  }
</style>
