{extend name='pub/modal'}
{block name='content'}
<div class="layui-fluid lotus-form">
    <div class="layui-row">
        <form class="layui-form layui-form-pane"  lay-filter="lotus-form-filter"   id="lotus-edit-form"  method="post">

            <input name="id" type="hidden">

            <div class="layui-form-item">
                <label class="layui-form-label">角色名</label>
                <div class="layui-input-block">
                    <input type="text" id="title"    name="title" lay-verify="required" autocomplete="off" placeholder="请输入角色名" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    状态
                </label>
                <div class="layui-input-block">
                    <select lay-filter="status" name="status" id='status'>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                    权限节点
                </label>
                <div style="border:solid 1px  #e6e6e6 "  class="layui-input-block zTreeDemoBackground left">
                    <ul id="tree" class="ztree"></ul>
                </div>
            </div>
        </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="submit_btn" style="margin-left: 30%" class="layui-btn" lay-submit="" lay-filter="toSubmit">提交</button>
            </div>
        </div>

    </div>
</div>
<link rel="stylesheet" href="/static/lib/ztree/css/metroStyle/metroStyle.css" type="text/css">
<script type="text/javascript" src="/static/lib/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/lib/ztree/js/jquery.ztree.excheck.js"></script>
<script>
        var checked_ids,auth_rule_ids = [];
        var tree = $("#tree");
        var zTree;
        var setting = {
            check: {
                enable: true
            },
            view: {
                dblClickExpand: true,
                showLine: true,
                showIcon: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootpid: ""
                },
                key: {
                    name: "title"
                }
            }
        };
        //加载树形菜单
        $.ajax({
            url: "{:url('admin/user/getJson')}",
            type: "post",
            dataType: "json",
            cache: false,
            data: {
                id: '{$authGroup.id}'
            },
            success: function (data){
                zTree = $.fn.zTree.init(tree, setting, data);
                //遍历节点展开节点(如不需要请屏蔽)
                var treeObj =   $.fn.zTree.getZTreeObj("tree");
                var nodes =     treeObj.getNodes();
                checked_ids =   treeObj.getCheckedNodes();
                $.each(checked_ids, function (index, item) {
                    auth_rule_ids.push(item.id);
                });
                for (var i = 0; i < nodes.length; i++) { //设置节点展开
                    treeObj.expandNode(nodes[i], true, false, true);
                }
            }
        });

    $("#submit_btn").click(function(event){
        var checked_ids,auth_rule_ids = [];
        checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
        $.each(checked_ids, function (index, item) {
            auth_rule_ids.push(item.id);
        });
        console.log(auth_rule_ids);
        var title   =  $('input[name=title]').val();
        var status  =  $('select[name=status]').val();
        $.ajax({
            url: "{:url('admin/user/editRole')}",
            type: 'post',
            dataType: 'json',
            data: {
                id     : '{$authGroup.id}',
                title  : title,
                status : status,
                rules  : auth_rule_ids,
            },
        })
            .done(function(data) {
                if(data.code==0){
                    layer.msg(data.msg,{icon:2,time:1000});
                }else{
                    layer.msg(data.msg,{icon:1,time:500},function(){
                        $("#reset").click();
                        lotus.reload();
                    });
                }
            })
    });

    var lotusFormVal = {
        'id':"{$authGroup.id}",
        'title':"{$authGroup.title}",
        'status':"{$authGroup.status}"
    }
    lotus.editForm(lotusFormVal);



</script>
{/block}