<script setup>
import { onMounted, ref, watch } from "vue";
import { LottieAnimation } from "lottie-web-vue";
import AnimationDataJSON from "../assets/Lottiefile_Bauchbinde_Beispiel.json";

let anim = ref();

const props = defineProps({
  vorname: {
    type: String,
    required: true,
  },
  nachname: {
    type: String,
    required: true,
  },
  funktionZeileEins: {
    type: String,
    required: true,
  },
  funktionZeileZwei: {
    type: String,
    required: true,
  },
});

const lottie = ref(0);

watch(
  () => props.vorname,
  () => {
    AnimationDataJSON.layers[1].t.d.k[0].s.t = props.vorname;
    lottie.value++;
  }
);

watch(
  () => props.nachname,
  () => {
    AnimationDataJSON.layers[3].t.d.k[0].s.t = props.nachname;
    lottie.value++;
  }
);

watch(
  () => props.funktionZeileEins,
  () => {
    AnimationDataJSON.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
    lottie.value++;
  }
);

watch(
  () => props.funktionZeileZwei,
  () => {
    AnimationDataJSON.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
    lottie.value++;
  }
);

onMounted(() => {
  setTimeout(() => {
    console.log(anim.value.goToAndPlay(150, true));
    anim.value;
  }, 500);
});
</script>
<template>
  <LottieAnimation
    :key="lottie"
    ref="anim"
    :animation-data="AnimationDataJSON"
    :loop="true"
    :auto-play="true"
    :speed="1"
    @loopComplete="loopComplete"
    @complete="complete"
    @enterFrame="enterFrame"
    @segmentStart="segmentStart"
    @stopped="stopped"
  />
</template>