<template>

<div class="timer">
  <div v-for="(w, x) in time" :key="x" class="x-num">{{ w }}</div>
</div>

</template>

<script lang='ts' setup>

import { ref, onMounted, withDefaults } from 'vue'

const props = withDefaults(defineProps<{
  symbols?: string 
}>(), {
  symbols: '-'
})

const time = ref('')
let timmer: any = null

const zeroFix = (num) => {
  return num > 9 ? num : '0' + num
}

const formatTime = () => {

  const current = new Date(),
    y = current.getFullYear(),
    mon = current.getMonth() + 1,
    d = current.getDate(),
    h = current.getHours(),
    m = current.getMinutes(),
    s = current.getSeconds()

  time.value = `${y}${props.symbols}${zeroFix(mon)}${props.symbols}${zeroFix(d)} ${zeroFix(h)}：${zeroFix(m)}：${zeroFix(s)}`

  timmer && clearTimeout(timmer)

  timmer = setTimeout(() => {
    formatTime()
  }, 1000)

}

onMounted(() => {
  formatTime()
})

</script>

<style lang='scss' scoped>

.timer {
  // font-size: 16px;
  color: white;
  display: flex;
  .x-num {
    width: 11px;
    text-align: center;
  }
}

</style>