<script lang="ts" setup name="Clock">
const dataTime = ref(new Date())
const timer = ref()
const hours = computed(() => {
  const date = dataTime.value
  return date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
})
const minutes = computed(() => {
  const date = dataTime.value
  return date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
})
const seconds = computed(() => {
  const date = dataTime.value
  return date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
})
onMounted(() => {
  timer.value = setInterval(() => {
    dataTime.value = new Date()
  }, 1000)
})
onBeforeMount(() => {
  if (timer.value) {
    clearInterval(timer.value) // 在Vue实例销毁前，清除我们的定时器
  }
})
</script>

<template>
  <el-card class="box-card">
    <div class="clock">
      <span class="title">中国，北京时间</span>
      <span class="hours">{{ hours }}</span>:
      <span class="minutes">{{ minutes }}</span>:
      <span class="seconds">{{ seconds }}</span>
    </div>
  </el-card>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
  .box-card {
    .clock {
      text-align: right;
      font-size: 30px;
      font-weight: 600;
      margin: 10px 25px;

      .title {
        font-size: 16px;
        color: #409eff;
        font-weight: 300;
        margin-right: 20px;
      }
    }
  }
</style>