<template>
  <div class="activity">
	<grid-layout
	  :layout.sync="layout"
	  :isDraggable="false"
	  :isResizable="false"
	  :col-num="12"
	  :row-height="50"
	  :margin="[0, 10]"
	  :is-draggable="true"
	  :is-resizable="true"
	  :is-mirrored="false"
	  :vertical-compact="true"
	  :use-css-transforms="true"
	>
	  <grid-item :style="createStyle(item.point)" 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">
	      <component class="Dcmc-panel-com" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="index" v-bind="item.props"></component>
	  </grid-item>
	</grid-layout>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less">
	html,
	body,
	#app {
	  height: 100%;
	}
	.activity {
	  width: 100%;
	  height: 100%;
	  min-height: 100%;
	  overflow-y: scroll;
      background-color: rgb(244, 244, 244);
      box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
      /deep/ .vue-grid-layout {
        transform: translateY(-10px);
        transition-property: none;
        .vue-grid-item {
          transition-property: none;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fff;
        }
      }
	}
</style>
