<!-- 菜单预览：废弃组件备份，请移步 menu-list.vue -->
<template>
    <el-scrollbar class="vue-box">
        <!-- 表格 -->
        <div style="padding: 1em 1.5em;">
            <div class="c-title">菜单预览</div>
            <!-- 树插件 -->
            <el-tree
                v-if="dataList.length > 0"
                ref="tree"
                :data="dataList"
                node-key="id"
                :default-expand-all="true"
            >
                <template #default="s">
                    <span class="custom-tree-node">
                        <span v-if="s.data.show === 'yes'" style="color: green;">{{ s.data.title }} &nbsp; [ 显示 ]</span>
                        <span v-else-if="s.data.show === 'no'" style="color: #999;">{{ s.data.title }} &nbsp; [ 隐藏 ]</span>
                        <span v-else style="color: #2D8CF0;">{{ s.data.title }} &nbsp; [ 鉴权 ]</span>
                        <span style="color: #999;" v-if="s.data.info">&emsp;———— {{ s.data.info }} </span>
                    </span>
                </template>
            </el-tree>
            <br><br><br>
        </div>
    </el-scrollbar>
</template>

<script setup name="menu-list-backup">
import {menuList} from "../../router/menu-list";
import {menuIsShow} from "../../router/router-util";
import {ref} from "vue";

const dataList = ref([]);

// 全部
sa.ajax2('/SysMenu/getList', function(){
    // const menuList = sa.copyArray(asyncRoutes)
    // menuList.value.pop();
    dataList.value = menuList;	// 数据
    // console.log(menuList)
});

</script>

<style scoped lang="scss">
.vue-box{
    :deep(.el-tree) {background-color: #f5f7f8;}
    :deep(.el-tree-node) {margin: 0.15em 0 !important;}
    /* 悬浮时颜色更深一点 */
    :deep(.el-tree-node__content:hover) {background-color: #CFE8FC !important;}
}
</style>
