<template>
  <div class="header">
    <div class="header_box">
      <!-- 左边时间区域 -->
      <div class="box_time">
        <span class="date">日期：{{ currentDate }}</span>
        <span>时间：{{ currentTime }}</span>
      </div>
      <!-- 中间标题区域 -->
      <div class="box_title">万载三中领导驾驶舱</div>
      <!-- 右边天气信息区域 -->
      <div class="box_weather">
        <span
          >天气：{{ weatherInfo.dayweather }} &nbsp;{{
            weatherInfo.nighttemp
          }}℃~{{ weatherInfo.daytemp }}℃</span
        >
        <span class="air">空气质量：优</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { getCurrentTime } from "@/utils/getTime";
// @ts-ignore
import { getWeatherInfo } from "@/api/weather/index";

// 当前日期
const currentDate = ref();
// 当前时间
const currentTime = ref();
// 定时器标识
const timer = ref();
// 天气信息
const weatherInfo = ref({
  // 天气情况
  dayweather: "",
  // 白天温度
  daytemp: "",
  // 夜间温度
  nighttemp: "",
});

onMounted(() => {
  // 获取天气信息
  getWeather();
  // 获取当前时间
  getTime();
  timer.value = setInterval(() => {
    getTime();
  }, 1000);
});

onUnmounted(() => {
  // 页面卸载时清除定时器
  clearInterval(timer.value);
});

// 获取天气信息
const getWeather = async () => {
  weatherInfo.value = await getWeatherInfo();
};

// 获取当前日期时间
const getTime = () => {
  currentDate.value = getCurrentTime().currentDate;
  currentTime.value = getCurrentTime().currentTime;
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  height: 83px;
  color: #fff;
  font-family: "庞门正道标题体";
  background-image: linear-gradient(rgba(1, 15, 15, 1), rgba(11, 32, 38, 0.4));

  .header_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    width: 1870px;
    height: 83px;
    font-size: 20px;
    background-image: url(@/assets/images/header-bg.png);
    background-size: cover;

    .box_time {
      margin-top: 17px;
      width: 460px;

      .date {
        margin: 0 80px 0 11px;
      }
    }

    .box_title {
      margin-left: -15px;
      font-size: 52px;
      background-image: linear-gradient(
        rgba(255, 255, 255, 1),
        rgba(0, 128, 163, 1)
      );
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box_weather {
      margin-top: 17px;

      .air {
        margin: 0 75px;
      }
    }
  }
}
</style>
