<template>
    <i>{{ counter }}</i>
  </template>
  
  <script>
  import { ref, onMounted, watch } from 'vue';
  
  export default {
    name: 'Counter',
    props: {
      maxCount: {
        type: Number,
        required: true
      }
    },
    setup(props) {
      let counter = ref(0);
      let  par = ref(0);
    
      if (counter<10) {
        par=300
      }
      else if(counter<100&&counter>=10){
        par=200
      }
      else{
        par=100
      }

     
      onMounted(() => {
        // const intervalId = setInterval(() => {
        // if (counter.value < props.maxCount) {
        //     counter.value++;
        //     console.log(counter,'counter');
        //   } else {
        //     clearInterval(intervalId);
        //   }
         
        // }, par);
      
       
      });
  
      watch(() => props.maxCount, (newVal) => {
        let bi = newVal;
        if (newVal!=0) {
          const intervalId = setInterval(() => {
            if (counter.value < bi) {
            counter.value++;
          } else {
            clearInterval(intervalId);
          }
         
        }, par);
        }
      


       

      },{immediate: true, deep: true});
  
      return {
        counter
      };
    }
  };
  </script>
  
  <style scoped>
  i {
    font-family: 'AgencyFB';
    font-size: 30px;
    text-shadow: 0 0 7px #4ef9e1;
    color: #fff;
    text-align: center;
    margin-left: 26px;
  }
  </style>