<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header"></head>
<body>
<div class="x-body">
    <form method="post" class="layui-form layui-form-pane" onsubmit="return false;" id="formId">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>角色名
            </label>
            <div class="layui-input-inline">
                <input type="text" name="roleName" required="" lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">
                权限设置
            </label>
            <div style="margin-left: 10%">
                <ul id="menuTree" class="ztree"
                    style="width: 250px; height: 98%; overflow: auto; border: none; background: none">
                </ul>
            </div>

        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">
                描述
            </label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" name="roleRemark" class="layui-textarea"></textarea>
            </div>
        </div>
        <input type="text" name="roleId" style="display: none;" value="0">
        <div class="layui-form-item" align="center">
            <button class="layui-btn" lay-submit="" onclick="checkToSave()">保存</button>
            <button class="layui-btn layui-btn-danger" onclick="closeLayer()">
                取消
            </button>
        </div>
    </form>
</div>
<link th:href="@{/js/zTree/css/metroStyle/metroStyle.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/js/zTree/css/zTreeApp.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/js/zTree/css/demo.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="@{/js/zTree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/addOrEdit.js}"></script>
<script>
    var treeNodes = '';
    var setting = {
        view: {
            dblClickExpand: true,
            showLine: true,
            selectedMulti: true
        },
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: {
                "Y": "ps",
                "N": "ps"
            }
        },
        data: {
            simpleData: {
                enable: true

            }
        },
    };

    $(function () {
        getAllMenu();
    })

    function getAllMenu() {
        $.ajax({
            url: "/menu/getAllMenu",
            data: {},
            type: "POST",
            dataType: "json",
            success: function (result) {
                treeNodes = result.allMenu;
                showTree();
                var id = [[${id}]];
                getObjById(id);
            }
        })
    }

    function setOtherObj(obj) {
        console.log(obj);
        var menuList = obj.menuId.split(",");
        for (var i = 0; i < menuList.length; i++) {
            for (var j = 0; j < treeNodes.length; j++) {
                if (treeNodes[j].id == menuList[i]) {
                    var ztree = $.fn.zTree.getZTreeObj("menuTree");
                    ztree.checkNode(ztree.getNodeByParam("id", menuList[i]));
                    break;
                }
            }
        }
    }


    function showTree() {
        $.fn.zTree.init($("#menuTree"), setting, treeNodes);
        var ztree = $.fn.zTree.getZTreeObj("menuTree");
        var nodes = ztree.getNodes();
        ztree.expandNode(nodes[0], true);//展开第二层
    }


    //保存
    function checkToSave() {
        var roleName = $("#formId input[name='roleName']").val().trim();
        if (roleName == '') {
            layer.msg("请角色名不能为空!", {icon: 5});
            return false;
        }
        var ztree = $.fn.zTree.getZTreeObj("menuTree");
        var nodes = ztree.getCheckedNodes(true);
        if (nodes.length == 0) {
            layer.msg("请勾选权限!", {icon: 5});
            return false;
        }
        var menuId = '';
        for (var i = 0; i < nodes.length; i++) {
            if (menuId == '') {
                menuId = nodes[i].id;
            } else {
                menuId += ',' + nodes[i].id;
            }
        }
        setFormData();
        formdata.set("menuId", menuId);
        save(formdata);
    }

</script>
</body>

</html>