<template>
	<div class="freedom" :ref="`freedomContainer${containerIndex}`" @click.stop="handleElementClick(containerIndex)">
		<div class="freedom-body" :data-index="containerIndex">
			<div v-for="(item, index) in childItem.child" :style="transformStyle(item.commonStyle, 'container')" :class="['freedom-body-item', { 'Fb-item_selected': curChildIndex === index }]" :key="index" @click.stop="handleElementClick(containerIndex, index)" @mousedown.stop.prevent="mousedown(index, $event)" @contextmenu.prevent.stop="show($event, containerIndex, index)">
				<component ref="childComponent" :style="transformStyle(item.commonStyle, 'component')" :is="item.name"  v-bind="item.props"></component>
				<div class="freedom-body-dot"
	         v-for="(style, key) in dots[index]"
	         :key="key"
	         :style="style"
	         @mousedown.stop.prevent="handleMouseDownOnPoint(key, $event)"/>
				</div>
			</div>
		</div>
	</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: 1
	  }
  }
	.freedom {
		height: 100%;
		width: 100%;
		header {
			width: 100%;
			height: 48px;
			line-height: 48px;
			text-align: center;
			border-bottom: 1px solid #f0f0f0;
		}
		&-body {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			&-item {
				position: absolute;
				z-index: 101;
				font-size: 0;
				&:after {
          position: absolute;
          top: 0;
          left: 0;
          content: '';
          width: 100%;
          height: 100%;
          z-index: 3;
        }

				&:hover {
          .border();
        }
			}
			&-dot {
				width: 8px;
			  height: 8px;
			  background-color: #fff;
			  border: 1px solid #59c7f9;
			  border-radius: 8px;
			  position: absolute;
			  z-index: 1001;
			}
			.Fb-item_selected {
				.border();
			}
		}
		.activity {
			
		}
	}
</style>