<template>
  <div class="total-wrap" :style="{'pointer-events' :isPreview?'none':'auto'}">
    <div class="full flex-center" 
      :style="{'z-index':pageItem.layers&&!isLayerShow()?'3':'auto'
        }">
      <component
        :data-position="1"
        :is="TypeName(1)"
        :ref="RefName(1)"
        :index="pageIndex"
        :position="1"
        @getText="getText($event,1)"
      ></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: "formatSix",
  mixins: [mixin],
  data(){
    return {
      modelId:6,
      positionInfo:defaultPosition[6]
    }
  },  
};
</script>

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