<template>
  <div class="Dcm-container-panel_container">
    <title-preview @click.native.stop="handlePageSetClick" />
    <div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover"
      @dragleave="dragleave" @drop="drops" id="DcmContainerPanel">
      <grid-layout
          :layout.sync="layout"
          :col-num="gridLayout.colNum"
          :row-height="gridLayout.rowHeight"
          :margin="[0, 0]"
          :is-draggable="gridLayout.draggable"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :use-css-transforms="true"
          :style="transformStyle(pageData.commonStyle)"
          @click.native.stop="toggle(false)"
          @layout-updated="layoutUpdatedEvent"
            >
              <grid-item @click.native.stop="handleElementClick(index, null)" v-for="(item, index) in pageData.elements"
              :x="item.point.x"
              :y="item.point.y"
              :w="item.point.w"
              :h="item.point.h"
              :i="item.point.i"
              :key="item.point.i + index"
              @contextmenu.native.prevent="show($event, index)"
              @resized="resizedEvent"
              @moved="movedEvent"
              :style="transformStyle(item.commonStyle, item.name)"
              :class="{'Dcmcp-item_selected': curEleIndex === index && curChildIndex === null, 'Dcmcp-item_is-freecontainer': item.name === 'freedom-container'}">
                  <component ref="container" :id="item.id" class="Dcmcp-item-com" @handleElementClick="handleElementClick" :containerIndex="index" :childItem="item" :is="item.name" :key="item.point.i + index" v-bind="item.props"></component>
              </grid-item>
              <grid-item
                v-if="pageData.props.showPageBottomTip"
                :x="bottomInfo.x"
                :y="bottomInfo.y"
                :w="bottomInfo.w"
                :h="bottomInfo.h"
                :i="bottomInfo.i"
                :static="true"
                :key="bottomInfo.i + pageData.elements.length"
                @click.native.stop="handlePageSetClick"
              >
                <page-bottom-tip @click.native.stop="handlePageSetClick" />
              </grid-item>
      </grid-layout>
    </div>
    <back-top-preview @click.native.stop="handlePageSetClick" />
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
  .border() {
    &::before {
      position: absolute;
      content: '';
      border: 3px solid #2d8cf0 !important;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 102;
    }
  }

  .Dcm-container-panel {
    &_container {
      position: relative;
      width: 375px;
      height: 667px;
      margin: 30px auto;
      box-shadow: 2px 3px 12px rgba(0, 0, 0, 0.116);
      border-radius: 6px;
      overflow: hidden;
    }

    width: 375px;
    height: 619px;
    min-height: 619px;
    overflow-y: scroll;
    background-color: rgb(244, 244, 244);

    /deep/ .vue-grid-layout {
      min-height: 619px;

      .vue-grid-item {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;

        &::after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 100%;
          z-index: 100;
        }

        &:hover {
          .border();
        }

        .vue-resizable-handle {
          z-index: 10000;
        }
      }

      .Dcmcp-item_selected {
        .border();
      }

      .Dcmcp-item_is-freecontainer::before {
        z-index: 1 !important;
      }
    }

    &_draging {
      .Dcmcp-item-com {
        * {
          pointer-events: none;
        }
      }

      opacity: 0.7;
    }
  }
</style>