#@mgr(attr.getItem("currentMenuName"))

#define content()
<section class="content container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div class="box box-info">
				<div class="box-header with-border">
					<h3 class="box-title">#(title)</h3>
					<div class="box-tools">
						<button class="btn btn-box-tool" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body no-padding">
					<ul class="tree-list"></ul>
				</div>
			</div>
		</div>
		<div class="col-md-9">
			<div id="dataTable"></div>
		</div>
	</div>
</section>
#end

#define before()
<style>
.tree-list{
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.tree-list ul{
	padding-left: 30px;
}
.tree-list li{
	margin: 0;
	display: block;
}
.tree-list li a{
	border-radius: 0;
	border-top: 0;
	border-left: 3px solid transparent;
	color: #444;
	display: block;
	padding: 10px 15px;
	border-bottom: 1px solid #f4f4f4;
}
.tree-list li a:hover{
	text-decoration: none;
	background-color: #eee;
}
.tree-list li.active a{
	background: transparent;
	color: #333;
	border-top: 0;
	border-left-color: #09C;
	font-weight: 600;
}
.tree-list li a .badge {
	float: right;
	font-weight: normal;
	margin-left: 5px;
}
</style>
#end

#define after()
<script>
require(['ez-datagrid', 'kit'], function(Grid, Kit){
	
	var mtype = '#(mtype)';
	var rootJson = #(EJson.toJson(rootMenu));
	var menusJson = #(EJson.toJson(menus));
	var menuId = '#(pid)';
	var datagrid;
	var getSubMenus = function(){
		var menus = [];
		menusJson.forEach(menu => {
			if(menu.pid === menuId || (menu.pid === null && menuId === '')) menus.push(menu);
		});
		return menus;
	}
	var initMenuTree = function(){
		var box = $(".tree-list");
		var rootLi = menuId == rootJson.id ? $("<li class='active'>") : $("<li>");
		box.append(rootLi);
		$("<a href='javascript:void(0)' data-id='" + rootJson.id + "'>" + rootJson.caption + "</a>").on("click", chgMenu).appendTo(rootLi);
		menusJson.forEach(menu => {
			var li = menuId == menu.id ? $("<li class='active'>") : $("<li>");
			box.append(li);
			var level = menu.path.split("_").length * 10 + 15;
			$("<a href='javascript:void(0)' data-id='" + menu.id + "' style='padding-left:" + level + "px'>" + menu.caption + "</a>").on("click", chgMenu).appendTo(li);
		});
		$("#menuCaption").text(rootJson.caption);
		initMenuGrid();
	}
	var chgMenu = function(){
		var me = $(this);
		menuId = me.data("id");
		$(".tree-list li.active").removeClass("active");
		me.parent().addClass("active");
		datagrid.update(getSubMenus());
	}
	var authOpts = [{value:'-',text:'匿名'},{value:'REQ_PERM',text:'单个权限'},{value:'REQ_PERMS',text:'多个权限（同时）'},{value:'REQ_PERMS_ANY',text:'多个权限（之一）'},{value:'REQ_ROLE',text:'单个角色'},{value:'REQ_ROLES',text:'多个角色（同时）'},{value:'REQ_ROLES_ANY',text:'多个角色（之一）'}];
	var folderOpts = [{'value': '0', 'text': '菜单'}, {'value': '1', 'text': '目录'}];
	
	var initMenuGrid = function(){
		var opts = {
			container: '#dataTable'
			, data: getSubMenus()
			, title: '下级菜单'
			, columns: [{
	            field: 'caption'
	            , title: '菜单名称'
	            , width: 120
	            , required: true
			},{
            	field: 'ico'
	            , title: '菜单图标'
				, visible: false
			},{
	            field: 'command'
	            , title: '菜单命令'
				, visible: false
			},{
            	field: 'authMode'
	            , title: '鉴权方式'
  		        , width: 150
	            , options: authOpts
	            , type: 'select'
   				, defaultValue: ''
		        , formatter: function(value){
	            	let seled = '';
	            	if(value !== null && value !== '' && value !== undefined){
	            		authOpts.forEach(item => {
            				if(value === item.value) seled = item.text;
            			});
	            		return seled;
	            	}
	            	return '';
	            }
    		},{
            	field: 'authCode'
   	            , title: '鉴权别名'
       		},{
            	field: 'folder'
  	            , title: '类型'
  		        , width: 60
	            , options: folderOpts
	            , type: 'radio'
   				, defaultValue: '0'
   				, width: 60
		        , formatter: function(value){
	            	let seled = '';
	            	if(value !== null && value !== '' && value !== undefined){
	            		folderOpts.forEach(item => {
            				if(value + '' === item.value) seled = item.text;
            			});
	            		return seled;
	            	}
	            	return '';
	            }
      		}]
			, btnAdd: { callback: function(params){ return '#(attr.ctrl)/add?mtype=' + mtype + '&pid=' + menuId } }
			, btnModify: { callback: function(params, row){ return '#(attr.ctrl)/modify' } }
			, btnRemove: { callback: function(params, rows){ return '#(attr.ctrl)/remove?mtype=' + mtype + '&pid=' + menuId + '&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortUp: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sort?mtype=' + mtype + '&pid=' + menuId + '&opt=up&ids=' + Kit.getFields(rows, 'id').join(',') } }
			, btnSortDown: { used: true, callback: function(params, rows){ return '#(attr.ctrl)/sort?mtype=' + mtype + '&pid=' + menuId + '&opt=down&ids=' + Kit.getFields(rows, 'id').join(',') } }
		}
		Grid.load(opts, function(dg){
			datagrid = dg;
		});
	}
	
	initMenuTree();
	
});
</script>
#end