<template>
  <div class="headerPage">
    <div class="htit  pagecont">
      <div class="titleft"> 
        <img src="../../assets/image/minLogo.png">
        <span>{{companyInfo.qymc}}</span>
      </div>
      <!--<iframe width="230" scrolling="no" height="30" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=1&color=%23FFFFFF&icon=1&wind=0&num=1&site=19"></iframe>-->

    </div>


    <div class="pagecont" style="text-align: center;line-height: 0.1rem;">
      <!--<img src="../../assets/image/logo.png" alt="">-->
      <p class="page-title">{{settingData.bigScreenTitle ? settingData.bigScreenTitle : '智慧安全监控预警平台'}} </p>
    </div>

    <div class="rightBox pagecont" >
      <template v-if="settingData.bigScreenScore === 1">
        <!-- <div class="rightBox1">
          风险指数：<span> <b>{{companyInfo.riskScore}}</b> 分</span>
        </div>
        <div class="rightBox2">
          安全指数：<span> <b>{{companyInfo.safeScore}}</b> 分</span>
        </div> -->
        <div class="header-time">
          <div class="time2" v-text="data"></div>
          <div class="time1" v-text="time"></div>
          <div class="weather">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=99&color=%23FFFFFF"
                    width="160" height="40" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
          </div>
        </div>        
      </template>

      
    </div>

  </div>
</template>
<script>
  export default {
    name: "headPage",
    data() {
      return {
        companyInfo: {},
        settingData: {
          bigScreenTitle: null,
          bigScreenScore: 1
        },  // 配置参数
        data: "",
        time: "",
        intervalTimer: null
      }
    },
    mounted() {
      var that = this
      setTimeout(function () {
        that.getCompanyInfo()
      }, 1000)
      this.refreshTime();

    },
    methods: {
      initTimer() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        if (month < 10) {
          month = "0" + month;
        }
        var day = date.getDate();
        if (day < 10) {
          day = "0" + day;
        }
        var hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        var minutes = date.getMinutes();
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        var seconds = date.getSeconds();
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        this.data = year + "-" + month + "-" + day
        this.time = hour + ":" + minutes + ":" + seconds
      },
      refreshTime() {
        let that = this;
        this.intervalTimer = setInterval(
          that.initTimer, 1000);
      },
      getCompanyInfo() {
        let that = this;
        let obj = {
          gId: this.$route.query.gId,
          cId: this.$route.query.cId
        }
        console.log(obj)
        this.$axios.AxiosMethods("get", "3rd/bigScreenData/getCompanyScoreInfo", obj, function (res) {
          if(res.data.list.length > 0){
            that.companyInfo = res.data.list[0];
          }
        });
        this.$axios.AxiosMethods("get", "3rd/bigScreenData/getSetting", obj, (res) => {
          let {code,data} = res;
          if(code === 1){
            this.settingData = data;
          }
        });
      },
      destroy() {
        console.log('销毁')
        clearInterval(this.intervalTimer)
      }
    }
  }
</script>
<style lang="less" scoped type="text/less">
  .headerPage {
    /*font-size: 0.1rem;*/
    width: 100%;
    height: 0.78rem;
    line-height: 0.78rem;
    background: url('../../assets/image/hydp_title.png') no-repeat center;
    background-size: contain;
    display: flex;
    justify-content: space-between;

    .page-title {
      font-size: .28rem;
      /*height: 100%;*/
      justify-items: center;
      display: inline-block;
      transform: translateY(-50%);
      color: #D1ECFD;
      font-weight: bold;
    }

    .pagecont {
      flex: 1;
    }
    .header-time {
      width: 79%;
      height: 57px;
      color: #ffffff;
      /*text-align: center;*/
      /*background: url("../../assets/image/shijianbiaoti.png") center/cover;*/
      font-size: 14px;
      position: relative;
      .weather {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: -175px;
      }
    }

    .header-time > div {
      display: inline-block;
      font-size: 14px;
      color: #b2d4d9;
      line-height: 57px;
      padding: 0 10px;
    }
    .htit {
      display: inline-block;
      overflow: hidden;
      .titleft {
        // width: 45%;
        height: 100%;
        color: #fff;
        font-size: 0.16rem;
        padding-left: 0.26rem;
        float: left;
        display:flex;
        justify-items: center;
        align-items: center;
        img{
          display: block;
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.2rem;
        }
        span{
          display: block;
          height: 100%;
        }
      }
    }

    img {
      width: 2.5rem;
      height: 0.28rem;
    }
    .rightBox {
      color: #fff;
      text-align: right;
      font-size: 0.16rem;
      margin-right: 0.26rem;
      line-height: 0.78rem;
      /*i{
          width: 0.1rem;
          height: 0.1rem;
          display: block;
          position: absolute;
          background: url('../../assets/image/img_jiao.png');
      }*/
      .rightBox1 {

        width: 1.7rem;
        height: 0.48rem;
        line-height: 0.48rem;
        text-align: center;
        display: inline-block;
        position: relative;
        /*border: 0.01rem solid #FE8204;*/
        background: url('../../assets/image/home-bg_03.png');
        background-size: 100% 100%;
        span {
          color: #FE8204;
          b {
            font-size: 0.17rem;
          }
        }
        /*.iTop{
            top: 0;
        }
        .iBottom {
            bottom: -2px;
            right: -2px;
        }*/
      }
      .rightBox2 {
        width: 1.7rem;
        height: 0.48rem;
        line-height: 0.48rem;
        text-align: center;
        margin-left: 0.18rem;
        display: inline-block;
        position: relative;
        /*border: 0.01rem solid #127CFF;*/
        background: url('../../assets/image/home-bg_05.png');
        background-size: 100% 100%;
        span {
          color: #127CFF;
          b {
            font-size: 0.17rem;
          }
        }
        /*.iTop{
            top: 0;
        }
        .iBottom {
            bottom: -2px;
            right: -2px;
        }*/
      }
    }
  }
</style>

