<template>
  <div class="tweened">
    <div>{{ intAnimated }}</div>
    <div v-if="precision>0">
      ,{{ deciAnimated }}
    </div>
    <div v-else />
    <div>{{ einheit }}</div>
  </div>
</template>

<script>
import gsap from 'gsap';
import './TweenedNumber.css';

export default {
  name: "TweenedNumber",
  props: {
    wert: {
      type: Number,
      default: 0
    },
    einheit: {
      type: String,
      default: ""
    },
    precision: {
      type: Number,
      default: 0
    }
  },
  data(){
    return {
      tweenedValue: 0,
    }
  },
  computed: {
    valueAnimated() {
      return this.tweenedValue.toLocaleString(
        "de-DE", 
        { 
          maximumFractionDigits: 2, 
          minimumFractionDigits: this.precision
        }
      );
    },
    intAnimated() {
      return this.valueAnimated.split(',')[0];
    },
    deciAnimated() {
      return this.valueAnimated.split(',')[1];
    }
  },
  watch: {
    wert: {
      handler(newValue) {
        gsap.to(this.$data, 0.5, {tweenedValue: newValue });
      },
      deep: true
    }
  }
}
</script>
