<template>
  <div class="page">
    <invalid-map-drawer v-model="menu.invalidMapVisible"></invalid-map-drawer>
    <div class="wrap">
      <Split class="splitWrap">
        <SplitArea :minSize="0" :size="25">
          <div class="pd20">
            <ui-tree
              defaultExpandAll
              draggable
              showLine
              class="draggable-tree"
              @drop="onDrop"
              @action="onMenu"
              :treeData="gData"
            />
          </div>
        </SplitArea>
        <SplitArea :minSize="0" :size="75" class="rel">
          <Split class="splitWrap">
            <SplitArea :minSize="0" :size="33">
              <a-card title="Level 1" :bordered="false" style="width: 100%">
                <ui-tree
                  draggable
                  showLine
                  showIcon
                  class="draggable-tree"
                  defaultExpandAll
                  :treeData="gData2"
                  @action="onMenu"
                >
                  <i slot="group" class="icon iconfont icon-csz" />
                  <i slot="sz" class="icon iconfont icon-sz" />
                  <i slot="yfcs" class="icon iconfont icon-yfcs" />
                  <i slot="tccs" class="icon iconfont icon-tccs" />
                </ui-tree>
              </a-card>
            </SplitArea>
            <SplitArea :minSize="0" :size="33">
              <a-card title="Level 2" :bordered="false" :bodyStyle="{width: '100%',height: '100%'}">
                <ui-tree showLine class="draggable-tree" defaultExpandAll :treeData="l0Data" />
              </a-card>
            </SplitArea>
            <SplitArea :minSize="0" :size="34">
              <a-card title="Level 3" :bordered="false" style="width: 100%">
                <ui-tree showLine class="draggable-tree" defaultExpandAll :treeData="l2Data" />
              </a-card>
            </SplitArea>
          </Split>
        </SplitArea>
      </Split>
    </div>
  </div>
</template>
<script>
import uiTree from "@/components/uiTree";
import { data1, data2, data3, data4 } from "@/mock/function";
import menuAction from "@/utils/treeMenu";
import invalidMapDrawer from "./components/invalidMap";
export default {
  components: {
    uiTree,
    invalidMapDrawer
  },
  data() {
    return {
      menu: {
        invalidMapVisible: false
      },
      l0Data: data3,
      l2Data: data4
    };
  },
  computed: {
    gData() {
      return menuAction(data1);
    },
    gData2() {
      return menuAction(data2);
    }
  },
  methods: {
    onMenu(action, menu) {
      console.log("选中菜单", action, menu);
      switch (action.key) {
        case "fai_05":
          this.menu.invalidMapVisible = true;
          break;

        default:
          break;
      }
    },
    onDrop(v) {
      console.log(v);
    }
  }
};
</script>
<style lang="less" scoped>
.rel {
  position: relative;
}

.wrap {
  background: #ffffff;
  height: calc(~"100vh - 104px");
  border: 1px solid #e8e8e8;
  border-radius: 2px;
}
.splitWrap {
  height: 100%;
}
.split-pane {
  height: 100%;
  padding: 20px;
  overflow: auto;
}
</style>