<template>
  <section class="AiSprite" :ref="ref"/>
</template>

<script>
export default {
  name: "AiSprite",
  props: {
    width: {default: 400},
    height: {default: 300},
    is3D: Boolean
  },
  data() {
    return {
      ref: ""
    }
  },
  methods: {
    init(count = 0) {
      const container = this.$refs[this.ref]
      if (container) {
        let {width, height} = this.$props
        const scene = new spritejs.Scene({container, width, height, ...this.$attrs}),
            layer = scene.layer()
        /**
         * layer 图层
         * lib spritejs的依赖库
         */
        this.$emit("init", {layer, lib: spritejs})
      } else if (count == 20) {
        console.log(this.$refs)
      } else setTimeout(() => this.init(++count), 500)
    }
  },
  created() {
    this.ref = "AiSprite_" + new Date().getTime()
  },
  mounted() {
    this.$injectLib("https://unpkg.com/spritejs/dist/spritejs.min.js", () => {
      if (this.is3D) {
        this.$injectLib("http://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js", () => {
          this.init()
        })
      } else this.init()
    })
  }
}
</script>

<style lang="scss" scoped>
.AiSprite {
}
</style>
