<template>
    <van-row class="record">
        <energy alt="能源" :resInfo="data.nenghao"/>
        <restaurant alt="餐饮" :resInfo="data.canyin"/>
        <printing alt="文印" :resInfo="data.wenyin"/>
        <parking alt="停车位" :resInfo="data.tingche"/>
        <flow alt="人流量" />
        <meeting alt="会议" :resInfo="data.huiyi"/>
        <videoSS alt="实时视频" @videoMsg="videoMsg" v-if="videoStatus" :info = "info"/>
        <networkCard alt="互联网卡" />
        <intrusion alt="入侵告警" />
        <equipment alt="设备告警" />
        <fireControl alt="消防隐患" />
        <equipmentStatus alt="设备状态" />
        <keepWatch alt="巡更告警" />
    </van-row>
</template>
<script>
import energy from "@/components/record/energy";
import restaurant from "@/components/record/restaurant";
import printing from "@/components/record/printing";
import parking from "@/components/record/parking";
import flow from "@/components/record/flow";
import meeting from "@/components/record/meeting";
import videoSS from "@/components/record/videoSS";
import networkCard from "@/components/record/networkCard";
import intrusion from "@/components/record/intrusion";
import equipment from "@/components/record/equipment";
import fireControl from "@/components/record/fireControl";
import equipmentStatus from "@/components/record/equipmentStatus";
import keepWatch from "@/components/record/keepWatch";
export default {
  components: {
		energy,restaurant,printing,parking,flow,meeting,videoSS,networkCard,
        intrusion,equipment,fireControl,equipmentStatus,keepWatch
        
  },
  data() {
    return {
        videoStatus:true,
        info:undefined,
        //数据
        data:{
            tingche:{},
            huiyi:{},
            nenghao:{},
            canyin:{},
            wenyin:{}
        }
    };
  },

  mounted() {
    axios({
        method: 'get',
        url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
        timeout: 10000,
    }).then(res =>{
      this.data = JSON.parse(res.data.data)
    })
    setInterval(()=>{
      axios({
          method: 'get',
          url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
          timeout: 10000,
      }).then(res =>{
        this.data = JSON.parse(res.data.data)
      })
    },1000*60*10)
  },
  methods: {
    videoMsg(id){
        this.videoStatus = false
        setTimeout(()=>{
            this.videoStatus = true
            this.info = id
        })
    }
  }
};
</script>

<style lang="scss" >
.record{
    margin-top:-35px;
    .recordList{
        padding:15px 3%;
        margin-top:10px;
        box-sizing: border-box;
        background-color: #fff;
        .titleWrap{
            font-size: 16px;
            color:#000;
            position: relative;
            
            .line{
                width:3px;
                height:16px;
                display: inline-block;
                background-color: #F22E3C;
                position: absolute;
                top:4px;
                left:0;
            }
            .title{
               vertical-align: middle;
               margin-left:10px;

            }
        }
        .type{
            margin-top:16px;
            color:#fff;
            .van-col{
                text-align: center;
                padding:10px 0;
                border-radius: 6px;
                font-size: 15px;
            }
            .textBottom{
                margin-top:10px;
            }
            
        }
    }
}
.bgc1{
    background-color: #58D5C1;
}
.bgc2{
    background-color: #E9BC5C;
}
.bgc3{
    background-color: #F8A256;
}
.bgc4{
    background-color:#67B4FB;
}
.bgc5{
    background-color: #BA7FF3;
}
.bgc6{
    background-color: #58D5C1;
}
.bgc7{
    background-color: #E65F8A;
}
.bgc8{
    background-color: #C87E91;
}

.bgcJB1{
    background-image: linear-gradient(to right, #03C2F4 , #117ADC);
}
.bgcJB2{
    background-image: linear-gradient(to right, #F18738 , #E79151);
}
.color1{
    color:#F74847;
}
.color2{
    color:#DBCA3D;
}
.color3{
    color:#70D0CC;
}
.color4{
    color:#F8BE00;
}
.color5{
    color:#F07E32;
}
.color6{
    color:#49E3FF;
}
.color7{
    color:#40FF00;
}
.color8{
    color:#3EBE3D
}
.table{
    margin-top:15px;
}
</style>
