<template>
  <div class="iot-header">
<!--    <img-->
<!--      class="header-title-bg"-->
<!--      src="../../../assets/imgs/IOTImage/header-bg.png"-->
<!--    />-->
<!--    <img height="142"-->
<!--        class="header-title-bg"-->
<!--        src="../../../assets/imgs/big_bg.png"-->
<!--    />-->
    <div class="titles">
      <div class="text-gradient">IOT数据应用系统</div>
    </div>
<!--    <div class="header-title">IOT数据应用系统</div>-->
    <div class="middle-info"></div>
    <div class="right-info">
      <div class="time-show">
        <myTimer/>
      </div>
      <div class="user-name">
        <span title="用户"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQUYwNkMyNEZBQ0QxMUVFQjRFOUU0RTYxQzA5RDk4QiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQUYwNkMyNUZBQ0QxMUVFQjRFOUU0RTYxQzA5RDk4QiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjBBRjA2QzIyRkFDRDExRUVCNEU5RTRFNjFDMDlEOThCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBRjA2QzIzRkFDRDExRUVCNEU5RTRFNjFDMDlEOThCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pPvDBQAAAalJREFUeNrslk0oRFEUx2d8N9lhMT5SStlRYkUsNYtZKpmwYIOV2fjI1kqKwk5qFmI7MhuKskBkYcFC7DzEbhSh53frqLeZmfd1m8279es/vTn3/s85773TC5umGSrmKgkVeQUJBAmUudlkGEYCGYN+KIUzSEWj0Q2nZ4WdvIYYK7N9GLBc/pUk1LpSSZFIVtct2BXzG9EKqIQeOIZOONDSAarvQK7hngpbc8SoJPogTkza7w7MiibyxAyKLurowCtSR2VhO3GqOGJNPzvwbbcoXXPgRCrszlN9DVILl3aqd5rAmuhWnpiU6LKuObCNjMrgWYFD+IFemIIYpKk+riUBSeIC6crx9yPmLbrmQARZhXHL5Q956CKWazswQyLPvj0DmNcjd2L+ABPQjEk1qmiEYVDdGVLDij3tvnSAg8rFVJlsYjpZIH4JmYNPaCL+zWsH9sR8vZC5WsTMI0mogiNPHaCaNuQWnji4weHDeo6omRFjb8ZtB/4rXnDx2ZAUnfZyC0ZEM07dqfpUfsa8JPAF7xz24vKLS705WV8HUfBVHCQQJOD3+hNgADFdkgiDWsL8AAAAAElFTkSuQmCC" alt=""></span>
        <span>{{username}}</span>
        <span @click="logOut"  title="退出"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxNDNDMzNBM0ZBQ0QxMUVFQkY1QkM4RDA2MkEzOEM1QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxNDNDMzNBNEZBQ0QxMUVFQkY1QkM4RDA2MkEzOEM1QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0M0MzM0ExRkFDRDExRUVCRjVCQzhEMDYyQTM4QzVBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0M0MzM0EyRkFDRDExRUVCRjVCQzhEMDYyQTM4QzVBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+c8919gAAAdFJREFUeNrslk0oRFEUgGekJEVZMJOFZjElFlNSSrGwUXZKsbCZUcrCwk8pxsorVkYs/S0UNjZYTJTY+VkobJQsxJuisJgySM936y6mybx335uZZvNufZ337j33ntM599x7vYZheIrZSjxFbq4DrgOldpQTiYQPEYY+CKUN3cIurPr9/ic7a3pVyxDjs4hoWtclvEE1tIi1ZH8MJ8by6gDGTxEdcAMTGDj8R6cdMQ9t8A4N6L1YLi4cMEPX9WMwYMpKV+pPwiPUq+hbLabZMe6ErCkgpBWIJNwTyqCNjdqECDDnINcyHJFywGZldcE+jsSUtE3C/wA/TsLKvDmZOs1K1+wcCMB5RnirEJ1QBr9Z5n3BCURgmjkp0qE5PYj0jP9u2FJMxaeU4vxw7EBNxn8c+i3mpeAb1qAcZpzugWdIOdwDmuoeMKuCDZFrWVZ27otxkXtYJPfRXMpwQcpNm2V4BL0YH82pDGUol2Uohwt1Eqrk81o6EVHMfxjOwKeir/IgaYU7savJbxxCWXIfhB0+1+UcI5/XsbjrV2BQdr3CBXxAJTRDnRzbhiH2QDKvDxLpSKO8I3qgNm1IPEz2YAnDVwV5EbmvYtcB14FCtT8BBgBexsVStrjF4gAAAABJRU5ErkJggg==" alt=""></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myTimer from "@/components/MyTimer.vue";
import {GetUserInfo} from "@/service/userInfo.js";

let username =ref('');

function logOut(){
  window.location.href='https://cimweb.zjw.sh.cegn.cn:2007/cim-home/#/login';
}

/**
 * 查询用户信息
 */
const selectUserInfo = async () => {
  try {
    let res = await GetUserInfo();
    if (res?.data?.code == "200") {
      const data = res?.data?.data;
      if(data != null){
        username.value = data.username;
      }
    }else{
      console.log('QueryListEquipment返回值有误')
    }
  } catch (error) {
    console.log(error)
  }
};

onMounted(() => {
  selectUserInfo();
});
</script>

<style scoped lang="scss">

.iot-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  //font-size: 18px;
  display: flex;
  z-index: 101;
  background-image: url("../../../assets/imgs/big_bg.png");
  background-size: 100%;
  background-repeat: no-repeat,no-repeat;
  .header-title-bg {
    width: 100%;
  }
  .header-title {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    font-family: "heitao";
    color: #ffffff;
  }

  .titles{
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 40px;
    float: left;
  }

  .middle-info{
    .event{
      &.active{
        color: var(--theme-font-chosen-color);
        font-weight: 600;
      }
      cursor: pointer;
      //margin-right: 40px;
    }
    width: 40%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 18px;
    color: var(--theme-font-unchosen-color);
    display: flex;
    align-items: center;
    margin-right: 40px;
    .single-event{
      width: 163px;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    height: 80%;
  }
  .right-info{
    padding-right: 25px;
    width: 26%;
    font-size: 18px;
    color: #ffffff;
    font-weight: bold; /* 加粗文字 */
    .time-show{
      display: flex;
      flex-direction: column;
      padding-right: 10px;
      border-right: 1px solid #9EC5E7;
    }
    .exit{
      margin-left: 10px;
      cursor: pointer;
    }
    display: flex;
    align-items: center;
    justify-content:flex-end;
    >div{
      margin-top: 10px;
      .fa{
        margin-right: 8px;
      }
      margin-left: 10px;
    }
    height: 80%;

  }

}

.text-gradient {
  width: 16.822917vw;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 1.666667vw;
  color: #fff;
  text-shadow: 0px 8px 1px rgba(19, 80, 143, .1);
  background: linear-gradient(0deg, rgb(119, 186, 255) 0%, rgb(233, 248, 255) 73%, rgb(255, 255, 255) 100%);
  opacity: .89;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold; /* 加粗文字 */
}
.user-name{
  span{
    padding-right: 10px;
  }
  color: var(--theme-font-common-color);
}

img {
  border: none;
  vertical-align: middle;
}

</style>
