{extend name="public/base" /}

{block name="body"}
<div class="layui-side-scroll" style="border-right:1px solid #ccc;position:fixed;">
    <ul id="menu-tree"></ul>
</div>
<div style="margin-left:230px;">
    <blockquote class="layui-elem-quote">
        <button type="button" class="layui-btn layui-btn-small" data-href="{:url('menu/add', ['pid' => input('pid')])}" id="add"><i class="layui-icon">&#xe654;</i> 新增菜单</button>
        {notempty name="Think.get.pid|default=0" value="0"}
        <a class="layui-btn layui-btn-primary layui-btn-small" href="{:url('menu/index')}?pid={$info['pid']}"><i class="layui-icon">&#xe603;</i> 返回</a>
        {/notempty}
        <button type="button" class="layui-btn layui-btn-small" data-href="{:url('menu/edit')}" id="edit"><i class="layui-icon">&#xe642;</i> 编辑菜单</button>
        <button type="button" class="layui-btn layui-btn-small layui-btn-danger" data-href="{:url('menu/del')}" id="del"><i class="layui-icon">&#xe640;</i> 删除菜单</button>
    </blockquote>

    {notempty name="Think.get.pid|default=0" value="0"}
    <fieldset class="layui-elem-field">
        <legend>上级菜单</legend>
        <div class="layui-field-box">
            {$info.title} : {$info.url|url}
        </div>
    </fieldset>
    {/notempty}

    <div class="layui-form">
        <table class="layui-table">
            <thead>
                <tr>
                    <th width="20"><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th>
                    <th>图标</th>
                    <th>菜单名称</th>
                    <th>排序</th>
                    <th>状态</th>
                    <th>AUTH</th>
                    <th>隐藏</th>
                    <th>url</th>
                </tr>
            </thead>
            <tbody>
                {volist name="list" id="vo"}
                <tr>
                    <td><input type="checkbox" data-id="{$vo.id}" lay-filter="id" lay-skin="primary"></td>
                    <td><i class="fa {$vo.icon}"></i></td>
                    <td><a href="{:url('menu/index')}?pid={$vo.id}">{$vo.title}</a></td>
                    <td>{$vo.sort}</td>
                    <td><input type="checkbox" data-id="{$vo.id}" lay-skin="switch" lay-filter="status" {eq name="vo.status" value="1"}checked{/eq} lay-text="正常|禁用"></td>
                    <td><input type="checkbox" data-id="{$vo.id}" lay-skin="switch" lay-filter="auth" {eq name="vo.auth" value="1"}checked{/eq} lay-text="正常|禁用"></td>
                    <td><input type="checkbox" data-id="{$vo.id}" lay-skin="switch" lay-filter="hide" {eq name="vo.hide" value="1"}checked{/eq} lay-text="是|否"></td>
                    <td>{$vo.url_text}</td>
                </tr>
                {/volist}
            </tbody>
        </table>
        {$list->render();}
    </div>
</div>
{/block}

{block name="layui"}
<script>
    layui.use(['tree', 'form'], function(){
        var form = layui.form(), $ = layui.jquery;

        layui.tree({
            elem: '#menu-tree'
            ,nodes: {$menu}
        });

        $('#add').on('click', function(e) {
            layer.open({
                type: 2,
                area: ['500px', '540px'],
                content: $(this).data('href')
            });
        });
        $('#edit').on('click', function(e) {
            var nodes = getSelected();
            if (nodes.length != 1) {
                layer.msg('请选择一条要编辑的数据');
            } else {
                layer.open({
                    type: 2,
                    title: $(this).html(),
                    area: ['500px', '540px'],
                    content: $(this).data('href') + '?id=' + nodes[0]
                });
            }
        });

        $('#del').on('click', function(e) {
            var nodes = getSelected();
            var $this = $(this);
            if (nodes.length < 1) {
                layer.msg('请选择一条要删除的数据');
            } else {
                layer.confirm('你确定要删除么？', {icon: 3, title:'提示'}, function(index) {
                    $.get($this.data('href'), {id: nodes.join(',')}, function(res) {
                        layer.close(index);
                        layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000}, function() {
                            if (res.code == 1) {
                                location.reload();
                            }
                        });
                    });
                });
            }
        });

        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input[lay-filter="id"]');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
        form.on('switch(status)', function(data) {
            $.get("{:url('menu/status')}", {id: $(data.elem).data('id'), status: data.elem.checked, type: 'status'}, function(res) {
                layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000});
            });
        });
        form.on('switch(auth)', function(data) {
            $.get("{:url('menu/status')}", {id: $(data.elem).data('id'), status: data.elem.checked, type: 'auth'}, function(res) {
                layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000});
            });
        });
        form.on('switch(hide)', function(data) {
            $.get("{:url('menu/status')}", {id: $(data.elem).data('id'), status: data.elem.checked, type: 'hide'}, function(res) {
                layer.msg(res.msg, {icon: Math.abs(res.code - 2), time: 1000});
            });
        });

        function getSelected() {
            var child = $('.layui-form').find('tbody input[lay-filter="id"]:checked');
            var idArr = [];
            child.each(function(index, item) {
                idArr[index] = $(item).data('id');
            });
            return idArr;
        }
    });
</script>
{/block}