<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div class="header">
    <img class="logo" src="/src/assets/images/logo-demo.png" :onerror="imgOnError" />
    <div class="date">
      <i class="time">{{ datas.dateTime }}</i>
    </div>

    <div class="btns" v-if="false">
      <a-button>播放</a-button>
      <a-button @click="showPop">设置</a-button>
    </div>
    <span class="sysName">YX水文气象监测系统</span>
    <Weather />
    <Popup class="popup" @changeBasinStatus="changeBasinStatus" v-show="basinStatus" />
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive } from 'vue';
import Weather from './Weather.vue';
import url1 from '../../assets/images/logo-demo.png';
import Popup from './Popup.vue';
import moment from 'moment';
import { fontSize } from '../../utils/util';

export default defineComponent({
  name: 'HeaderTitle',
  components: { Weather, Popup },
  setup() {
    const datas = reactive({
      dateTime: null,
    });
    const time = () => {
      datas.dateTime = moment().format('YYYY-MM-DD HH:mm:ss');
    };
    const imgOnError = (e) => {
      let img = e.srcElement;
      img.src = url1;
      img.onerror = null; //防止闪图
    };
    onMounted(() => {
      setInterval(() => {
        time();
      }, 1000);
    });
    // const showPop = () => {};
    return {
      // showPop,
      imgOnError,
      datas,
      time,
    };
  },
  data() {
    return {
      basinStatus: false, //漫游的显示与隐藏参数
    };
  },
  methods: {
    showPop() {
      console.log('点击了？');
      this.basinStatus = !this.basinStatus;
    },
    changeBasinStatus(value) {
      this.basinStatus = value;
    },
  },
});
</script>
<style lang="less">
.popup {
  // position: absolute;
  // left: 500px;
  //   top: 500px;
}
@font-face {
  font-family: 'SourceHanSansCN';
  src: url('../../assets/font/SourceHanSansCN-Bold.otf');
}
.header {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: auto;
  background: url('../../assets/images/顶部样式.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  img {
    height: 2rem;

    &.logo {
      margin-right: 1rem;
      opacity: 1;
      position: relative;
      top: -6px;
    }
  }
  .btns {
    margin-left: 12rem;
    opacity: 1;
    position: absolute;
    top: -6px;
  }
  .sysName {
    color: #ffffff;
    line-height: 124px;
    background: linear-gradient(0deg, #6fcfff 40%, #f0faff);
    font-family: 'SourceHanSansCN';
    font-size: 30px;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.date {
  position: absolute;
  left: 300px;
  top: 10px;
  font-size: 1.2rem;
  color: #fff;
}
</style>
