<template>
    <div class="treeDiv">
        <dv-border-box-10 backgroundColor="#00174b" :color="['#3cbfdf', '#3cbfdf']">
            <el-select v-model="deviceValue" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-tree ref="myTree" :data="treeData" :props="defaultProps" node-key="id" highlight-current default-expand-all
                :current-node-key="checkedkeys" @node-click="handleNodeClick" />
        </dv-border-box-10>

    </div>
</template>
<script setup>
import bimStore from '@/store/modules/bim';
import { nextTick } from "vue";
const myTree = ref("myTree");
const deviceOptions = [
    {
        value: '0',
        label: '漳州工厂',
    }
]

const defaultProps = {
    children: 'children',
    label: 'label',
}

const data = reactive({
    deviceValue: '0',
    treeData: [
        {
            label: '生产设备',
            id: '0',
            info: {
                name: '生产设备',
                type: '生产设备',
                status: '启用'
            },
            children: [
                {
                    label: '立仓',
                    id: '0-1',
                    url: '/jz/glb/scene.gltf',
                    info: {
                        name: '立仓',
                        type: '生产设备',
                        status: '启用'
                    },

                },
                {
                    label: '糖浆罐',
                    id: '0-2',
                    url: '/seraphine/scene.gltf',
                    info: {
                        name: '糖浆罐',
                        type: '生产设备',
                        status: '启用'
                    },
                },
            ],
        }
    ],
    checkedkeys: ""
});
const { deviceValue, treeData, checkedkeys } = toRefs(data);
const emit = defineEmits(['handleNodeClick'])
onMounted(() => {
    nextTick(() => {
        checkedkeys.value = treeData.value[0].children[0].id;
        handleNodeClick(treeData.value[0].children[0]);
    })
});
const handleNodeClick = (value) => {
    bimStore().setActivateDeviceTree(value);
    emit('handleNodeClick', value)
}


</script>
<style lang='scss' scoped>
.treeDiv {
    position: absolute;
    top: 10px;
    left: 10px;
    // border: 1px solid red;
    width: 240px;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-tree {
        width: 224px;
        margin: 0 10px;
        background: transparent;
        color: #3cbfdf;
    }

    .el-select {
        margin: 10px;
    }

    :deep(.el-input__wrapper) {
        background: transparent;
    }

    :deep(.el-input__inner) {
        color: #3cbfdf;
    }
}
</style>