<template>
  <div class="info-layer" style="overflow: hidden">
      <box1 v-if="initFlag"  v-for="(item,index) of box1" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box1>
      <box2 v-if="initFlag"  v-for="(item,index) of box2" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box2>
      <box3 v-if="initFlag"  v-for="(item,index) of box3" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box3>
  </div>
</template>

<script>
import Box1 from "./infobox/box1";
import Box2 from "./infobox/box2";
import Box3 from "./infobox/box3";
export default {
  name: "InfoLayer",
  components: {Box3, Box1,Box2},
  inject: ['screen'],
  props: {
    box1: {
      type: 'Array',
      default: []
    },
    box2: {
      type: 'Array',
      default: []
    },
    box3: {
      type: 'Array',
      default: []
    },
  },
  data(){
    return{
      initFlag: false,
    }
  },

  methods: {
    onload(){
      this.initFlag = true;
    },

  },
}
</script>

<style scoped>
.info-layer{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
</style>
