<template>
  <Row class="dashboard">
  	<Row class="dashboard-header" type="flex" align="middle">
			<Col span="20" offset="2"> 
        <Button @click="preview()">预览</Button>
        <Button type="primary" @click="save()">保存</Button>
			</Col>
      <Col span="2">
        <Button @click="exit">取消</Button>
      </Col>
  	</Row>
    <Row class="dashboard-container">
      <Col class="dashboard-container-left" span="7">
        <material-menu @addEle='addEle' :isDraging.sync="isDraging" />
  	  </Col>
  	  <Col class="dashboard-container-middle" span="17">
  	  	<Row class="Dc-middle-row">
  	  		<Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)">
            <OperationPanel :isDragIn.sync="isDragIn" :isDraging="isDraging" @dragover="dragover" @drops="drops" @handleElementClick="handleElementClick" @show="show" @resizedEvent="resizedEvent" @movedEvent="movedEvent" @toggle="toggle" @handlePageSetClick="handlePageSetClick" />
  	  		</Col>
  	  		<Col span="8" :class="[{'Dcm-sider_none': isCollapsed}, 'Dc-middle-sider']">
            <DynamicFormTabs @modProps="modProps" @resizedChildEvent="resizedChildEvent" />
  	  		</Col>
  	  	</Row>
  	  </Col>
    </Row>
    <BasicPageFormModal ref="basicPageForm" v-model="showSubmitPopup" @submit="save" />
    <RecordModal ref="recordModal" v-model="showRecordModal" @ok="recover" @cancel="cancel" />
    <Spin size="large" fix v-if="inTheSave"></Spin>
  </Row>
</template>
<style lang="less" scoped>
  @font-face {
    font-weight: normal;
    font-family: 'cr-icon';
    font-style: normal;
    font-display: auto;
    src:
      url('https://misc.lkbang.net/fonts/cr-icon.b0d72989.woff2') format('woff2'),
      url('https://misc.lkbang.net/fonts/cr-icon.71b60fa6.woff') format('woff'),
      url('https://misc.lkbang.net/fonts/cr-icon.2dca9b1b.ttf') format('truetype');
  }
  .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: 10;
      .ivu-col {
        text-align: center;
        button {
          width: 100px;
          &:nth-child(2) {
            margin-left: 40px;
          }
        }
      }
  	}
  	&-container {
  		height: calc(100% - 48px);
      &-left {
        height: 100%;
      }
  		&-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-header {
              margin: 20px 0 50px 0;
              .ivu-col {
                font-size: 20px;
                text-align: center;
              }
            }
	  			}
	  			.Dc-middle-sider {
            padding-top: 10px;
	  				height: 100%;
	  				background: #fff;
	  				transition: width ease-in-out 0.5s;
            overflow: hidden;
	  			}
	  			.Dcm-sider_none {
            position: absolute;
            right: 0;
	  				width: 0;
	  			}
  			}
  		}
  	}

    /deep/ .ivu-spin-fix {
      z-index: 10001;
    }
  }
</style>
<script lang="ts" src="./index.ts"></script>
