<template>
  <div class="header-panel">
    <!-- <img class="logo" src="../../assets/images/systemLogo.png" :onerror="imgOnError"/> -->
    <div class="time-wearther-container">
      <div class="time">{{ currentTime }}</div>
      <div class="date-and-week">
        <div class="date">{{ currentDate }}<br />{{ currentWeekDay }}</div>
      </div>
      <div class="weatherContent" v-if="temperature"
        ><img :src="weatherIcon" />{{ temperature }}</div
      >
    </div>
    <div v-show="account" class="back-to-navigation2" @click="superAdmin">运维系统</div>
    <div class="back-to-navigation" @click="backToNavigation">{{ prop.buttonName }}</div>
    <div class="title">YX水文气象监测系统门户</div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref, onBeforeUnmount } from 'vue';
  import { useRouter } from 'vue-router';
  // import url from '/src/assets/images/logo-demo.png'
  import { useUserStore } from '/@/store/modules/user';
  import { usePermissionStore } from '/@/store/modules/permission';
  // import { getWeather, getWeatherIcon } from '/@/views/lifeline/bigscreen/common/utilities';
  import { session } from '/@/utils/Memory';
  import { useAppStore } from '/@/store/modules/app';

  const account = ref(session.getItem('user').username == 'sysadmin');

  const prop = defineProps({
    buttonName: {
      type: String,
      default: '返回导航',
    },
  });
  const userStore = useUserStore();
  const router = useRouter();
  const WEEK_DAY = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const dateTimer = ref(); // 用来更新日期时间的计时器
  const weatherTimer = ref(); //用来更新天气的计时器
  const currentTime = ref<string>(''); //时分秒
  const currentDate = ref<string>(''); //年月日
  const currentWeekDay = ref<string>(''); //星期
  const temperature = ref<string>(''); //温度
  const weatherIcon = ref(); //天气图标
  /**
   * 获取当前时间（年月日，时分秒，星期）
   */
  const getCurrentTime = () => {
    const time = new Date();
    const year = time.getFullYear(); //年
    const month = time.getMonth(); //月
    const day = time.getDate(); //日
    const weekDay = WEEK_DAY[time.getDay()]; //星期几
    const hour = time.getHours(); //时
    const minute = time.getMinutes(); //分
    const second = time.getSeconds(); //秒
    currentDate.value =
      year +
      '-' +
      (month < 0 ? '00' : ('0' + month).slice(-2)) +
      '-' +
      (day < 0 ? '00' : ('0' + day).slice(-2));
    currentTime.value =
      (hour < 0 ? '00' : ('0' + hour).slice(-2)) +
      ':' +
      (minute < 0 ? '00' : ('0' + minute).slice(-2)) +
      ':' +
      (second < 0 ? '00' : ('0' + second).slice(-2));
    currentWeekDay.value = weekDay;
  };
  /**
   * 获取天气数据
   */
  const getWeatherData = () => {
    // const fn = getWeather((data) => {
    //   console.log(data, data.real.weather.info);
    //   temperature.value = data.real.weather.temperature + '℃';
    //   weatherIcon.value = getWeatherIcon(data.real.weather.info);
    // });
    // fn;
    // weatherTimer.value = setInterval(() => {
    //   fn;
    // }, 600000);
  };
  /**
   * 返回导航按钮点击事件
   */
  const backToNavigation = (event) => {
    event.stopPropagation(); //阻止事件冒泡
    userStore.backLogin();
  };
  onMounted(() => {
    dateTimer.value = setInterval(() => {
      getCurrentTime();
    }, 100);
    getWeatherData();
  });
  // 组件销毁时
  onBeforeUnmount(() => {
    if (dateTimer.value) {
      clearInterval(dateTimer.value); //清除日期时间定时器
    }
    if (weatherTimer.value) {
      clearInterval(weatherTimer.value); //清除天气定时器
    }
  });
  const permissionStore = usePermissionStore();
  const appStore = useAppStore();
  const superAdmin = () => {
    permissionStore.setBackMenuList(session.getItem('allMenuList'));
    router.push({ path: '/dashboard/workbench' });
    appStore.setCurrentSystemName('智能化地灾中台');
  };

  // const imgOnError = (e) => {
  //       let img = e.srcElement;
  //       img.src = url
  //       img.onerror = null; //防止闪图
  //   }
</script>
<style lang="less" scoped>
  .header-panel {
    width: 100%;
    height: 6.5%;
    position: relative;

    // img {
    // display: flex;
    // position: fixed;
    //   float: left;
    //   height: 0.2rem;
    //   top:10px;
    //   left: 10px;

    //   &.logo {

    //     margin-right: 1rem;
    //     opacity: 1;
    //   }
    // }

    .time-wearther-container {
      display: flex;
      position: fixed;
      float: left;

      .time {
        width: 0.4219rem;
        color: #fff;
        line-height: 0.4167rem;
        font-size: 0.1563rem;
        font-family: Agency FB;
        font-weight: 400;
        margin: 0 0.0521rem 0 0.1042rem;
      }

      .date-and-week {
        margin: 0.1302rem 0;
        margin-left: 40px;

        .date {
          font-size: 0.0625rem;
          font-family: Agency FB;
          font-weight: 400;
          color: #fff;
          line-height: 0.0781rem;
        }
      }

      .weatherContent {
        display: flex;
        align-items: center;
        font-size: 0.1563rem;
        font-family: Agency FB;
        font-weight: 400;
        color: #fff;
        line-height: 0.4167rem;
        margin-left: 0.1042rem;

        img {
          width: 0.2083rem;
          height: 0.1615rem;
          margin-right: 0.0521rem;
        }
      }
    }

    .title {
      padding-top: 15px;
      font-size: 30px;
      display: flex;
      justify-content: center;
      text-align: center;
      top: 30px;
      font-weight: bold;
      font-family: AlimamaShuHeiTi-Bold;
      line-height: 0.2083rem;
      background: linear-gradient(0deg, rgb(0, 255, 255) -10%, #ece9e5 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .back-to-navigation {
      cursor: pointer;
      position: fixed;
      font-size: 0.0729rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      right: 10px;
      background: ~"url('/@/views/lifeline/bigscreen/images/header/返回导航.png')" no-repeat;
      background-size: 30px 28px;
      background-position: right center;
      text-align: center;
      line-height: 50px;
      padding: 10px 30px 10px 10px;
      color: #b6dffc;
      // font-size: 16px;
    }

    .back-to-navigation2 {
      cursor: pointer;
      position: fixed;
      background: ~"url('/@/views/lifeline/bigscreen/images/header/super.png')" no-repeat;
      font-size: 0.0729rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      right: 90px;
      background-position: center center;
      text-align: center;
      line-height: 50px;
      margin-right: 50px;
      padding: 10px 15px 10px 15px;
      color: #b6dffc;
      // font-size: 16px;
    }
  }
</style>
