<script setup>
import { ref, watch, onUnmounted } from "vue";
const props = defineProps({
  start: {
    type: Boolean,
    default: false,
  },
  onFinish: {
    type: Function,
    default: () => {},
  },
});

const count = ref(4);
const timer = ref(null);
watch(
  () => props.start,
  (newVal) => {
    if (newVal) {
      if (timer.value) clearInterval(timer.value);
      timer.value = setInterval(() => {
        if (count.value <= 1) {
          props.onFinish();
          clearInterval(timer.value);
        }
        count.value -= 1;
      }, 1000);
    }
  },
  {
    immediate: true,
  }
);
onUnmounted(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container">
    <view class="number pump-in" v-if="count === 3">3</view>
    <view class="number pump-in" v-if="count === 2">2</view>
    <view class="number pump-in" v-if="count === 1">1</view>
  </view>
</template>

<style scoped>
.container {
  position: fixed;
  top: 120px;
  left: calc(50% - 30px);
}
.number {
  color: #fff9;
  font-size: 88px;
  width: 60px;
  text-align: center;
}
</style>
