<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>权限维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="../../static/assets/lib/layui/css/layui.css" th:href="@{/assets/library/layui/css/layui.css}" media="all">
    <link rel="stylesheet" href="../../static/assets/lib/font/css/font-awesome.css" th:href="@{/assets/library/font/css/font-awesome.css}" media="all">
    <link rel="stylesheet" href="../../static/assets/lib/jsplus/zTree_v3/css/zTreeStyle/zTreeStyle.css" th:href="@{/assets/library/jsplus/zTree_v3/css/zTreeStyle/zTreeStyle.css}" media="all">
    <link rel="stylesheet" href="../../static/assets/css/admin.css" th:href="@{/assets/css/admin.css}">

</head>
<body class="childrenBody">
<form class="layui-form" style="width:80%;">
    <input type="hidden" id="id" name="id" th:value="${session.permission.id}"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">模块编码</label>
            <div class="layui-input-block">
                <input type="text" id="authCode" name="authCode" th:value="${session.permission.authCode}" class="layui-input"
                       placeholder="请输入模块编码">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">模块名称</label>
            <div class="layui-input-inline">
                <input type="text" id="authName" name="authName" th:value="${session.permission.authName}" class="layui-input authName" lay-verify="required"
                       placeholder="请输入模块名称">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">模块类型</label>
            <div class="layui-input-block">
                <input type="radio" name="authType"  value="0" title="父节点" checked>
                <input type="radio" name="authType"  value="1" title="子节点">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">访问地址</label>
            <div class="layui-input-inline">
                <input type="text" id="linkUrl" name="linkUrl" th:value="${session.permission.linkUrl}" class="layui-input" lay-verify="required"
                       placeholder="请输入url">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">权限名称</label>
            <div class="layui-input-inline">
                <input type="text" id="permissionName" name="permissionName" th:value="${session.permission.permissionName}" class="layui-input" lay-verify="required"
                       placeholder="请输入权限名称">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">权限标识</label>
            <div class="layui-input-inline">
                <input type="text" id="permission" name="permission" th:value="${session.permission.permission}" class="layui-input" lay-verify="required"
                       placeholder="请输入权限标识">
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="magb15 layui-col-md4 layui-col-xs6">
            <label class="layui-form-label">父级权限</label>
            <div class="layui-input-block">
                <input id="parentId" type="hidden" value=""/>
                <ul id="permissionTree" class="ztree"></ul>
            </div>
        </div>
    </div>
    <br/>
    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入描述" id="remark" th:text="${session.permission.remark}" name="remark" class="layui-textarea remark"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="save">立即添加</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
        </div>
    </div>
</form>
<script src="../../static/assets/lib/jquery/jquery.js" th:src="@{/assets/library/jquery/jquery.js}"></script>
<script src="../../static/assets/lib/jsplus/zTree_v3/js/jquery.ztree.all.js" th:src="@{/assets/library/jsplus/zTree_v3/js/jquery.ztree.all.js}"></script>
<script type="text/javascript" src="../../static/assets/lib/layui/layui.js" th:src="@{/assets/library/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/business/upms/permission/save.js" th:src="@{/business/upms/permission/save.js}"></script>
<script th:inline="javascript" type="text/javascript">
    var zTreeList = null;
    $.ajax({
        //请求方式
        type : "POST",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url : "/permission/getTree",
        //数据，json字符串
        //请求成功
        success : function(result) {
            zTreeList = result.zTreeList;

            var setting = {
                view: {
                    dblClickExpand: true,//双击节点时，是否自动展开父节点的标识
                    showLine: true,//是否显示节点之间的连线
                    fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
                    selectedMulti: true //设置是否允许同时选中多个节点
                },
                check: {
                    chkboxType: {"Y":"s", "N":"ps"},
                    chkStyle: "checkbox",//复选框类型
                    enable: true //每个节点上是否显示 CheckBox
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pidKey: "pId",
                        rootPId: "0"
                    }
                } ,callback:{
                    onCheck:function(e,treeId, treeNode){
                        if(treeId == "permissionTree") {
                            var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
                            optParOrSon(treeId, treeNode,zTreeObj);
                        }
                    }
                }
            };
            /**
             * 选父不选子，选子不选父
             * */
            var optParOrSon = function(treeId,treeNode,zTreeObj){
                if(treeNode.checked){
                    // console.log(treeNode.id);
                    $("#parentId").val(treeNode.id);
                    //取消全部后代节点的选中
                    var childNodes = getChildsByTreeNode(treeNode);
                    for(var i in childNodes){
                        zTreeObj.checkNode(childNodes[i], false, false);
                    }
                    //同时全部祖先节点也不能被选中
                    if(treeNode.getParentNode()){
                        var parNodes = getParsByTreeNode(treeNode);
                        for(var i in parNodes){
                            zTreeObj.checkNode(parNodes[i], false, false);
                        }
                    }
                }
            };

            //展开选中节点
            var expandCheckedNode = function(){
                //获取所有选中状态的节点
                var checkedNodes = zTreeObj.getCheckedNodes(true);
                for(var i in checkedNodes){
                    var checkedParAll = getParsAll(checkedNodes[i]);
                    for(var j in checkedParAll){
                        zTreeObj.expandNode(checkedParAll[j],true,false);
                    }
                }
            };

            //获取所有子节点
            var getChildsByTreeNode = function(treeNode,childsArr){
                var childsArr = childsArr || [];
                if (treeNode.isParent) {//是父节点则获取所有子节点
                    var childs = treeNode.children;
                    for(var i in childs){
                        childsArr.push(childs[i]);
                        getChildsByTreeNode(childs[i],childsArr);
                    }
                }
                return childsArr;
            };

            //获取所有父节点
            var getParsByTreeNode = function(treeNode,parsArr){
                var parsArr = parsArr || [];
                var parNode = treeNode.getParentNode();
                if(parNode){
                    parsArr.push(parNode);
                    getParsByTreeNode(parNode,parsArr);
                }
                return parsArr;
            }
            $(document).ready(function(){
                // console.log(zTreeList);
                zTreeObj = $.fn.zTree.init($("#permissionTree"), setting, zTreeList);
            });
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            console.log(e.status);
            console.log(e.responseText);
        }
    });


</script>
</body>
</html>