<template>
  <span class="animate-number" v-html="animatedValue"></span>
</template>

<script>
import anime from "animejs";

export default {
  props: {
    value: {
      type: [Number, String],
      required: true,
    },
    easing: {
      type: String,
      default: "linear",
    },
    duration: {
      type: Number,
      default: 1000,
    },
    delay: {
      type: Number,
      default: 0,
    },
    round: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      animatedValue: 0,
    };
  },
  mounted() {
    this.animateVal(this.value);
  },
  watch: {
    value(val) {
      this.animateVal(val);
    },
  },
  methods: {
    animateVal(val) {
      anime({
        targets: this,
        animatedValue: Number(val),
        duration: this.duration,
        easing: this.easing,
        delay: this.delay,
        round: this.round,
      });
    },
  },
};
</script>
