<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<!-- COMPOSE MESSAGE MODAL -->
		<div class="modal-dialog" style="width: 860px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title"><i class="fa fa-envelope-o"></i>编辑角色</h4>
				</div>
				<div class="modal-body">
					<form id="roleForm" action="system/role/updateRole.do" method="post">
						<div class="row form-group">
							<div class="col-sm-2">
			  					<span class="span">角色标识</span>
							</div>
							<div class="col-sm-4">
			 					<input type="text" class="form-control" id="roleIdentity" name="roleIdentity" value="${role.roleIdentity}"/>
							</div>
							<div class="col-sm-2">
			  					<span class="span">角色名称</span>
							</div>
							<div class="col-sm-4">
			 					<input type="text" class="form-control" name="roleName" id="roleName" value="${role.roleName}"/>
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-2">
			  					<span class="span">角色状态</span>
							</div>
							<div class="col-sm-4">
								<select class="form-control" name="roleStatus">
									<c:forEach items="${roleStatusMap}" var="map">
								    	<option value="${map.key}" <c:if test="${map.key eq role.roleStatus}">selected="true"</c:if>>
								    		${map.value}
								    	</option>
								    </c:forEach>
								</select>
							</div>
							<div class="col-sm-2">
			  					<span class="span">角色描述</span>
							</div>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="roleDesc" id="roleDesc" value="${role.roleDesc}"/>
								<input type="hidden" id="resIds" name="resIds"/>
								<input type="hidden" id="prmsIds" name="prmsIds"/>
								<input type="hidden" id="prmsChks" name="prmsChks"/>
							</div>
						</div>
						<div class="row form-group">
							<div class="col-sm-2">
			  					<span class="span">资源类型</span>
							</div>
							<div class="col-sm-4">
								<div class="form-group">
				 					<select class="form-control" id="resType">
										<option value="" selected="selected">请选择</option>
										<c:forEach items="${resTypeMap}" var="map">
									    <option value="${map.key}">${map.value}</option>
									    </c:forEach>
									</select>
			 					</div>
							</div>
							<div class="col-sm-2">
								<input type="hidden" name="roleId" value="${role.roleId}"/>
							</div>
							<div class="col-sm-4"></div>
						</div>
						<div class="row form-group">
							<div class="col-sm-12" id="tree_div">
								
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
				    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>取消</button>
					<button id="saveBtn" type="button" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i>确定</button>
				</div>
			</div>
		</div>
    
		<script type="text/javascript">
			$(function(){
				var form = $('#roleForm');
			    var addRoleForm = form.platformValidate({
			    	rules:{
			    		roleIdentity:{
			    			required:true,
			    			maxlength:25
			    		},
			    		roleName:{
			    			required:true, 
			    			maxlength:25
			    		},
			    		roleDesc:{
			    			maxlength:150
			    		}
			    	},
			    	messages:{
			    		roleIdentity:{
			    			required:"角色标识不能为空",
			    			maxlength:"角色标识最大长度为25"
			    		},
			    		roleName:{
			    			required:"角色名称不能为空",
			    			maxlength:"角色名称最大长度为15"
			    		},
			    		roleDesc:{
			    			maxlength:"角色描述最大长度为150"
			    		}
			    	}
			    });
			    
				//提交
				$("#saveBtn").bind('click',function(event){
					if(!$("#roleForm").valid()){
						return;
					}
					
					var nodes = $("input[name='resId']");
					var resIds = [],prmsIds = [],prmsChks = [];
					var prmsAry =[];
					<c:forEach items="${prmsList}" var="prms">
						prmsAry.push(parseInt("${prms.prmsId}"));
					</c:forEach>
					
					try{
						for ( var i = 0; i < nodes.length; i++) {
							var node = $(nodes[i]);
							if(node.is(":checked")){
								if(0!=node.val()){
									resIds.push(node.val());
									var inputAry = node.parent().next().children("input[type='checkbox']");
									for(var j=0;j<prmsAry.length;j++){
										if(inputAry.length==0){
											prmsIds.push(prmsAry[j]);
											prmsChks.push(false);
										}else{
											prmsIds.push(parseInt($(inputAry[j]).val()));
											prmsChks.push($(inputAry[j]).is(":checked"));
										}
									}
								}
							}
						}
					}catch(e){
						return false;
					}
					$("#resIds").val(resIds.join(","));
					$("#prmsIds").val(prmsIds.join(","));
					$("#prmsChks").val(prmsChks.join(","));
					form.submit();
				});
				
				//取得角色对应的权限列表
				var resData;
				$.post("system/role/getRoleResourcePrmsList.do", {roleId:"${role.roleId}"},function(data){
					
					if (typeof(data.resType) == "undefined") { 
						return;
					}
					resData=data;
					showRes(data.resType,data,data.resTypeStr);
				});
				
				//根据资源类型查询资源列表
				$("#resType").bind("change",function(){
					if($(this).val()=="")
						return;
					showRes($(this).val(),resData,"");
				});
				
				function showRes(rtype,data,resTypeStr){
					//取得所有的权限列表
					$.post("system/role/getResList.do",{resType:rtype},function(result){
						var treeArys=[];
						treeArys.push("<div class='box'>");
						treeArys.push("<div class='box-body table-responsive'>");
						treeArys.push("<h4>"+resTypeStr+"</h4>");
						treeArys.push("<table class='table tree table-bordered table-striped table-condensed'>");
						treeArys.push("<tr class='treegrid-0'><td><input type='checkbox' id='allResIds' value='0' />所有资源</td><td></td></tr>");
						$.each(result.data,function(index,res){
							var arys = [];
							var parentClass="";
							var chkChildStr="";
							var chkStr="<input type='checkbox' name='resId' value='"+res.resId+"' />";
							
							if(parseInt(res.resParentId)>0){
								parentClass="treegrid-parent-"+res.resParentId;
							}
							if(res.leaf){
								<c:forEach items="${prmsList}" var="prms">
						    		arys.push("<input type='checkbox' name='prmsId' value='${prms.prmsId}' /> ${prms.prmsName}");
						    	</c:forEach>
						    	chkChildStr=arys.join("&nbsp;&nbsp;&nbsp;&nbsp;");
							}
							treeArys.push("<tr class='treegrid-"+res.resId+" "+parentClass+"'><td>"+chkStr+res.resName+"</td><td>"+chkChildStr+"</td></tr>");
						});
						treeArys.push("</table>");
						treeArys.push("</div>");
						treeArys.push("</div>");
						$("#tree_div").html(treeArys.join(""));
						$('.tree').treegrid({
		                    expanderExpandedClass: 'glyphicon glyphicon-minus',
		                    expanderCollapsedClass: 'glyphicon glyphicon-plus'
		                });
						
						//标记角色包含的资源和权限
						var nodes = $("input[name='resId']");
						for ( var i = 0; i < nodes.length; i++) {
							var node = $(nodes[i]);
							if (typeof(data) == "undefined") { 
								break;
							}
							if(data.data["RES-"+node.val()]){
								node.attr("checked",true);
								$.each(data.data["RES-"+node.val()],function(j,p){
									$(node.parent().next().children("input[value='"+p+"']")).attr("checked",true);
								});
							}
						}
						
						//全选
						$("#allResIds").bind("click",function() {
							$("input[name='resId']").prop("checked",$(this).is(":checked"));
						});
						
						//选中父节点级联选中子节点（仅第一级子元素）
						$("#tree_div").click(function(event){
							var ele = $(event.srcElement || event.target);
							if(ele.is("input") && ele.attr("name")=="resId"){
								$(".treegrid-parent-"+ele.val()).each(function(index){
									$(this).find("input[name='resId']").prop("checked",ele.is(":checked"));
								});
							}
						});
					});
				}
			});
		</script>