<template>
    <div class="device-tree">
        <energyTree :eventLevel="4" @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree"
                    :highlightCurrent="highlightCurrent"
                    :showCheckbox="showCheckbox" @check-change="checkChange"
                    :default-checked-keys="defaultCheckedKeys"></energyTree>
    </div>
</template>

<script>
import energyTree from '../../components/tree/energyTree'
import {lineTree} from '@/api/app/device.js'
import * as echarts from 'echarts'
import {queryStatisticalSelect, queryCommonStatisticalByTime} from '@/api/app/steady'

export default {
    components: {
        energyTree,
    },
    data() {
        return {
            dataTree: [],
        }
    },
    props: {
        showCheckbox: {
            type: Boolean,
            default: false
        },
        highlightCurrent: {
            type: Boolean,
            default: true
        },
        defaultCheckedKeys: {
            type: Array,
            default: () => []
        },
    },
    created() {
        this.lineTree()
    },
    methods: {
        checkChange(data, checked, indeterminate) {
            this.$emit('check-change', data, checked, indeterminate)
        },
        lineTree() {
            lineTree().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'
                                }
                                item3.children.forEach((item4) => {
                                    item4.icon = 'el-icon-location'
                                    arr.push(item4)
                                })
                            })
                        })
                    })
                    console.log(this.dataTree)
                    this.$emit('selectPoint', arr[0])
                    //默认点击
                    this.$nextTick().then(() => {
                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
                    })
                }
            })
        },
        getTreeText(data, level) {
            console.log(data, level)
            this.$emit('selectPoint', data)
        },
    },
}
</script>

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