<template>
  <div class="header">
    <div class="span-div">
      <div class="title">任务大厅</div>
    </div>
    <div class="weather-time">
      <div class="weather">{{weather? weather: ''}}</div>
      <div class="temperature">{{temperature? `${temperature}°`: ''}}</div>
      <div class="air-mark good-air"></div>
      <div class="air">良好</div>
      <div class="week">{{week}}</div>
      <div class="inteval"></div>
      <div class="date">{{date}}</div>
      <div class="time">{{time}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted,ref, onBeforeUnmount } from "vue"
import dayjs from 'dayjs';

const weather = ref()
const temperature = ref()
const date = ref(dayjs().format('YYYY-MM-DD'))
const time = ref(dayjs().format('HH:mm'))
const inteval = ref()
const week = ref()
let weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

onMounted(() => {
  let day = dayjs().day();
  week.value = weekList[day]
  axios({
    method: 'get',
    url: `https://cn.apihz.cn/api/tianqi/tqyb.php?id=88888888&key=88888888&sheng=山东&place=临沂`,
  }).then(res => {
    console.log('获取天气',res)
    weather.value = res.data.weather1
    temperature.value = res.data.temperature
  })
  inteval.value = setInterval(() => {
    date.value = dayjs().format('YYYY-MM-DD')
    time.value = dayjs().format('HH:mm')
  }, 1000);
})
onBeforeUnmount(() => {
  clearInterval(inteval.value)
})
</script>

<style lang="scss" scoped>
.header{
  width: 100%;
  height: 122px;
  background-image: url('/public/taskhall/header.png');
  display: flex;
  justify-content: center;
  position: relative;
  user-select: none;
  .span-div{
    width: 208px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 33px;
    .title{
      font-family: HuXiaoBo-NanShen;
      font-weight: 400;
      font-size: 46px;
      color: #FFFFFF;
      letter-spacing: 6px;
    }
    .sub-title{
      font-family: Roboto;
      font-weight: 100;
      font-size: 14px;
      color: #6B95B3;
    }
  }
  .weather-time{
    position: absolute;
    display: flex;
    top: 36px;
    right: 43px;
    font-size: 16px;
    color: #9EB2D5;
    align-items: center;
    .weather{
      font-family: Microsoft YaHei;
      font-weight: 400;
      opacity: 0.8;
      margin-right: 9px;
    }
    .temperature{
      font-family: DINPro;
      font-weight: bold;
      font-size: 16px;
      opacity: 0.8;
      margin-right: 13px;
    }
    .air-mark{
      width: 4px;
      height: 4px;
      border-radius: 2px;
      margin-right: 6px;
    }
    .good-air{
      background: #1ACDA6;
    }
    .air{
      font-family: Microsoft YaHei;
      font-weight: 400;
      opacity: 0.8;
      margin-right: 20px;
    }
    .week{
      font-family: Microsoft YaHei;
      font-weight: 400;
      opacity: 0.8;
      margin-right: 18px;
    }
    .inteval{
      width: 1px;
      height: 14px;
      background: #F59969;
      border: 1px solid #657799;
      margin-right: 17px;
    }
    .date{
      font-family: DIN;
      font-weight: bold;
      opacity: 0.8;
      margin-right: 10px;
    }
    .time{
      font-family: DIN;
      font-weight: bold;
      opacity: 0.8;
    }
  }
}
</style>
