<template>
  <section class="app-main">
    <div class="perform-evacuation-app-main-box" v-if="planType">
      <p>{{text}}</p>
      <p @click="goPage">查看</p>
    </div>
    <transition name="fade-transform" mode="out-in">
      <!--<keep-alive :include="cachedViews">-->
        <router-view :key="key" />
      <!--</keep-alive>-->
    </transition>
  </section>
</template>

<script>
  import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
  import mqtt from 'mqtt'
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      this.$store.dispatch("getMessageNum", {}).then((res) => {}).catch(() => {});
      return this.$route.path
    }
  },
  data() {
    return {
      //预案MQTT
      planOpic:'lab/risk/plan/change',
      planClient:{},
      //预案文字
      text:'',
      planType:false,
      planData:[],
    }
  },
  created() {

  },
  mounted(){
    this.offPlanMQTT('on');
    this.laboratoryBigViewSelectTriggerInfo();
  },
  methods:{
    //预案-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.laboratoryBigViewSelectTriggerInfo();
        }
      });
    },
    //查询当前正在发生的预案
    laboratoryBigViewSelectTriggerInfo(){
      let self = this;
      laboratoryBigViewSelectTriggerInfo().then(response => {
        // console.log('条幅触发',response.data);
        if(response.data[0]){
          // console.log('条幅触发-有');
          this.$set(this,'planData',response.data);
          this.$set(this,'text',response.data[1]?'有多个实验室发生预案':'有实验室发生预案');
          this.$set(this,'planType',true);
          //传感器
          let planSensorList = [];
          response.data.forEach((item)=>{
            let list = JSON.parse(item.triggerUploadData)
            list.forEach((minItem)=>{
              planSensorList.push(minItem.deviceNo)
            })
          })
          this.$store.dispatch('plan/setTitle', planSensorList)
        }else{
          // console.log('条幅触发-无');
          this.$set(this,'planType',false);
          this.$set(this,'planData',[]);
          this.$set(this,'text','');
          this.$store.dispatch('plan/setTitle', [])
        }
      })
    },
    goPage(){
      let self = this;
      if(this.$route.path == '/emergencyManagement/performEvacuation'){
        return
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '',
        message: h('p', null, [
          h('i', { style: 'color: #ea9518;font-size:100px;' ,class:"el-icon-warning-outline"}),
          h('p', { style:'font-size:16px;margin:20px 0;' }, self.text+'，是否立即查看？ '),
        ]),
        showCancelButton: true,
        confirmButtonText: '查看',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            //执行
            this.$router.push({
              path: "/emergencyManagement/performEvacuation",
              query: {
                buildId: self.planData[0].buildId,
                floorId: self.planData[0].floorId,
                type:2,
              }
            })
            done();
          } else {
            //取消
            done();
          }
        }
      }).then(action => {
        //成功回掉
      });
    },
  },
  beforeDestroy() {
    //清除MQTT
    let self = this;
    self.offPlanMQTT();
  },
}
</script>

<style lang="scss" scoped>
.app-main {
  font-weight: bold;
  width: 100%;
  position: relative;
  overflow: hidden;
  flex:1;
  display: flex;
  flex-direction: column;
  .perform-evacuation-app-main-box{
    background: rgba(255,0,0,0.2);
    margin:0 20px 0 10px;
    border-radius:10px;
    padding:0 0 0 20px;
    display: flex;
    /*height:40px;*/
    /*margin:0 20px 0 10px;*/
    /*display: flex;*/
    p:nth-child(1){
      flex:1;
      line-height:40px;
      color:red;
    }
    p:nth-child(2){
      line-height:40px;
      width:80px;
      color:#0045AF;
      cursor: pointer;
      text-align: center;
    }
  }
}
.work-color-a{
  background: rgba(30,144,255,0.2);
  p{
    color:#0045AF;
  }
}
.work-color-b{
  background: rgba(255,0,0,0.2);
  p{
    color:#FF0000;
  }
}
.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    /*min-height: calc(100vh - 84px);*/
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
