<template>
    <div class="point-tree">
        <div style="flex: 1; overflow: hidden">
            <Tree ref="treeRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, useAttrs } from 'vue'
import Tree from '../index.vue'
import { getTransformerTree } from '@/api/device-boot/transformerStrategy'

defineOptions({
    name: 'pms/deviceTree'
})
const emit = defineEmits(['init'])
const attrs = useAttrs()

const tree = ref()
const treeRef = ref()

const loadData = () => {
    getTransformerTree().then(res => {
        tree.value = res.data
    })
}
loadData()

defineExpose({
    loadData
})
</script>
<style lang="scss">
.point-tree {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--el-border-color);
}
</style>
