<%@ 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, .sf-role-item li{padding: 10px 20px;}
        .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="SIT_XTSZ_YGSZ_YGSZ_T" html='<a href="${ctx}/siteEmployee/siteEmployeeList"><li>基本信息</li></a>'/>
                <sfTags:pagePermission authFlag="SIT_XTSZ_YGSZ_QXSZ_T" html='<a href="${ctx}/siteEmployee/siteLimites"><li class="layui-this">权限设置</li></a>'/>
            </ul>
            <div class="layui-tab-content">

                <div class="layui-tab-item layui-show" >
                    <div class="layui-container">
                        <div class="layui-row">
                            <div class="layui-col-md3 sf-tc">
                                <span>角色</span>
                                <ul class="sf-role-item" id="sf-role-content">
                                  <li class="sf-role-li" sf-role-id="1">
                                   <div>
                                       <button class="layui-btn layui-btn-fluid layui-btn-sm layui-btn-primary sf-role-li-btn role-selected role-systemtag">
                                           <span id="role-item-1">信息员</span>
                                       </button>
                                   </div>

                                  </li>
                                    <li class="sf-role-li" sf-role-id="3">
                                        <div>
                                            <button class="layui-btn layui-btn-fluid layui-btn-sm layui-btn-primary sf-role-li-btn role-systemtag">
                                                <span id="role-item-3">备件员</span>
                                            </button>
                                        </div>

                                    </li>
                                </ul>
                                <ul class="sf-role-item">
                                    <%--<li>
                                        <sfTags:pagePermission authFlag="QXKZ_XZJS_B" html='
                                        <button class="layui-btn layui-btn-fluid layui-btn-sm" id="addRole"><i class="layui-icon">&#xe654;</i>新增角色</button>
                                        '/>
                                    </li>--%>
                                </ul>
                            </div>
                            <div class="layui-col-md9 sf-tc">
                                <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" value="信息员">
                                    </div>
                                </div>
                                <div>
                                    <ul id="treeDemo" class="ztree" style="padding: 30px;"></ul>
                                </div>
                                <div>
                                    <sfTags:pagePermission authFlag="SIT_XTSZ_QXSZ_BC_B" html='
                                    <button class="layui-btn layui-btn-sm" id="saveMenusBtn">保存</button>
                                    '/>
                                </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(){
            loadTreeNodes();
        });

        $(document).on('click', ".sf-role-li", function(){
            $(".sf-role-li").find("button").removeClass("role-selected");
            $(this).find("button").addClass("role-selected");
            var roleName =$(this).find("span").text();
            $("#currentRole").val(roleName);
            loadTreeNodes();
        });
        $("#saveMenusBtn").on("click", function(){
            var nodes = ztreeNode.getCheckedNodes(true);
            var permissions = "";

            for(var i = 0; i < nodes.length; i++){
                permissions += "," + nodes[i].id;
            }
            if(permissions != ""){
                permissions = permissions.substring(1);
            }
            var role = getCurrentRoleId();
            $.post('${ctx}/siteEmployee/saveMemberRoleMenus', {role: role, permission:permissions}, function(result){
                if("ok" == result){
                    layer.msg("保存成功", {icon:1});
                    loadRoles();
                }else{
                    layer.msg("保存失败", {icon:2});
                }
            });
        });
    });

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



    function loadTreeNodes(){
        var role = getCurrentRoleId();
        $.get('${ctx}/siteEmployee/getMenus', {role: role}, function(data){
            nodes = eval(data);
            ztreeNode = $.fn.zTree.init($("#treeDemo"), setting, nodes);
            ztreeNode.expandAll(false);
        });
    }

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

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