<template>
  <div class="text-4xl text-white flex items-center justify-center relative">
    <div
      class="absolute left-36px text-15px font-bold bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE] flex items-center"
    >
      {{ year }}年
      <div class="flex flex-col justify-center -mt-2px ml-4px">
        <caret-up-outlined
          :style="{ fontSize: '10px', color: '#76E9F0' }"
          class="h-6px cursor-pointer"
          @click="onYearPlus"
        />
        <caret-down-outlined
          :style="{ fontSize: '10px', color: '#76E9F0' }"
          class="h-6px cursor-pointer"
          @click="onYearMinus"
        />
      </div>
    </div>
    <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, computed } from 'vue'
  import headTitleImg from '/@/assets/images/head-title.png'
  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'

  import { useVisualizationStore } from '/@/store/modules/visualization'

  const visualizationStore = useVisualizationStore()

  const year = computed(() => visualizationStore.getYear)

  const onYearPlus = () => {
    visualizationStore.plus()
  }
  const onYearMinus = () => {
    visualizationStore.minus()
  }

  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>
