<template>



    <a-layout style="height: 100vh; width: 100vw;">
        <a-layout-header>
            <menubardatavue></menubardatavue>
        </a-layout-header>
        <a-layout>
            <a-layout-sider :resize-directions="['right']" style=" min-width: 200px;max-width: 50vw;">
                <a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
                    <GuiLeftSider class="lefttree" v-on:NodeClicked="ononeFilechoese"></GuiLeftSider>
                    <template #content>
                        <a-doption>Option 1</a-doption>
                        <a-doption>Option 2</a-doption>
                        <a-doption>Option 3</a-doption>
                    </template>
                </a-dropdown>
            </a-layout-sider>
            <a-layout-content class="right">
                <GuiForDataShow ref="GuiForDataShow"></GuiForDataShow>
            
            </a-layout-content>
        </a-layout>
        <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

</template>

<script>
import menubardatavue from './menuvue/menubar.vue';
import GuiForDataShow from './vuecomponents/GuiForDataShow.vue';
import GuiLeftSider from './vuecomponents/GuiLeftSider.vue';
export default {
    name: 'APPDataview',
    components: {
        menubardatavue,
        GuiForDataShow,
        GuiLeftSider
    },
    data() {
        return {
            // 初始化数据
            message: '欢迎使用 Vue!',
            treeData: [
                {
                    title: 'Trunk 0-0',
                    key: '0-0',
                    children: [
                        {
                            title: 'Branch 0-0-0',
                            key: '0-0-0',
                            children: [
                                {
                                    title: 'Leaf',
                                    key: '0-0-0-0',
                                },
                                {
                                    title: 'Leaf',
                                    key: '0-0-0-1',
                                }
                            ]
                        },
                        {
                            title: 'Branch 0-0-1',
                            key: '0-0-1',
                            children: [
                                {
                                    title: 'Leaf',
                                    key: '0-0-1-0',
                                },
                            ]
                        },
                    ],
                },
            ]
        }
    },
    methods: {
        // 方法定义
    }
}
</script>

<style scoped>
/* 样式区域 */
h1 {
    color: #42b983;
}
.right {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  overflow: auto;
  height: 100%;
  width: 100%;
}
</style>