<template>
  <div class="relative center" @mouseenter="enter" @mouseleave="leave">
    <div v-if="draw" v-show="status" class="screen" ref="svg"></div>
    <v-image v-show="!status" v-if="defaultSrc" :display="!status" :getSizeFailBody="false" :style="{width:size,height:size}" backgroundColor="transparent" :src="defaultSrc"></v-image>
  </div>
</template>

<script>
import * as SVGA from 'svgaplayerweb';
import props from '../props';
import {
  vImage
} from '$components';
import {nextTick} from "vue";
export default {
  name: "svg-animate",

  data(){
    return {
      draw:false,
      status:false
    }
  },

  watch:{
    src:function (){

      return this.play(this.loops);
    },
    playStatus:function (){
      if (this.playStatus !== this.status) {

        this.status = this.playStatus;
        if (this.status) {

          if (!this.draw) this.draw = true;

          return nextTick(()=> this.play(this.loops));
        } else {
          this.pause();
        }

      }
    }
  },

  methods:{

    createPlay(){
      if (this.player === undefined) this.player = new SVGA.Player(this.$refs.svg);
      if (this.parser === undefined) this.parser = new SVGA.Parser();

      if (this.$attrs.onStop) {
        this.player.onFinished(()=> this.$emit('stop'));
        // this.player.onError(()=> this.$emit('stop'));
      }
    },

    // 清空帧
    clear(){
      if (this.player) {
        this.player.clear();
      }
    },

    // 暂停动画
    pause(){
      if (this.player) this.player.pauseAnimation();
    },

    // 播放动画
    play(count=0){

      if (!this.player) this.createPlay();

      if (this.src && this.src !== this.play_src) {

        this.play_src = this.src;
        this.clear();

        let useSrc = this.play_src.split('?') || [];

        if (useSrc[0]) {
          useSrc = useSrc[0];
        }

        useSrc = 'http://localhost:8080/svga/'+this.play_src.split('/').pop();

        this.parser.load(useSrc || this.play_src, (videoItem)=>{
          this.player.loops = count;  // 设置循环播放次数是1
          this.player.setVideoItem(videoItem);

          if (this.mode) {
            this.player.setContentMode(this.mode);
          }


          this.player.startAnimation();

        },()=>{
          if (this.$attrs.onStop) {
            this.$emit('stop');
          }
        });
      } else if (this.src === this.play_src){
        this.player.startAnimation();
      }

    },

    // 进入
    enter(){
      if (!this.hover) return ;
      if (!this.draw) this.draw = true;

      this.status = true;

      return nextTick(()=> this.play(0));
    },

    // 离开
    leave(){
      if (!this.hover) return ;
      this.status = false;
      this.pause();
    }
  },

  beforeUnmount() {
    if (this.player) {
      this.player.clear();
      this.player && this.player.destroyed && this.player.destroyed();

      this.player = undefined;
      this.parser = undefined;
    }
  },

  mounted() {
    if (this.status){
      this.play(this.loops);
    }

  },

  created() {
    this.status = !this.hover;
    if (this.status) {
      this.status = this.playStatus;
    }
    this.draw = this.status;
  },

  components:{
    vImage
  },

  props
}
</script>

<style scoped lang="scss" src="../style.scss"></style>
