<template>
  <div :style="style" ref="lottieContainer"></div>
</template>

<script>
export default {
  name: 'WidgetLottie',
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      style: {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    };
  },
  methods: {
    init() {
      if (this._anim || !this.options.animationData) {
        return Promise.resolve();
      }

      return import('lottie-web').then(({default: lottie}) => {
        this._anim = lottie.loadAnimation({
          container: this.$refs.lottieContainer,
          renderer: 'svg',
          loop: this.options.loop,
          autoplay: false,
          animationData: this.options.animationData,
        });
      });
    },
    play() {
      if (this._anim) {
        this._anim.play();
      } else {
        this.init().then(() => {
          this._anim && this._anim.play();
        });
      }
    },
    stop() {
      this._anim && this._anim.stop();
    }
  }
};
</script>