<template>
    <object
      v-if="svgData != null ? true : false"
      :data="svgData"
      :id="svgId"
      @load="objectLoad"
    ></object>
</template>
<script>
import $ from "jquery";
import jqueryDrawsvg from "./jquery.drawsvg";
import guid from "../../public_js/guid";
export default {
  name: "TslDrawSvg",
  props: {
    svgData: {
      type: String,
      default: null,
    },
    animation: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      svgId: guid(),
      animationData: {
        duration: 1000,
        stagger: 200,
        easing: "swing",
        reverse: false,
      },
    };
  },
  mounted() {},
  methods: {
    objectLoad() {
      let _that = this;

      // jquery 插件安装
      let svgObject = document.getElementById(this.svgId).contentDocument
        .children[0];
      jqueryDrawsvg($);

      // 配置合并
      _that.animationData = {
        ..._that.animationData,
        ..._that.animation,
      };

      // 触发动画
      let mySVG = $(svgObject).drawsvg({
        duration: _that.animationData.duration,
        stagger: _that.animationData.stagger,
        easing: _that.animationData.easing,
        reverse: _that.animationData.reverse,
        callback: function() {
          _that.$emit("draw_svg_end");
        },
      });
      mySVG.drawsvg("animate");
    },
  },
};
</script>
<style scoped>
</style>
