<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>

<div class="admin-content">
    <div class="admin-content-body">
        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">系统管理</strong> / <small>后端角色管理</small></div>
        </div>
<form method="post" class="am-form" id="tmpForm" action="${base}/role/save">
	<!--选项卡（tabs）begin-->
	<div class="am-tabs am-margin" data-am-tabs>
		<ul class="am-tabs-nav am-nav am-nav-tabs">
			<li class="am-active">
				<a href="#tab1">编辑角色信息</a>
			</li>
		</ul>
		<div class="am-tabs-bd">
			<div class="am-tab-panel am-fade am-in am-active" id="tab1">
				<input name="roleID" id="roleID" type="hidden" value="${roleID!}"/>
				<!--验证表单元素（validate) begin-->
				<!--input begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						角色名称
					</div>
					<div class="am-u-sm-6 am-u-md-6">
						<input name="roleName" class="js-ajax-validate"
								data-validate-async data-validation-message="请输入角色名称（100字符以内）"
								type="text" id="roleName" value="${roleName!}" minlength="1" maxlength="20"
								placeholder="请输入角色名称（20字符以内）" required  onblur="checkRoleName($(this));" onKeyUp="clearValidInfo()"  />
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg" id="role_name_valid"></div>
				</div>

				<div class="am-g am-form-group am-margin-top" style="display: flex;">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span style="color: red;">*</span>角色类型</div>
					<div class="am-u-sm-6 am-u-md-6">
						<select data-am-selected="{btnWidth: '40%', btnSize: 'sm'" id="level" name="level">
							<option value="1" <#if role.level! ==1>selected</#if> >执行董事</option>
							<option value="2" <#if role.level! ==2>selected</#if> >财务总监</option>
							<option value="3" <#if role.level! ==3>selected</#if> >总经理</option>
							<option value="4" <#if role.level! ==4>selected</#if> >工程部主管</option>
							<option value="5" <#if role.level! ==5>selected</#if> >集成部主管(管理员)</option>
							<option value="6" <#if role.level! ==6>selected</#if> >财务人员</option>
							<option value="7" <#if role.level! ==7>selected</#if> >普通员工</option>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>

				<input type="hidden" id="roleLevel" name="roleLevel" value='1' />
				<!--radio begin-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">
						<span  style="color: red;">*</span>
						是否启用
					</div>
					<div class="am-u-sm-6 am-u-md-6">
                        <select data-am-selected name="isActive">
							<option value="1" <#if  role.isEnable==1 > selected </#if> >是</option>
							<option value="0" <#if  role.isEnable==0 > selected </#if> >否</option>
						</select>
					</div>
					<div class="am-u-sm-2 am-u-md-4 input-msg"></div>
				</div>
				<!--radio end-->
				<div class="am-g am-form-group am-margin-top">
					<div class="am-u-sm-4 am-u-md-2 am-text-right">管理权限</div>
					<div class="am-u-sm-8 am-u-md-10">
						<table	class="am-table am-table-striped am-table-hover am-table-bordered">
							<thead>
								<tr>
									<th width="30%">导航名称</th>
									<th>权限分配</th>
									<th width="10%">全选</th>
								</tr>
							</thead>
							<tbody>
                                    <tr level="${permnode.level}" class="level-${permnode.level}"
                                        <#if permnode.hasLeafNode >
                                            type="file"
                                        <#else>
                                            type="folder"
                                        </#if>
                                        >
                                        <td width="30%" class="role-authority-name">
                                            <#if permnode.hasLeafNode >
                                                <i class="am-icon-file-text">&nbsp;</i>
                                            <#else>
                                                <i class="am-icon-folder-open">&nbsp;</i>
                                            </#if>${permnode.name}
                                        </td>
                                        <td class="role-authority-checks">
                                        </td>
                                        <td align="center">
                                            <input class="role-authority-checkall" name="checkAll" type="checkbox" value="${permnode.id}" />
                                        </td>
                                    </tr>
                                <@bpTree nodes= permnode.subNodes/>

								</tbody>
						</table>
					</div>

			</div>

		</div>
	</div>
</div>
<!--选项卡（tabs）end-->
<div class="am-margin">
	<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
	<button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript:history.go(-1);">返回上一级</button>
</div>
</form>

</div>

</div>

</@defaultLayout.layout>

<#macro bpTree nodes>
<#list nodes as node>
<tr level="${node.level}" class="level-${node.level}"
	<#if node.hasLeafNode >
		type="file"
	<#else>
		type="folder"
	</#if>
    >
	<td width="30%" class="role-authority-name">
	<#if  node.level==2 >
	    &nbsp;&nbsp;
	<#elseif node.level==3 >
	    &nbsp;&nbsp;&nbsp;&nbsp;
	<#elseif node.level==4 >
	   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<#else>

	</#if>
		<#if node.hasLeafNode >
			<i class="am-icon-file-text">&nbsp;</i>
		<#else>
			<i class="am-icon-folder-open">&nbsp;</i>
		</#if>${node.name}
	</td>
	<td class="role-authority-checks">
        <#if node.hasLeafNode >
            <#list node.subNodes as subNode>

                <input id="rptList_cblActionType_${subNode.id!}" type="checkbox" name="rptList$ctl$cblActionType$${subNode.id!}" value="${subNode.id}" <#if subNode.selected >checked </#if> />${subNode.name}</label>&nbsp;

        	</#list>
        </#if>
	</td>
	<td align="center">
		<input class="role-authority-checkall" name="checkAll" type="checkbox" value="${node.id}" />
	</td>
