<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
    <meta name="decorator" content="base" />
    <link rel="stylesheet" href="${ctxPlugin}/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="${ctxPlugin}/lib/zTree/v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
    <script type="text/javascript" src="${ctxPlugin}/lib/zTree/v3/js/jquery.ztree.excheck-3.5.js"></script>
    <style>
        .sf-role-item{text-align: left;}
        .sf-role-item li{ padding: 10px 0px; display: inline-block; width: 48%; margin: 0 1%;}
        .sf-tc{text-align: center;}
        .role-selected{background: #c0dedb !important;}
        .layui-card{box-shadow: none;}
        .role-systemtag{background: #dedede;}
    </style>
</head>
<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
               <%-- <sfTags:pagePermission authFlag="XTSZ_YGSZ_JSGL_T" html='<li class="sf-tab"><a href="${ctx}/member/setRole">角色管理</a></li>'/>
                <sfTags:pagePermission authFlag="XTSZ_YGSZ_QXKZ_T" html='<li class="layui-this sf-tab"><a href="${ctx}/member/roleIndex">权限设置</a></li>'/>
                <c:if test="${user.userType eq '6' || user.userType eq '7'}">
                    <sfTags:pagePermission authFlag="SIT_XTSZ_YGSZ_YGXX_T" html='<li class="sf-tab"><a href="${ctx}/traderEmploye/traderEmployeeList">员工信息</a></li>'/>
                </c:if>

                <c:if test="${user.userType ne '6' && user.userType ne '7'}">
                    <sfTags:pagePermission authFlag="XTSZ_YGSZ_YGSZ_T" html='<li class="sf-tab"><a href="${ctx}/member/index">人员管理</a></li>'/>
                </c:if>--%>
                   <c:if test="${user.userType eq '6' || user.userType eq '7'}">
                       <sfTags:pagePermission authFlag="XTSZFWS_YGSZ_JSGL_T" html='<li class="sf-tab"><a href="${ctx}/member/setRole">角色管理</a></li>'/>
                       <sfTags:pagePermission authFlag="XTSZFWS_YGSZ_QXKZ_T" html='<li class="layui-this sf-tab"><a href="${ctx}/member/roleIndex">权限设置</a></li>'/>
                       <sfTags:pagePermission authFlag="SIT_XTSZ_YGSZ_YGXX_T" html='<li class="sf-tab"><a href="${ctx}/traderEmploye/traderEmployeeList">员工信息</a></li>'/>
                   </c:if>

                   <c:if test="${user.userType ne '6' && user.userType ne '7'}">
                       <sfTags:pagePermission authFlag="XTSZ_YGSZ_JSGL_T" html='<li class="sf-tab"><a href="${ctx}/member/setRole">角色管理</a></li>'/>
                       <sfTags:pagePermission authFlag="XTSZ_YGSZ_QXKZ_T" html='<li class="layui-this sf-tab"><a href="${ctx}/member/roleIndex">权限设置</a></li>'/>
                       <sfTags:pagePermission authFlag="XTSZ_YGSZ_YGSZ_T" html='<li class="sf-tab"><a href="${ctx}/member/index">人员管理</a></li>'/>
                   </c:if>
            </ul>
            <div class="layui-tab-content" style="height: calc(100vh - 70px)">
                <div class="layui-tab-item layui-show" >
                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md4 sf-tc">
                                <span>角色</span>
                                <ul class="sf-role-item" style="height: calc(100vh - 130px); overflow: auto;" id="sf-role-content">
                                </ul>
                            </div>
                            <div class="layui-col-md8 sf-tc">
                                <span>操作</span>
                                <div style="width: 40%;">
                                    <label class="layui-form-label">当前角色:</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="currentRole" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div style="height: calc(100vh - 170px);overflow: auto;">
                                    <ul id="treeDemo" class="ztree" style="padding: 30px;"></ul>
                            <%--    </div>
                                <div style="height: calc(100vh - 170px);overflow: auto;">--%>
                                    <ul id="treeDemoyw" class="ztree" style="padding: 30px;"></ul>
                                </div>
                                <div>
                                    <c:if test="${user.userType ne '6' && user.userType ne '7'}">
                                        <sfTags:pagePermission authFlag="QXKZ_BC_B" html='<button class="layui-btn layui-btn-sm" id="saveMenusBtn">保存</button>'/>
                                    </c:if>
                                    <c:if test="${user.userType eq '6' || user.userType eq '7'}">
                                        <sfTags:pagePermission authFlag="DLSQXKZ_BC_B" html='<button class="layui-btn layui-btn-sm" id="saveMenusBtn">保存</button>'/>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'jquery', 'layer'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;

        $(function(){
            loadRoles();
        });

        $(document).on('click', ".sf-role-li", function(){
            $(".sf-role-li").find("button").removeClass("role-selected");
            $(this).find("button").addClass("role-selected");
            loadTreeNodes(0);
        });


        $("#saveMenusBtn").on("click", function(){
            var nodes = ztreeNode.getCheckedNodes(true);
          //  var nodesyw = ztreeNodeyw.getCheckedNodes(true);
            var permissions = "";
            for(var i = 0; i < nodes.length; i++){
                permissions += "," + nodes[i].id;
            }
            if(permissions != ""){
                permissions = permissions.substring(1);
            }
            // var permissionsyw = "";
            // for(var i = 0; i < nodesyw.length; i++){
            //     permissionsyw += "," + nodesyw[i].id;
            // }
            // if(permissionsyw != ""){
            //     permissionsyw = permissionsyw.substring(1);
            // }
            var roleId = getCurrentRoleId();
            $.post('${ctx}/member/saveMemberRoleMenus', {roleId: roleId, permission:permissions}, function(result){
                if("ok" == result){
                    layer.msg("保存成功", {icon:1});
                 /*   loadRoles();*/
                }else{
                    layer.msg("保存失败", {icon:2});
                }
            });
        });
    });

    var nodes;
    var ztreeNode;
    // var nodesyw;
   // var ztreeNodeyw;
    var setting = {
        // { "Y" : "ps", "N" : "ps" }
        check: {enable: true,       chkboxType : { "Y" : "ps", "N" : "ps" }},
        data: {simpleData: {enable: true,idKey: "id",pIdKey: "pid",rootPId: 0}}
    };
    // var settingyw = {
    //     // { "Y" : "ps", "N" : "ps" }
    //     check: {enable: true, chkboxType : { "Y" : "ps", "N" : "ps" }},
    //     data: {simpleData: {enable: true,idKey: "id",pIdKey: "pid",rootPId: 0}}
    // };

    function loadRoles(){
        $.get('${ctx}/member/getRoles', {}, function(data){
var roles = eval(data);
var html = '';
for(var i = 0; i < roles.length; i++){
var role = roles[i];
html += '<li class="sf-role-li" sf-role-id="'+role.columns.id+'">';
html += '<div>';
html += '<button class="layui-btn layui-btn-fluid layui-btn-sm layui-btn-primary sf-role-li-btn '+(i == 0 ? "role-selected" : "")
+' '+'"><span id="role-item-'+role.columns.id+'">' + role.columns.name + '</span>';
html += '</button>';
html += '</div>';
html += '</li>';
}
$("#sf-role-content").empty().append(html);
loadTreeNodes(0);
<%--<c:if test="${user.userType ne '6' && user.userType ne '7'}">
    loadTreeNodesYw(0);
</c:if>--%>
    });
    }

    function loadTreeNodes(isNew){
    var roleId = getCurrentRoleId();
        var roleName = $("#role-item-" + roleId).text();
        $("#currentRole").val(roleName);
        $.get('${ctx}/member/getMenus', {roleId: roleId}, function(data){
            nodes = eval(data);
            ztreeNode = $.fn.zTree.init($("#treeDemo"), setting, nodes);
            ztreeNode.expandAll(false);
        });
    }
/*    function loadTreeNodesYw(isNew){
        var roleId = getCurrentRoleId();
      //  var roleName = $("#role-item-" + roleId).text();
       // $("#currentRole").val(roleName);
        $.get('${ctx}/member/getMenusYw', {roleId: roleId}, function(data){
            nodesyw = eval(data);
            ztreeNodeyw = $.fn.zTree.init($("#treeDemoyw"), settingyw, nodesyw);
            ztreeNodeyw.expandAll(false);
        });
    }*/

    function getCurrentRoleId(){
        var roleId = $(".role-selected").closest("li").attr("sf-role-id");
        return roleId;
    }

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