<script setup lang="ts">
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
import { dateUtil, formatToDateTime } from '@/utils/dateUtil'
import { DateFormatEnum } from '@/enums/timeEnum'

const date = ref<string>(formatToDateTime(Date.now()))

const week = ['日', '一', '二', '三', '四', '五', '六']

useIntervalFn(() => {
  date.value = `${dateUtil().format(DateFormatEnum.YYYY_MM_DD)} ${dateUtil().format(DateFormatEnum.HH_MM_SS)}`
}, 1000)
</script>

<template>
  <main class="w-full h-full flex flex-col justify-center items-center">
    <div class="text-[18px]">
      {{ date.split(' ')?.[0] }} {{ `星期${week[dateUtil().day()]}` }}
    </div>
    <div class="text-[50px] p-1">
      {{ date.split(' ')?.[1] }}
    </div>
  </main>
</template>