<template>
  <div class="material">
    <Menu class="Dc-left-menu" active-name="1" @on-select="selectMaterial">
      <MenuItem name="1">
          <Icon type="android-apps"></Icon>
          <span>基础库</span>
      </MenuItem>
      <MenuItem name="2">
          <Icon type="android-apps"></Icon>
          <span>业务库</span>
      </MenuItem>
      <MenuItem name="3">
          <Icon type="android-apps"></Icon>
          <span>模版</span>
      </MenuItem>
    </Menu>
        <div class="Dc-left-content">
          <div v-show="activeName === '1'">
            <dynamic-component type="basic" :data="resources.basicComponents" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
          </div>
          <div v-show="activeName === '2'">
            <dynamic-component type="business" :data="resources.businessComponents" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
          </div>
          <div v-show="activeName === '3'">
            <dynamic-component type="template" :data="templateList" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
          </div>
        </div>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
.tabs-position() {
  /deep/ .ivu-tabs-nav-scroll {
    display: flex;
    justify-content: center;
  } 
}

.material {
  display: flex !important;
  height: 100%;
  .Dc-left-menu {
    height: 100%;
    width: 77px !important;
  .ivu-menu-item {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
        i {
          font-size: 18px !important;
        }
    span {
      font-size: 14px;
      line-height: 22px;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
    }
  }
  }
  .Dc-left-content {
    flex: 1;
    padding: 8px;
    background: #fff;
    overflow-y: scroll;
  }
  .tabs-position();
}
</style>