<template>
    <div :style="`${cstyle};background:${background};`">
      <template v-if="type=='cloud'">
        <div class="clouds_one"></div>
        <div class="clouds_two"></div>
        <div class="clouds_three"></div>
      </template>
      <template v-else-if="type=='nephelo'">
        <div class="fog__img--first"></div>
        <div class="fog__img--second"></div>
      </template>
      <template v-else>
        <canvas v-if="flag" id="hxCanvas" ref="canvas" :width="width" :height="height"  ></canvas>
      </template>
    </div>
</template>

<script>
  import Snow from './Snow.js'
  import Bubble from './Bubble.js'
  import Flower from './Flower.js'
  import Rain from './Rain.js'
  import Bubble2 from './Bubble2.js'
  import Particles from  './Particles.js'
  import Circle from './Circle.js'
  import FlowField from './FlowField.js'
  var types={
    Snow:Snow,
    Bubble:Bubble,
    Flower:Flower,
    Rain:Rain,
    Bubble2: Bubble2,
    Particles: Particles,
    Circle: Circle,
    FlowField: FlowField,
  }
    export default {
        name: "elabCanvas",
      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,
        }
      },
      watch:{
        type(v){
          this.init(v)
        }
      },
      mounted(){
        this.init(this.type)
      },
      methods:{
        init(v){
          if(v=='cloud'||v=='nephelo'){
            return false
          }
          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
                }
                new contrustor(this.$refs.canvas ,{height:this.$store.state.editor.editorTheme.canvasHeight}).process();
              }
            })
          })
        }
      }
    }
</script>

<style scoped>
  .clouds_one {
    background: url("https://dm.static.elab-plus.com/tfbIcon/2.png")no-repeat center top /100% 500px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .clouds_two {
    background: url("https://dm.static.elab-plus.com/tfbIcon/1.png")no-repeat center top /100% 500px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_two 75s linear infinite;
    -moz-animation: cloud_two 75s linear infinite;
    -o-animation: cloud_two 75s linear infinite;
    animation: cloud_two 75s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .clouds_three {
    background: url("https://dm.static.elab-plus.com/tfbIcon/2.png")no-repeat center top /100% 500px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_three 100s linear infinite;
    -moz-animation: cloud_three 100s linear infinite;
    -o-animation: cloud_three 100s linear infinite;
    animation: cloud_three 100s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  @-webkit-keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }
  @-moz-keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }

  @-webkit-keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @-moz-keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

  @-webkit-keyframes cloud_two {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @-moz-keyframes cloud_two {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @keyframes cloud_two {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

  @-webkit-keyframes cloud_three {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @-moz-keyframes cloud_three {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  @keyframes cloud_three {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  .fog__img--first {
    height: 100%;
    width: 300%;
    position: absolute;
    background: url("https://dm.static.elab-plus.com/tfbIcon/fog-1.png") repeat;
    background-size: contain;
    background-position: center;
    -webkit-animation: marquee 12s linear infinite;
    animation: marquee 30s linear infinite;
  }
  .fog__img--second {
    height: 100%;
    width: 300%;
    position: absolute;
    background: url("https://dm.static.elab-plus.com/tfbIcon/fog-2.png") repeat;
    background-size: contain;
    background-position: center;
    -webkit-animation: marquee 8s linear infinite;
    animation: marquee 20s linear infinite;
  }

  @-webkit-keyframes marquee {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0);
    }
  }

  @keyframes marquee {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-60%, 0, 0);
      transform: translate3d(-60%, 0, 0);
    }
  }
</style>
