<template>
  <Row class="dashboard" v-cloak>
  	<Row class="dashboard-header" type="flex" align="middle">
  		<Col span="8">
  			<h3>低代码开发平台</h3>
  		</Col>
  		<Col span="6">
  			<Row type="flex" justify="end">
  				<Col span="7">
  					<Icon type="ionic"></Icon>
  					<span>保存</span>
  				</Col>
  				<Col span="7" @click.native="preview">
  					<Icon type="monitor"></Icon>
  					<span>预览</span>
  				</Col>
  			</Row>
  		</Col>
  	</Row>
    <Row class="dashboard-container">
      <Col class="dashboard-container-left" span="6">
      	<Menu class="Dc-left-menu" active-name="1" @on-select="selectMaterial">
      		<MenuItem name="1">
                <Icon type="ios-paper"></Icon>
            </MenuItem>
            <MenuItem name="2">
                <Icon type="ios-people"></Icon>
            </MenuItem>
            <MenuItem name="3">
                <Icon type="stats-bars"></Icon>
            </MenuItem>
      	</Menu>
  		<div class="Dc-left-content">
  			<div v-show="activeName === '1'">
  				<h4>基础库</h4>
          <dynamic-conponent @dragstart="dragstart" @dragend="dragend"></dynamic-conponent>
  			</div>
  			<div v-show="activeName === '2'">
  				<h4>业务库</h4>
	  		</div>
  			<div v-show="activeName === '3'">
  				<h4>模板</h4>
  			</div>
  		</div>
	  </Col>
	  <Col class="dashboard-container-middle" span="18">
	  	<Row class="Dc-middle-row">
	  		<Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)">
	  			<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">
	  				<grid-layout
              :layout.sync="layout"
              :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 @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">
                  <component class="Dcmc-panel-com" @handleElementClick="handleElementClick" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="index" @resize="resize" v-bind="item.props"></component>
              </grid-item>
            </grid-layout>
	  			</div>
	  		</Col>
	  		<Col span="8" :class="[{'Dcm-sider_none': isCollapsed}, 'Dc-middle-sider']">
	  			<Tabs class="Dc-middle-editing">
	          <TabPane label="属性">
              <dynamic-form :curElement="curElement" @modProps="modProps"></dynamic-form>
            </TabPane>
	          <TabPane label="事件">事件</TabPane>
	          <TabPane label="页面设置">页面设置</TabPane>
	        </Tabs>
	  		</Col>
	  	</Row>
	  </Col>
	</Row>
  </Row>
</template>
<style lang="less">
  .tabs-position() {
  	/deep/ .ivu-tabs-nav-scroll {
  	  display: flex;
  	  justify-content: center;
  	} 
  }
  [v-cloak] {
    display: none;
  }
  .dashboard {
    min-width: 1280px;
  	height: 100% !important;
  	&-header {
  	  position: relative;
  	  padding: 0 16px;
  	  height: 48px !important;
  	  background: #fff;
  	  box-shadow: 0 2px 3px 0 hsla(0,0%,39.2%,.06);
  	  font-size: 16px;
  	  z-index: 901;
  	}
  	&-container {
  		height: calc(100% - 48px) !important;
  		&-left {
  		  display: flex !important;
  		  height: 100%;
  		  .Dc-left-menu {
  		  	height: 100%;
  		  	width: 65px !important;
  		  	i {
  		  	  font-size: 18px !important;
  		  	}
  		  }
  		  .Dc-left-content {
  		  	flex: 1;
          padding: 10px;
  		  }
  		  .tabs-position();
  		}
  		&-middle {
  			height: 100%;
  			background: #f0f2f5;
  			.Dc-middle-row {
  				height: 100%;
  				.Dc-middle-container {
            overflow: scroll;
	  				height: 100%;
            opacity: 1;
	  				transition: width ease-in-out 0.5s;
	  				.Dcm-container-panel {
              margin: 30px auto;
		  				width: 375px;
              height: 667px;
					    min-height: 667px;
              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);
                .vue-grid-item {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: #fff;
                }
              }
              .Dcmc-panel-com {
                // height: 38px;
              }
              // &_in {
              //   opacity: 0.7;
              // } 
              &_draging {
                .Dcmc-panel-com {
                  * {
                    pointer-events: none;
                  }
                }
                opacity: 0.7;
              }
		  			}
	  			}
	  			.Dc-middle-sider {
	  				height: 100%;
	  				background: #fff;
	  				transition: width ease-in-out 0.5s;
	  				.Dc-middle-editing {
	  					height: 100%;
              min-width: 320px;
	  					.tabs-position();
	  				}
	  			}
	  			.Dcm-sider_none {
	  				width: 0;
	  			}
  			}
  		}
  	}
  }
</style>
<script lang="ts" src="./index.ts"></script>
