<template>
  <div class="equipmentComponent">
    <title-page-img-components :propsData="propsData"></title-page-img-components>
    <div class="bottom-max-big-box">
      <div class="for-max-box" v-for="(item,index) in monitorList" :key="index">
        <img class="background-img" src="@/assets/ZDimages/icon_znwyzc_bg@1x.png" v-if="!item.type">
        <img class="background-img" src="@/assets/ZDimages/icon_znwyyc_bg@1x.png" v-if="item.type">
        <img class="position-img rotate-position-img" src="@/assets/ZDimages/img_znwl_xdl@1x.png" v-if="!item.type">
        <img class="position-img rotate-position-img" src="@/assets/ZDimages/img_znwl_xdh@1x.png" v-if="item.type">
        <svg-icon v-if="item.icon" class="svg-img" :class="item.type?'svg-img-yc':'svg-img-zc'" :icon-class="item.icon"/>
        <p class="for-name-p">{{item.deviceName}}</p>
      </div>
      <img v-if="!monitorList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
    </div>
  </div>
</template>
<script>
  import { iotBigViewDeviceFindByType,laboratoryBigViewSelectTriggerInfo } from "@/api/index";
  import titlePageImgComponents from '@/components/titlePageImgComponents.vue'
  export default {
    name: 'equipmentComponent',
    components: {
      titlePageImgComponents
    },
    data () {
      return {
        newData:null,
        propsData:{
          title:'智能物联',
        },
        floorId:null,
        monitorList:[],
        planSensorList:[],
      }
    },
    created(){

    },
    mounted(){
      this.laboratoryBigViewSelectTriggerInfo();
    },
    methods:{
      initialize(item){
        this.$set(this,'newData',item);
        this.$nextTick(()=>{
          this.iotBigViewDeviceFindByType();
        })
      },
      iotBigViewDeviceFindByType(){
        let self = this;
        iotBigViewDeviceFindByType({typeKeyList:["sensor"],floorId:this.newData.floorId}).then(response => {
          response.data.forEach((item)=>{
            let num = 0;
            self.planSensorList.forEach((minItem)=>{
              if(item.deviceNo == minItem){
                num++
              }
            })
            item.type = num != 0;
            item.exceptionIcon = item.exceptionIcon?localStorage.getItem('fileBrowseEnvironment')+item.exceptionIcon:null;
            item.icon = item.icon?localStorage.getItem('fileBrowseEnvironment')+item.icon:null;
          })
          this.$set(this,'monitorList',response.data);
        })
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(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.iotBigViewDeviceFindByType();
          this.$forceUpdate();
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .equipmentComponent{
    width:864px;
    height:423px;
    .bottom-max-big-box{
      width:864px;
      height:361px;
      background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
      overflow-y: scroll;
      .for-max-box{
        display: inline-block;
        height:122px;
        width:170px;
        position: relative;
        margin-top:50px;
        .background-img{
          width:80px;
          height:80px;
          position: absolute;
          top:0;
          left:45px;
        }
        .position-img{
          width:70px;
          height:70px;
          position: absolute;
          top:5px;
          left:50px;
        }
        .rotate-position-img {
          animation: rotate 10s infinite linear;
        }
        @keyframes rotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .svg-img{
          z-index:5;
          position: absolute;
          top:25px;
          left:70px;
          display: block;
          width:30px;
          height:30px;
        }
        .svg-img-zc{
          color:#24D1F9;
        }
        .svg-img-yc{
          color:#c71010;
        }
        .for-name-p{
          margin:0 auto;
          width:150px;
          margin-top:80px;
          text-align: center;
          font-size:18px;
          color:#fff;
          line-height:42px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
      }
      .null-img{
        display: block;
        width:200px;
        margin:70px auto 0;
      }
    }
    .bottom-max-big-box::-webkit-scrollbar {
      width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    .bottom-max-big-box::-webkit-scrollbar-thumb {
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #07B4C7;
      background: #07B4C7;
    }
    .bottom-max-big-box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px #013138;
      border-radius: 0;
      background: #013138;
    }
  }
</style>