</tr>
<#if (!node.hasLeafNode) && node.subNodes?? && node.subNodes?size gt 0>
<@bpTree nodes=node.subNodes />
</#if>
</#list>
</#macro>



</style>
<script type="text/javascript" src="${base}/admin/js/role.js"></script>
<script type="text/javascript">

/*角色名称检验 start*/
var urlBase = "${base}";
var url;
function checkRoleName(obj){
    var roleName = obj.val();
    var roleID = $("#roleID").val();
    if(roleName.length == 0){
        showRoleNameAlert($("#roleName").date("data-validation-message"));
        return;
    }
    $.ajax({
            url : urlBase + "/role/check",
            type : 'POST',
            dataType : 'json',
            data : {
                role_id : roleID, role_name : roleName
            },
            cache : false
        }).done(function (result) {
            if (result.status==0) {
                showRoleNameAlert(result.msg);
                obj.focus();
            }else{
                showRoleNameAlert(result.msg);
            }

        }).fail(function (){

         });

}

function clearValidInfo(){
    showRoleNameAlert("");
}
function showRoleNameAlert(message){
    var $alert = $("#role_name_valid").find('.am-alert');
    if (!$alert.length) {
        $alert = $('<div class="am-alert am-alert-danger"></div>').hide()
        $alert.appendTo($("#role_name_valid"));
    }
    if(message.length==0){
        $alert.hide();
    }else{
        $alert.text(message).show();
    }
}
/*角色名称检验 end*/


 /*复选框 全选：start*/
    $(".role-authority-checkall").click(function(){
            var $parentNode = $(this).parent().parent();
            var level = Number($parentNode.attr("level"));
            var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
            var isChecked = $(this).is(":checked");
            $allParentNextNode.each(function(){
                var myLevel = Number($(this).attr("level"));
                var $checks = $(this).children().find("input[type='checkbox']");
                if(myLevel > level){
                    return changeCheckedStatus($checks,isChecked);
                }else{
                    return;
                }
            });

            var $checks = $(this).parent().prev().find("input[type='checkbox']");
            changeCheckedStatus($checks,isChecked);
    });

	function changeCheckedStatus(checksObj,isChecked){
		checksObj.each(function(){
			if(isChecked){
				$(this).prop("checked",true);
			}else{
				$(this).prop("checked",false);
			}
		});
	}
/*复选框 全选：end*/

$(function() {
    /*表单验证：begin*/
	//自定义规则，用法：验证元素上加class="js-pattern-sort"
	if ($.AMUI && $.AMUI.validator) {
		$.AMUI.validator.patterns.sort = /^([0-9]+)$/;
	}
	$("#tmpForm").validator({
		// 域通过验证时回调
		onValid: function(validity) {
		  $(validity.field).closest('.am-form-group').find('.am-alert').hide();
		},
		// 域验证通过时添加的操作，通过该接口可定义各种验证提示
		markValid: function(validity) {
			// this is Validator instance
			var $field  = $(validity.field);
			//add by zxl，只对有required属性的字段进行验证
			if(typeof($field.attr("required"))!="undefined"){
				var options = this.options;
				var $parent = $field.closest('.am-form-group');
				$field.addClass(options.validClass).
				  removeClass(options.inValidClass);

				$parent.addClass('am-form-success').removeClass('am-form-error');

				options.onValid.call(this, validity);
			}
		},
		// 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
		onInValid: function(validity) {
		  var $field = $(validity.field);
		  var $group = $field.closest('.am-form-group');
		  var $alert = $group.find('.am-alert');
		  // 使用自定义的提示信息 或 插件内置的提示信息
		  var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

		  if (!$alert.length) {
		    $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
		    appendTo($group.find(".input-msg"));
		  }
		  console.log("onInValid : "+$field.val());
		  $alert.html(msg).show();
		}
	});
	/*表单验证：end*/

    /*树形结构 展开折叠效果：start */
    $(".role-authority-name").click(function(){
		var $parentNode = $(this).parent();
		var level = Number($parentNode.attr("level"));
		var $allParentNextNode = $parentNode.nextUntil(".level-"+level);
		var $iNode = $parentNode.find("i");
		var $lastNode = $allParentNextNode.last();
		$allParentNextNode.each(function(){
			var myLevel = Number($(this).attr("level"));
			var $myINode = $(this).find("i");
			var type = $(this).attr("type");
			if(myLevel > level){
				if($iNode.attr("class") == "am-icon-folder-open"){
					$(this).css("display","none");
					if(type == "folder"){
						$myINode.attr("class","am-icon-folder");
					}
				}else if($iNode.attr("class") == "am-icon-folder"){
					if(type == "folder"){
						$myINode.attr("class","am-icon-folder-open");
					}
					$(this).css("display","");
				}
				if($(this).is($lastNode)){
					if($iNode.attr("class") == "am-icon-folder-open"){
						$iNode.attr("class","am-icon-folder");
					}else if($iNode.attr("class") == "am-icon-folder"){
						$iNode.attr("class","am-icon-folder-open");
					}
				}
			}else{
				if($(this).is($lastNode)){
					if($iNode.attr("class") == "am-icon-folder-open"){
						$iNode.attr("class","am-icon-folder");
					}else if($iNode.attr("class") == "am-icon-folder"){
						$iNode.attr("class","am-icon-folder-open");
					}
				}
				return;
			}
		});
	});
    /*树形结构 展开折叠效果：end */

});


</script>
<style type="text/css">
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
</style>













