<script setup lang="ts">
const showTime = ref<Date>(new Date())
// const testDate = new Date()
// testDate.setHours(24)
// const showTime = ref<Date>(testDate)
const renewTime = ()=>{
  console.log("正在更新时间")
  showTime.value = new Date()

}
let st: string | number | NodeJS.Timeout | undefined
onMounted(()=>{
  st = setInterval(renewTime,1000)
})
onBeforeUnmount(()=>{
  clearInterval(st)
})

</script>

<template>
<Title>大屏时钟</Title>
  <client-only>
    <div>
<!--      <el-text>{{(showTime.getHours()%12)/10<1?`0${showTime.getHours()%12}`:showTime.getHours()%12}}</el-text>-->
      <el-text>{{showTime.getHours()>12?(showTime.getHours()%12)/10<1?`0${showTime.getHours()%12}`:showTime.getHours()%12:(showTime.getHours())/10<1?`0${showTime.getHours()}`:showTime.getHours()}}</el-text>
      <el-text style="font-size: 5vw" type="primary">{{(showTime.getHours()>=12?"PM":"AM")}}</el-text>
      <el-text>:</el-text>
      <el-text>{{(showTime.getMinutes())/10<1?`0${showTime.getMinutes()}`:showTime.getMinutes()}}</el-text>
      <el-text style="font-size: 5vw">:</el-text>
      <el-text style="font-size: 5vw">{{(showTime.getSeconds())/10<1?`0${showTime.getSeconds()}`:showTime.getSeconds()}}</el-text>
    </div>
  </client-only>
</template>

<style scoped>
div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
div *{
  font-size: 20vw;
}
</style>