<template>
  <div class="text-4xl text-white flex items-center justify-center relative">
    <div class="w-1099px h-43px relative">
      <div class="absolute left-0 bottom-0 w-340px text-10px h-28px flex items-center justify-end">
        {{ state.date }} {{ state.time }}
      </div>
      <div
        class="absolute right-0 bottom-0 w-340px text-10px h-28px flex items-center justify-start"
      >
        <div>多云</div>
        <div class="mx-20px">PM2.5</div>
        <div class="flex items-center">
          <span class="bg-[#00F500] w-2.2px h-2.2px inline-block rounded-full mr-4px"></span>
          <span>良好</span>
        </div>
      </div>
      <img class="w-full h-full" :src="headTitleImg" alt="" srcset="" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import headTitleImg from '/@/assets/images/head-title.png'

  const state = reactive({
    date: '',
    time: '',
    week: '',
    showIndex: 0,
  })
  // 获取时间接口
  const getTime = async () => {
    var myDate = new Date()
    let month = (myDate.getMonth() + 1).toString().padStart(2, '0')
    let day = myDate.getDate().toString().padStart(2, '0')
    let hour = myDate.getHours().toString().padStart(2, '0')
    let minutes = myDate.getMinutes().toString().padStart(2, '0')
    let seconed = myDate.getSeconds().toString().padStart(2, '0')
    state.date = myDate.getFullYear() + '-' + month + '-' + day
    state.time = hour + ':' + minutes + ':' + seconed
  }

  setInterval(() => {
    getTime()
  }, 1000)

  // 获取当前星期几

  const getWeekDate = () => {
    var now = new Date()
    var day = now.getDay()
    var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    state.week = weeks[day]
  }
  setInterval(() => {
    getWeekDate()
  }, 1000 * 60 * 60 * 24)
</script>

<style scoped></style>
