<template>
  <div class="total-wrap" :style="{'pointer-events' :isPreview?'none':'auto'}">
<!--     <div class="wrap-full-left flex-column" :style="pageItem.layers&&!isLayerShow()?'z-index:4':''"> -->
      <div class="wrap-full-left-half top 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="wrap-full-left-half bottom 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-right flex-center" :style="{'z-index':pageItem.layers&&!isLayerShow()?TypeName(3)==='ChartEl'?'5':'3':'auto'}">
        <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>
        <!-- @deleteLayer="delLayer" -->
      </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: "formatThree",
  mixins: [mixin],
  data(){
    return {
      modelId:3,
      positionInfo:defaultPosition[3]
    }
  },
};
</script>

<style scoped lang="scss">
</style>
