<template>
  <div class="total-wrap flex-column" :style="{'pointer-events' :isPreview?'none':'auto'}">
<!--     <div class="wrap-full-top top-70 flex-center" 
      :style="{zIndex:pageItem.layers&&!isLayerShow()?'3':'',
      justifyContent:'space-between'}"> -->
        <div class="half half-left flex-center" :style="pageItem.layers&&!isLayerShow()?TypeName(1)==='ChartEl'?'z-index:5':'z-index:3':''">
          <component
            :data-position="1"
            :is="TypeName(1)"
            :ref="RefName(1)"
            :index="pageIndex"
            :position="1"
            :item="Item(1)"
            @dragstart.native="onDragStart"
            @dragover.native="onDragOver"
            @drop.native="onDrop"
            @getText="getText($event,1)"
          ></component>
        </div>
        <div class="half half-right flex-center" :style="pageItem.layers&&!isLayerShow()?TypeName(2)==='ChartEl'?'z-index:5':'z-index:3':''">
          <component
            :data-position="2"
            :is="TypeName(2)"
            :ref="RefName(2)"
            :index="pageIndex"
            :position="2"
            :item="Item(2)"
            @dragstart.native="onDragStart"
            @dragover.native="onDragOver"
            @drop.native="onDrop"
            @getText="getText($event,2)"
          ></component>
        </div>
    <!-- </div> -->
    <div class="wrap-full-bottom bottom-30 flex-center" :style="pageItem.layers&&!isLayerShow()?TypeName(3)==='ChartEl'?'z-index:5':'z-index:3':''">
      <component
        :data-position="3"
        :is="TypeName(3)"
        :ref="RefName(3)"
        :index="pageIndex"
        :position="3"
        :item="Item(3)"
        @dragstart.native="onDragStart"
        @dragover.native="onDragOver"
        @drop.native="onDrop"
        @getText="getText($event,3)"
      ></component> 
    </div>
    <!-- 图层编辑模式 -->
    <div class="layers" :id="`layers_${pageItem.id}`"
        v-if="isLayerShow()" @click.stop="clickLayer" @contextmenu.stop="showLayerContentMenu">
      <template v-for="item in pageItem.layers">
        <component
          :is="getLayerElName(item)"
          :key="item.id"
          :elementInfo="item"
          :isActive="item.id===activeLayerEl.id&&!isClickLayer"
          :isLayerEdit="true"
          @click.stop.native="changeActEl(item)"
          @chooseThis="changeActEl(item)"
          v-on="$listeners"
        ></component>
      </template>
    </div>
    <!-- 非图层编辑模式 -->
    <template v-else>
      <template v-for="item in pageItem.layers">
        <component
          :is="getLayerElName(item)"
          :key="item.id"
          :elementInfo="item"
          :isActive="false"
          :isLayerEdit="false"
        ></component>
      </template>
    </template>
  </div>
</template>

<script>
import mixin from "./mixins";
import {defaultPosition} from "../../utils/config";
export default {
  name: "formatNine",
  mixins: [mixin],
  data(){
    return {
      modelId:9,
      positionInfo:defaultPosition[9]
    }
  },
};
</script>

<style scoped lang="scss">
.total-wrap{
  .half{
    position:absolute;
    width:50%;
    height:70%;
    &-left{
      top:0;
      left:0;
      .closeBtn{
        top: calc(4% - 10px);
        right: 2.5%;
      }
    }
    &-right{
      top:0;
      right:0;
      .closeBtn{
        top: calc(4% - 10px);
        right: 2.5%;
      }
    }
  }
  .wrap-full-bottom{
    position: absolute;
    bottom: 0;
  }
}
</style>
