<!--传感器模块-->
<template>
  <div class="newSensorComponent">
    <p class="component-title-p">智能监测</p>
    <vue-seamless-scroll  :class-option="classOption"
      :data="monitorList" class="warp">
      <div class="sensor-for-max-box">
        <div v-for="(item,index) in monitorList" :key="index"
             class="for-sensor-box" :class="item.type?'monitor-for-min-box-yc':'monitor-for-min-box-zc'">
          <div class="for-img-box">
            <svg-icon v-if="item.icon" class="svg-img" :icon-class="item.icon"/>
          </div>
          <div class="for-text-box">
            <p>{{item.deviceName}}</p>
            <p>{{item.deviceValue?item.deviceValue:'-'}}{{item.unit}}</p>
          </div>
        </div>
        <p class="no-list-p" v-if="!monitorList[0]">暂无数据</p>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import {
    laboratoryBigViewSelectTriggerInfo,
    iotBigViewDeviceFindBySubId,
  } from "@/api/index";
  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    name: 'newSensorComponent',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {
        //实验室ID
        subId:null,
        //传感器报警数据
        planSensorList:[],
        //智能监测
        monitorList:[],
        //传感器
        sensorOpic:"iot/device/sensor/sub/",
        sensorClient:{},
        //滚动组件配置
        classOption:{
          step:0.5,
          limitMoveNum:4,
          // singleHeight:1,//单步开启
          // waitTime:2000,//单步停留时间
          // switchDelay:1000,//单步过场动画时间
        },
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(data){
        console.log('传感器',data)
        this.$set(this,'subId',null);
        this.$set(this,'planSensorList',[]);
        this.$set(this,'monitorList',[]);
        if(data){
          this.$set(this,'subId',data.subId);
          this.offSensorMQTT('on')
          // this.laboratoryBigViewSelectTriggerInfo();
          this.iotBigViewDeviceFindBySubId();
        }
      },
      //查询实验室传感器
      iotBigViewDeviceFindBySubId(){
        let self = this;
        iotBigViewDeviceFindBySubId({subId:this.subId}).then(response => {
          console.log('response',response);
          response.data.forEach((item)=>{
            let num = 0;
            self.planSensorList.forEach((minItem)=>{
              if(item.deviceNo == minItem){
                num++
              }
            })
            item.type = num != 0;
            item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
          })
          this.$set(this,'monitorList',response.data);
        })
      },
      //查询当前正在发生的预案
      sensorAlarm(response){
        //传感器
        let planSensorList = [];
        response.data.forEach((item)=>{
          let list = JSON.parse(item.triggerUploadData)
          list.forEach((minItem)=>{
            planSensorList.push(minItem.deviceNo)
          })
        })
        this.$set(this,'planSensorList',planSensorList);
        this.iotBigViewDeviceFindBySubId();
        this.$forceUpdate();
      },
      //传感器-MQTT连接
      offSensorMQTT(type){
        let self = this;
        if(self.sensorClient.unsubscribe){
          self.sensorClient.unsubscribe(self.sensorOpic+self.checkSubId, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.sensorClient.end();
          this.$set(this,'sensorClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.sensorMQTT();
        }
      },
      //传感器-MQTT订阅
      sensorMQTT(){
        let self = this;
        this.sensorClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.sensorClient.on("connect", e =>{
          this.sensorClient.subscribe(self.sensorOpic+self.subId, (err) => {
            if (!err) {
              // console.log("智能监测-订阅成功:" + self.sensorOpic+self.subId);
            }else{
              // console.log("智能监测-连接错误:" + err);
            }
          });
        });
        this.sensorClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            let list = JSON.parse(JSON.stringify(this.monitorList))
            // console.log('传感器消息',data)
            list.forEach((item)=>{
              data.forEach((minItem)=>{
                if(item.deviceNo == minItem.deviceNo){
                  item.deviceValue = minItem.deviceValue;
                  item.online = minItem.online;
                }
              })
            })
            this.$set(this,'monitorList',list);
          }
        });
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offSensorMQTT();
    },
  }
</script>
<style scoped lang="scss">
  *{
    margin:0;
    padding:0;
  }
  .newSensorComponent{
    width:310px;
    height:290px;
    background-color: #052F48;
    margin-right:20px;
    padding:0 20px 0 30px;
    .component-title-p{
      height:50px;
      line-height:50px;
      font-size:18px;
      color:#24D1F9;
    }
    .warp{
      height:210px;
      overflow: hidden;
      .sensor-for-max-box{
        height:210px;
        overflow: hidden;
        /*overflow-y: scroll;*/
        .no-list-p{
          text-align: center;
          color:#dedede;
          font-size:14px;
          line-height:70px;
        }
        .for-sensor-box{
          width: 250px;
          height: 60px;
          overflow: hidden;
          background: rgba(36,209,249,0.1);
          display: flex;
          margin-bottom:10px;
          border-radius:4px;
          .for-img-box{
            width:49px;
            height:42px;
            //栅格布局居中
            display: grid;
            align-items: center;
            justify-items: center;
            overflow: hidden;
            margin:9px 20px;
            .svg-img{
              display: block;
              width:24px;
              height:24px;
              margin:5px 0 0;
            }
          }
        }
        .monitor-for-min-box-zc{
          .for-img-box{
            background: url("../../../assets/ZDimages/emergencyManagement/654654654645@1x.png") no-repeat;
            background-size:100%;
            .svg-img{
              color:#24D1F9;
            }
          }
          .for-text-box{
            overflow: hidden;
            padding-top:9px;
            p{
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
              font-size:16px;
              height:20px;
              line-height:20px;
            }
            p:nth-child(1){
              color:#fff;
            }
            p:nth-child(2){
              color:#ffffff;
              /*color:#24D1F9;*/
            }
          }
        }
        .monitor-for-min-box-yc{
          .for-img-box{
            background: url("../../../assets/ZDimages/emergencyManagement/5646546464646@1x.png") no-repeat;
            background-size:100%;
            .svg-img{
              color:#F72837;
            }
          }
          .for-text-box{
            overflow: hidden;
            padding-top:9px;
            p{
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
              font-size:16px;
              height:20px;
              line-height:20px;
            }
            p:nth-child(1){
              color:#ffffff;
            }
            p:nth-child(2){
              color:#E80000;
            }
          }
        }
      }
    }
  }
</style>
