<template>
  <div class="header-datetime">
    <span class="time">{{ timeText }}</span>
    <span class="date-info">{{ weekdayText }} | {{ dateText }}</span>
  </div>
</template>

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

const timeText = ref('--:--:--')
const dateText = ref('----.--.--')
const weekdayText = ref('')

const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

const pad = (value) => String(value).padStart(2, '0')

const updateDateTime = () => {
  const now = new Date()

  timeText.value = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`
  dateText.value = `${now.getFullYear()}.${pad(now.getMonth() + 1)}.${pad(now.getDate())}`
  weekdayText.value = weekdays[now.getDay()]
}

let timer = null

onMounted(() => {
  updateDateTime()
  timer = setInterval(updateDateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.header-datetime {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}

.time {
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(0deg, #00d4ff 0%, #b8f0ff 42%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.date-info {
  font-family: 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
}
</style>
