<template>
    <div id="app">
        <div>功能入口</div>
        <vx-tree
            :model="treeModel"
            :iconClassFn="iconClassFn"
            @on-select-node="onSelectNode"
            style="width: 200px"
        ></vx-tree>
        <!-- <div>
            <a href="/capacity.html">能力建设</a>
        </div>
        <div>
            <a href="/web-form.html">表单</a>
        </div>
        <div>
            <a href="/visit_detail.html">拜访明细</a>
        </div>
        <div>
            <a href="/web-grid.html">数据网格</a>
        </div>
        <Button @click="open">打开</Button>
        <empty-data-view/> -->
    </div>
    <!-- <Calendar @dayClick="dayClick" /> -->
</template>
<script>
// import WebForm from '@/views/web-form'
// import Calendar from '@/views/calendar'
import VxTree from '@/vx-component/tree'
import ModalTable from '@/components/modal-table'
import EmptyDataView from '@/views/empty-data-view'
import Vue from 'vue'
export default {
    name: 'app',
    data() {
        return {
            treeModel: {},
            iconClassFn: VxTree.iconOrgClassFn,
        }
    },
    components: {
        // Calendar
        ModalTable,
        EmptyDataView,
        VxTree,
    },
    created() {
        this.treeModel = [
            {
                title: '测试',
                isOpen: true,
                children: [
                    {
                        title: '节点1',
                    },
                    {
                        title: '节点2',
                        children: [
                            {
                                title: 'xxx1',
                                children: [
                                    { title: 'xxx1' },
                                    {
                                        title: 'xxx1',
                                        children: [
                                            { title: 'xxx1' },
                                            {
                                                title: 'xxx1',
                                                children: [
                                                    { title: 'xxx1' },
                                                    {
                                                        title: 'xxx1',
                                                        children: [
                                                            { title: 'xxx1' },
                                                            {
                                                                title: 'xxx1',
                                                                children: [
                                                                    {
                                                                        title:
                                                                            'xxx1',
                                                                    },
                                                                    {
                                                                        title:
                                                                            'xxx1',
                                                                        children: [
                                                                            {
                                                                                title:
                                                                                    'xxx1',
                                                                            },
                                                                            {
                                                                                title:
                                                                                    'xxx1',
                                                                                children: [
                                                                                    {
                                                                                        title:
                                                                                            'xxx1',
                                                                                    },
                                                                                    {
                                                                                        title:
                                                                                            'xxx1',
                                                                                        children: [
                                                                                            {
                                                                                                title:
                                                                                                    'xxx1',
                                                                                            },
                                                                                            {
                                                                                                title:
                                                                                                    'xxx1',
                                                                                                children: [
                                                                                                    {
                                                                                                        title:
                                                                                                            'xxx1',
                                                                                                    },
                                                                                                    {
                                                                                                        title:
                                                                                                            'xxx1',
                                                                                                    },
                                                                                                ],
                                                                                            },
                                                                                        ],
                                                                                    },
                                                                                ],
                                                                            },
                                                                        ],
                                                                    },
                                                                ],
                                                            },
                                                        ],
                                                    },
                                                ],
                                            },
                                        ],
                                    },
                                ],
                            },
                            { title: 'xxx1' },
                        ],
                    },
                    {
                        title: '节点3',
                    },
                    {
                        title: '节点4',
                    },
                    {
                        title: '节点1',
                        children: [{ title: 'xxx1' }, { title: 'xxx1' }],
                    },
                ],
            },
            {
                title: '测试',
                children: [
                    {
                        title: '节点1',
                    },
                    {
                        title: '节点2',
                        children: [{ title: 'xxx1' }, { title: 'xxx1' }],
                    },
                    {
                        title: '节点3',
                    },
                    {
                        title: '节点4',
                    },
                    {
                        title: '节点1',
                        children: [{ title: 'xxx1' }, { title: 'xxx1' }],
                    },
                ],
            },
        ]
    },
    methods: {
        open() {
            const D = Vue.extend(ModalTable)
            const $vm = new D({
                propsData: {
                    title: '弹出网格',
                    guid: '2AA4EB08EDCB460790997FE04330B860',
                    showFilter: false,
                    keyCode: 'item_name',
                },
            })

            $vm.$mount()

            document.body.append($vm.$el)
        },

        onSelectNode(node) {
            console.log(node)
        },
        // dayClick(day) {}
        // add() {
        // WebForm.add({ formGuid: '17A1829F3ACD4B3AB8B80ED9604EF50C' })
        // },
        // edit() {
        // WebForm.edit({ formGuid: '17A1829F3ACD4B3AB8B80ED9604EF50C', bizGuid: 'D8F1CBFF138A41689488CC6D0E581C70', title: '测试' })
        // }
    },
}
</script>
<style>
html,
body {
    width: 100%;
    height: 100%;
}

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
}
</style>