<template>
    <div class="templateViewPanel">
        <!-- <div class="nodeBox">
            <div class="node">1</div>
        </div>
        <div class="nodeBox">
            <div class="node">2-1</div>
            <div class="node">2-2</div>
            <div class="node">2-3</div>
            <div class="node">2-4</div>
        </div>
        <div class="nodeBox">
            <div class="node">3-1</div>
            <div class="node">3-2</div>
            <div class="node">3-3</div>
            <div class="node">3-4</div>
            <div class="node">3-1</div>
            <div class="node">3-2</div>
            <div class="node">3-3</div>
            <div class="node">3-4</div>
        </div> -->
        <!-- <el-tree
            :data="data1"
            :props="defaultProps"
            @node-click="handleNodeClick"
        ></el-tree> -->

        <ul id="demo">
            <tree-item
                class="item"
                :item="treeData"
                @make-folder="makeFolder"
                @add-item="addItem"
            ></tree-item>
        </ul>
    </div>
</template>

<script>
import treeItem from "./components/nodeTree";

export default {
    name: "templateView", // 模板预览
    components: { treeItem },
    data() {
        return {
            data1: [],
            data: [
                {
                    label: "一级 1",
                    children: [
                        {
                            label: "二级 1-1",
                            children: [
                                {
                                    label: "三级 1-1-1",
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 2",
                    children: [
                        {
                            label: "二级 2-1",
                            children: [
                                {
                                    label: "三级 2-1-1",
                                },
                            ],
                        },
                        {
                            label: "二级 2-2",
                            children: [
                                {
                                    label: "三级 2-2-1",
                                },
                            ],
                        },
                    ],
                },
                {
                    label: "一级 3",
                    children: [
                        {
                            label: "二级 3-1",
                            children: [
                                {
                                    label: "三级 3-1-1",
                                },
                            ],
                        },
                        {
                            label: "二级 3-2",
                            children: [
                                {
                                    label: "三级 3-2-1",
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: "children",
                label: "sublistName",
            },
            treeData: {
                name: "My Tree",
                children: [
                    {
                        name: "hello",
                    },
                    {
                        name: "wat",
                    },
                    {
                        name: "child folder",
                        children: [
                            {
                                name: "child folder",
                                children: [
                                    {
                                        name: "hello",
                                    },
                                    {
                                        name: "wat",
                                    },
                                ],
                            },
                            {
                                name: "hello",
                            },
                            {
                                name: "wat",
                            },
                            {
                                name: "child folder",
                                children: [
                                    {
                                        name: "hello",
                                    },
                                    {
                                        name: "wat",
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        };
    },

    computed: {},

    methods: {
        handleNodeClick(data) {
            console.log(data);
        },
        makeFolder: function (item) {
            this.$set(item, "children", []);
            this.addItem(item);
        },
        addItem: function (item) {
            item.children.push({
                name: "new stuff",
            });
        },
    },

    mounted() {
        if (this.$route.query.packageId) {
            this.packageId = this.$route.query.packageId;

            if (this.packageId) {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.queryScenePackageSublistList,
                    data: {
                        packageId: this.packageId,
                    },
                }).then((res) => {
                    if (res.code == 200 && res.info) {
                        this.data1 = res.info;
                    } else {
                        this.$message.error(res.message || "获取信息失败");
                    }
                });
            }
        }
    },
};
</script>

<style lang='less' scoped>
.templateViewPanel1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    height: calc(90vh);

    .nodeBox {
        margin-right: 120px;
    }

    .node {
        padding: 10px;
        margin-bottom: 20px;
        border: 1px solid @gray;
        border-radius: 3px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    body {
        font-family: Menlo, Consolas, monospace;
        color: #444;
    }

    .item {
        cursor: pointer;
    }

    .bold {
        font-weight: bold;
    }

    ul {
        padding-left: 1em;
        line-height: 1.5em;
        list-style-type: dot;
    }
}
</style>