<template>
    <div id="MenuTree" class="menu-tree full-width">
        <label v-for="menu in dataArr" :key="menu.id">
            <el-submenu v-if="menu.children && menu.children.length" :index="menu.path">
                <template slot="title">
                    <i v-if="judgeEmpty(menu.icon)" class="menu-icon ml10" :class="[menu.icon, menu.icon.startsWith('el-') ? '' : 'iconfont']" />
                    <span slot="title" class="menu-name flex">
                        <TooltipOver v-if="judgeEmpty(menu.name)" class="label-tooltip-over" :content="`${menu.name}`" :ref-name="`label${menu.name}${menu.path}`" />
                    </span>
                </template>
                <label>
                    <MenuTree :data-arr="menu.children" :collapsed="collapsed" />
                </label>
            </el-submenu>
            <el-menu-item v-else :index="menu.path">
                <i v-if="judgeEmpty(menu.icon)" class="menu-icon ml10" :class="[menu.icon, menu.icon.startsWith('el-') ? '' : 'iconfont']" />
                <span slot="title" :class="menu.icon.length ? '': 'ml10'" class="menu-name flex">
                    <TooltipOver v-if="judgeEmpty(menu.name)" class="label-tooltip-over" :content="`${menu.name}`" :ref-name="`label${menu.name}${menu.path}`" />
                </span>
            </el-menu-item>
        </label>
    </div>
</template>
<script>
import MenuTree from '@/components/layouts/MenuTree';
import { TooltipOver } from '@/components';

export default {
    name: 'MenuTree',
    components: {
        MenuTree,
        TooltipOver
    },

    props: {
        dataArr: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            menuData: []
        };
    },
    computed: {
        collapsed(val) {
            return val;
        }
    }
};
</script>
