<script setup lang="ts">
const showTime = ref<Date>(new Date())
// const testDate = new Date()
// testDate.setHours(24)
// const showTime = ref<Date>(testDate)

const zkTime = new Date("2024-06-26 09:00:00")

var nowDate =new Date()
const toZkTime = ref<string>("")
const getToZkTime = ()=>{
  nowDate = new Date()
  var subtime = (zkTime - nowDate) / 1000;    //计算时间差,并将毫秒转化为秒
  var days = parseInt(subtime / 86400);  //天  24*60*60*1000
  var hours = parseInt(subtime / 3600) - 24 * days;   //小时  60*60  总小时数-过去小时数=现在小时数
  var mins = parseInt(subtime % 3600 / 60);    //分钟 - (day*24)  以60秒为一整份  取余 剩下秒数 秒数/60就是分钟数
  var secs = parseInt(subtime % 60);   //以60秒为一整份  取余  剩下秒数
  return days + "天 " + hours + "小时 " + mins + "分钟 ";

}


const renewTime = ()=>{
  console.log("正在更新时间")
  showTime.value = new Date()
  toZkTime.value = getToZkTime()
}
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>
    <div>
      <el-text style="font-size: 2vw">距离中考还有 {{toZkTime}}</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>