<script setup>
import { onMounted, onUnmounted, ref } from 'vue'

const formattedTime = ref('')
let timer = null

const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const updateTime = () => {
  const now = new Date()
  formattedTime.value = formatDate(now)
}

onMounted(() => {
  updateTime() // 初始渲染
  timer = setInterval(updateTime, 1000) // 每秒更新
})

onUnmounted(() => {
  clearInterval(timer) // 清理定时器
})
</script>

<template>
  <div class="realtime-clock">
    <span>{{ formattedTime }}</span>
  </div>
</template>

<style scoped>
.realtime-clock {
  font-size: 1.5rem;
  text-align: center;
  background-color: transparent;
  padding: 0px;
  margin: 0px !important;
  color: #fff;
  font-weight: 600;
}
</style>