<template>
  <span>{{ timeString }}</span>
</template>

<script setup lang="ts">
import { DateUtils, SimpleTimer } from '@imengyu/imengyu-utils';
import { onBeforeUnmount, onMounted, ref } from 'vue'

const props = defineProps({
  format: {
    type: String,
    default: 'HH:mm:ss'
  },
  flushTime: {
    type: Number,
    default: 1000
  },
});

const timeString = ref('')
const updateTime = () => {
  const now = new Date();
  timeString.value = DateUtils.formatDate(now, props.format)
}

const timer = new SimpleTimer(undefined, updateTime, props.flushTime);

onMounted(() => {
  timer.start();
  updateTime();
});
onBeforeUnmount(() => {
  timer.stop();
});
</script>
