<template>
  <div ref="lottieBox"></div>
</template>

<script >
import lottie from 'lottie-web'
import welcome from './welcome.json'

export default {
  name: 'LottieWebCimo',
  data() {
    return {
      lottieEntity: {},
      animationData: welcome, //new URL('./welcome.json', import.meta.url).href,
      loop: true,
    };
  },
  methods: {
    initLottie: function () {
      this.lottieEntity = lottie.loadAnimation({
        container: this.$refs.lottieBox,
        renderer: 'svg',
        loop: this.loop || true,
        animationData: this.animationData,
      });
      this.lottieEntity.setSpeed(1.2);
    },
  },
  mounted() {
    this.initLottie();
  },
  beforeUnmount() {
    this.lottieEntity.destroy();
    this.lottieEntity = null;
  },
};
</script>
