<template>
    <div class="device-tree">

        <energyTree @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree" :showCheckbox="showCheckbox"
                    @check-change="checkChange" :default-checked-keys="defaultCheckedKeys"></energyTree>
    </div>
</template>

<script>
import energyTree from '../../components/tree/energyTree'
import {getDeviceTree} from '@/api/app/device.js'

export default {
    components: {
        energyTree,
    },
    props: {
        showCheckbox: {
            type: Boolean,
            default: false
        },
        defaultCheckedKeys: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
            dataTree: [],

        }
    },
    created() {
        this.getDeviceTree()
    },
    mounted() {

    },
    methods: {
        checkChange(data, checked, indeterminate) {
            this.$emit('check-change', data, checked, indeterminate)
        },
        getDeviceTree() {
            getDeviceTree().then((res) => {
                console.log(res)
                if (res.code === 'A0000') {
                    this.dataTree = res.data
                    let arr = []
                    this.dataTree.forEach((item) => {
                        item.icon = 'el-icon-s-home'
                        item.color = 'royalblue'
                        item.children.forEach((item2) => {
                            item2.icon = 'el-icon-s-order'
                            item2.color = 'royalblue'
                            item2.children.forEach((item3) => {
                                item3.icon = 'el-icon-s-platform'
                                item3.color = 'royalblue'
                                if(item3.comFlag === 1){
                                    item3.color = '#e26257 !important'
                                }
                                arr.push(item3)
                            })
                        })
                    })
                    this.$emit('selectDevice', arr[0])
                    //默认点击
                    this.$nextTick().then(() => {
                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
                    })
                }
            })
        },
        getTreeText(data, level) {
            console.log(data, level)
            this.$emit('selectDevice', data)
        },
    },
}
</script>

<style lang="scss">
.device-tree{
    font-size: 14px;
    width: 270px;
    margin-right: 10px;
    flex-shrink: 0;
    .menu-tree > .el-row {
        height: 36px !important;
        padding-top: 2px;
    }
}
</style>
