<!-- 应急管理 -->
<template>
  <div class="emergencyManagement-index">
    <div class="left-max-big-box">
      <deptListComponent></deptListComponent>
    </div>
    <div class="center-max-big-box">
      <div class="center-top-button-max-box">
        <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
        <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_zc@1x.png">
        <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_xz@1x.png">
        <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_cdo@1x.png">
        <p class="null-p"></p>
        <p class="button-p" @click="goPage(1)">安全总览</p>
        <p class="button-p" @click="goPage(2)">资源设备</p>
        <p class="button-p" @click="goPage(3)">三维模型</p>
        <p class="button-p" @click="goPage(4)">视频监控</p>
        <p class="button-check-p">应急管控</p>
        <p class="null-p"></p>
      </div>
      <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>
    <!--<add-page :propsData="propsData" v-if="pageType === 2"></add-page>-->
  </div>
</template>
<script>
  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: {
      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});
      },
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
      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">
  .emergencyManagement-index{
    height:1409px;
    padding:0 60px;
    display: flex;
    .left-max-big-box{
      width:430px;
      margin-top: 10px;
    }
    .center-max-big-box{
      width:1690px;
      .center-top-button-max-box{
        width:911px;
        position: absolute;
        left:50%;
        margin:0 -456px;
        height:60px;
        display: flex;
        .position-img-1{
          position:absolute;
          top:0;
          left:0;
        }
        .position-img-2{
          position:absolute;
          top:0;
          left:83px;
        }
        .position-img-3{
          position:absolute;
          top:0;
          left:228px;
        }
        .position-img-4{
          position:absolute;
          top:0;
          left:374px;
        }
        .position-img-5{
          position:absolute;
          top:0;
          left:520px;
        }
        .position-img-6{
          position:absolute;
          top:0;
          left:666px;
        }
        .position-img-7{
          position:absolute;
          top:0;
          left:814px;
        }
        .null-p{
          flex:1;
        }
        .button-p{
          z-index:5;
          cursor: pointer;
          font-family: Source Han Sans, Source Han Sans;
          width:145px;
          font-size:24px;
          font-weight:700;
          line-height:60px;
          text-align: center;
          background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
          background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
        .button-check-p{
          z-index:5;
          cursor: pointer;
          font-family: Source Han Sans, Source Han Sans;
          width:145px;
          font-weight:700;
          font-size:24px;
          line-height:24px;
          height:24px;
          margin-top:18px;
          text-align: center;
          background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
          background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
          -webkit-background-clip: text; /* Chrome, Safari */
          background-clip: text;
          -webkit-text-fill-color: transparent; /* Chrome, Safari */
          color: transparent; /* 其他浏览器 */
        }
      }
      .center-bottom-max-box{
        width:1650px;
        height:423px;
        margin:0 20px 0;
        display: flex;
      }
    }
    .right-max-big-box{
      width:476px;
      padding-top: 13px;
    }
  }
</style>
