<template>
  <div>
    {{ todaySecFormat(initSec + plusSec) }}
  </div>
</template>
<script lang="ts" setup>
import { todaySecFormat } from '@/utils';
import { ref, watch } from 'vue';

const plusSec = ref(0);

const props = defineProps<{
  initSec: number,
  isCutdown?: boolean,
}>();

const emits = defineEmits<{(e: 'end'): void;}>();

watch(() => props.initSec, () => {
  plusSec.value = 0;
});

setInterval(() => {
  if (props.isCutdown) {
    const res = props.initSec + plusSec.value;
    if (res > 0) {
      plusSec.value--;
    } else {
      emits('end');
    }
  } else {
    plusSec.value++;
  }
}, 1000);

</script>
<style lang="scss" scoped>
</style>
