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

<script>
import energyTree from '../../components/tree/energyTree'
import { getMarketList } from '@/api/app/user'

export default {
    components: {
        energyTree
    },
    props: {
        showCheckbox: {
            type: Boolean,
            default: false
        },
        defaultCheckedKeys: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            dataTree: []
        }
    },
    created() {
        this.getDeviceTree()
    },
    methods: {
        checkChange(data, checked, indeterminate) {
            this.$emit('check-change', data, checked, indeterminate)
        },
        getDeviceTree() {
            getMarketList().then(res => {
                console.log(res)
                if (res.code === 'A0000') {
                    this.dataTree = res.data.map(item => {
                        return {
                            ...item,
                            icon: 'el-icon-user',
                            color: 'royalblue'
                        }
                    })
                    this.$emit('selectUser', this.dataTree[0])
                    //默认点击
                    this.$nextTick().then(() => {
                        this.$refs.energyTree.$refs.menuTree.setCurrentKey(this.dataTree[0].id) // 默认选中节点第一个
                    })
                }
            })
        },
        getTreeText(data, level) {
            console.log(data, level)
            this.$emit('selectUser', 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>
