<template>
    <canvas v-if="flag" id="hxBackgroundCanvas" ref="canvas" :style="`${cstyle};background:${background};`" :width="width" :height="height"  ></canvas>
</template>

<script>
  import Smoke from './Smoke.js'
  import Wave from './Wave.js'
  import WaterRipple from  './WaterRipple.js'
  import Bubble2 from './Bubble2.js'
  import Particles from  './Particles.js'
  import Circle from  './Circle.js'
  import FlowField from './FlowField.js'
  import ColorRandom from './ColorRandom.js'
  var types={
    Smoke: Smoke,
    Wave: Wave,
    WaterRipple: WaterRipple,
    Bubble2: Bubble2,
    Particles: Particles,
    Circle: Circle,
    FlowField: FlowField,
    ColorRandom:ColorRandom,
  }
    export default {
        name: "elabBackgroundCanvas",
      data(){
          return{
            flag:true
          }
      },
      props:{
        width:{
          type:Number,
          default:750
        },
        height:{
          type:Number,
          default:1334
        },
        background:{
          type:String,
          default:'#000'
        },
        type:{
          type:String,
        },
        cstyle:{
          type:String,
        },
        picSrc:{

        }
      },
      watch:{
          type(v){
            this.init(v)
          }
      },
      mounted(){

        this.init(this.type)

      },
      methods:{
        init(v){
          this.flag=false;
          this.$nextTick(()=>{
            this.flag=true;
            this.$nextTick(()=>{
              if (typeof v != 'undefined' && this.type != '') {
                var contrustor =types[this.type]
                if(!this.$refs.canvas.width){
                  return
                }
                var backgroundImage = this.picSrc;
                new contrustor(this.$refs.canvas, {height:this.$store.state.editor.editorTheme.canvasHeight}).process(backgroundImage,this.width,this.height);
              }
            })
          })
         }
      }
    }
</script>

<style scoped>

</style>
