<!--title-->
<template>
  <div class="headComponent">
    <img class="logo-img" src="@/assets/ZDimages/logo.png">
    <p class="title-p">西北农林科技大学科研温室{{headData.name}}环境感知监测中心</p>
    <p class="time-p">{{timeData}}</p>
  </div>
</template>
<script>
  import {
    laboratoryWsBigViewGetTimeData
  } from "@/api/index";
  export default {
    name: 'headComponent',
    props: {
      headData: {
        name:'',
      }
    },
    data () {
      return {
        title:'',
        dateData:'',
        weekData:'',
        timeData:'',
        timer:null,
      }
    },
    created(){

    },
    mounted(){
      this.timeFunction();
    },
    methods:{
      //时间定时器
      timeFunction(){
        let self = this;
        this.laboratoryWsBigViewGetTimeData();
        self.timer = window.setInterval(() => {
          self.laboratoryWsBigViewGetTimeData();
        }, 30000);
      },
      laboratoryWsBigViewGetTimeData(){
        laboratoryWsBigViewGetTimeData().then(res => {
          this.$set(this,'timeData',res.data)
        })
      }
    },
    beforeDestroy() {
      //清除定时器
      window.clearInterval(this.timer);
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.timer);
    }
  }
</script>
<style scoped lang="scss">
  .headComponent{
    height:70px;
    display: flex;
    background: linear-gradient( 180deg, #002055 0%, #013D90 100%);
    .logo-img{
      margin:10px 10px 10px 630px;
      width:50px;
      height:50px;
    }
    .title-p{
      flex:1;
      color:#fff;
      line-height:70px;
      font-family: Source Han Sans, Source Han Sans;
      font-weight: 700;
      font-size: 28px;
    }
    .time-p{
      width:240px;
      line-height: 70px;
      text-align: center;
      color:#fff;
      font-size:16px;
    }
  }
</style>
