<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center"
    :style="{ 'justify-content': element.style.textAlign }"
  >
    <p>{{ state.nowDate }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'

const props = defineProps({
  element: {
    type: Object
  }
})

const { element } = toRefs(props)
const state = reactive({
  nowDate: '', // 当前日期
  nowWeek: '',
  timer: null
})

const currentTime = () => {
  state.timer = setInterval(formatDate, 500)
}
const formatDate = () => {
  const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  let timeFormat = element.value.formatInfo.timeFormat
  const showWeek = element.value.formatInfo.showWeek
  const showDate = element.value.formatInfo.showDate
  const dateFormat = element.value.formatInfo.dateFormat || 'yyyy-MM-dd'
  if (showDate && dateFormat) {
    timeFormat = dateFormat + ' ' + timeFormat
  }

  const date = new Date()

  state.nowDate = date.format(timeFormat)

  if (showWeek) {
    state.nowWeek = weekArr[date.getDay()]
    state.nowDate = state.nowDate + ' ' + state.nowWeek
  }
}

onMounted(() => {
  currentTime()
})

onUnmounted(() => {
  if (state.timer) {
    clearInterval(state.timer) // 在Vue实例销毁前，清除时间定时器
  }
})
</script>

<style lang="less" scoped></style>