{include file="public/header" /}
<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-breadcrumb">
                    <a href="{$config['admin_route']}Yunzer/menuInfo"><i class="layui-icon layui-icon-menu-fill"></i> 上级菜单</a>
                    <a><cite>本级菜单</cite></a>
                </div>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="add({$smid})">
                    <i class="layui-icon layui-icon-add-1"></i> 添加按钮
                </button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-header"><i class="layui-icon layui-icon-tree"></i> 菜单结构</div>
                    <div class="layui-card-body" id="menuTree">
                        <!-- 树形结构将在这里渲染 -->
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <table class="layui-table" lay-skin="line">
                    <thead>
                        <tr>
                            <th>排序</th>
                            <th>类型</th>
                            <th>按钮名</th>
                            <th>图标</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {volist name="lists" id='vo'}
                            <tr>
                                <td><span class="layui-badge layui-bg-gray">{$vo['sort']}</span></td>
                                <td>
                                    {if($vo['type']==1)}
                                        <span class="layui-badge layui-bg-blue">功能模块</span> {$vo['src']}
                                    {elseif($vo['type']==2)/}
                                        <span class="layui-badge layui-bg-green">超链接</span> {$vo['src']}
                                    {/if}
                                </td>
                                <td><b>{$vo['label']}</b></td>
                                <td><i class="layui-icon {$vo['icon_class']}"></i> {$vo['icon_class']}</td>
                                <td>
                                    {if($vo['status']==1)}
                                        <span class="layui-badge layui-bg-green">开启</span>
                                    {else/}
                                        <span class="layui-badge layui-bg-red">禁用</span>
                                    {/if}
                                </td>
                                <td>
                                    <div class="layui-btn-group">
                                        <button type="button" class="layui-btn layui-btn-xs" onclick="edit({$vo.smid})">
                                            <i class="layui-icon layui-icon-edit"></i> 编辑
                                        </button>
                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="del({$vo.smid})">
                                            <i class="layui-icon layui-icon-delete"></i> 删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {/volist}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    layui.use(['layer', 'tree'], function(){
        layer = layui.layer;
        $ = layui.jquery;
        var tree = layui.tree;
        
        // 构建树形结构数据
        var treeData = [{
            title: '当前菜单',
            id: {$smid},
            spread: true,
            children: []
        }];
        
        // 将按钮数据添加到树中
        {volist name="lists" id='vo'}
            treeData[0].children.push({
                title: '{$vo.label}',
                id: {$vo.smid},
                icon: 'layui-icon {$vo.icon_class}'
            });
        {/volist}
        
        // 渲染树形结构
        tree.render({
            elem: '#menuTree',
            data: treeData,
            showLine: true,
            click: function(obj){
                var data = obj.data;
                if(data.id != {$smid}) {
                    edit(data.id);
                }
            }
        });
    });
    
    // 添加
    function add(smid){
        layer.open({
            type: 2,
            title: '添加按钮',
            shade: 0.3,
            area: ['550px','550px'],
            content: '{$config["admin_route"]}yunzer/buttonadd?smid='+smid
        });
    }
    
    // 编辑
    function edit(smid){
        layer.open({
            type: 2,
            title: '编辑按钮',
            shade: 0.3,
            area: ['550px','550px'],
            content: '{$config["admin_route"]}yunzer/buttonedit?smid='+smid
        });
    }
    
    // 删除
    function del(smid){
        layer.confirm('确定要删除吗？', {
            icon: 3,
            btn: ['确定','取消']
        }, function(){
            $.post('{$config["admin_route"]}yunzer/buttondel',{'smid':smid},function(res){
                if(res.code>0){
                    layer.alert(res.msg,{icon:2});
                }else{
                    layer.msg(res.msg,{icon:1});
                    setTimeout(function(){window.location.reload();},1000);
                }
            },'json');
        });
    }
</script>
{include file="public/tail" /}