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

#define content()
<section class="content container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div class="tree-container"></div>
		</div>
		<div class="col-md-9">
			<div class="table-container"></div>
			<blockquote>
			<h4>操作说明：</h4>
			<li>点击 <code>修改</code> 时，可根据当前选中的数据条数自动实现单条修改和批量修改。</li>
			<li>要对指定菜单添加鉴权，请正确设置菜单所属模块，才能选择到该模块内的角色或权限。</li>
			</blockquote>
		</div>
	</div>
</section>
#end

#define before()
<style>
.mask { box-shadow: rgba(0,0,0,.6) 0 0 0 2666px }
</style>
#end

#define after()
<script>
require(['kit', 'ez-list', 'ez-table', 'ez-mask'], function(Kit, List, Table, Mask){
	
	var mtype = '#(mtype)';
	var modules = #(modules);
	var roles = #(roles);
	var perms = #(perms);
	var menus = #(menus);
	var menuSub = [];
	
	//按模块整理角色和权限列表，避免重复获取
	var modulesMap = {};
	
	var title = (mtype == 'menu' ? '侧栏菜单' : '顶栏导航');
	var root = { id: '', pid: '__SUP__', caption: title, folder: 1, path: 'root' };
	var pid = root.id;
	
	var authJson = [{key:'-',value:'匿名'},{key:'REQ_PERM',value:'单个权限'},{key:'REQ_PERMS',value:'多个权限（同时）'},{key:'REQ_PERMS_ANY',value:'多个权限（之一）'},{key:'REQ_ROLE',value:'单个角色'},{key:'REQ_ROLES',value:'多个角色（同时）'},{key:'REQ_ROLES_ANY',value:'多个角色（之一）'}];

	var loadSubMenus = function(){
		menuSub = [];
		$.each(menus, function(i, m){
			if(Kit.ifEmpty(m.pid, '') === pid) menuSub.push(m);
		});
		table.load(menuSub);
	}
	
	var list = List('.tree-container', {
		title: title,
		active: function(ind, row){
			return pid === row.id;
		},
		event: {
			selected: function(ind, row){
				var nid = Kit.ifEmpty(row.id, '');
				if(nid == pid) return false;
				if(activeData.active == 'move'){ //移动到
					if(row.folder == 0){
						Mask().alert('目标：<b>' + row.caption + '</b> 不是目录，无法添加子菜单！');
						return false;
					}
					Mask().confirm({
						content: '确定要将其移动到：<b>' + row.caption + '</b> 吗？',
						callback: function(){
							pid = nid;
							table.showLoading();
							var paras = { mtype, pid, ids: activeData.ids };
							$.post(ATTR.ctrl + '/move', paras, function(res){
								table.hideLoading();
								endActive();
								menus = res.data.menus;
								initLoad(function(){
									var ids = activeData.ids.split(',');
									$.each(ids, function(ind, id){
										$('.table-container .row-chk[data-id="' + id + '"]').iCheck('toggle');
									});
								});
							});
							return true;
						}
					});
					return false;
				}else{
					pid = nid;
					loadSubMenus();
				}
			}
		}
	});
	
	var init = function(){
		$.each(modules, function(i, mod){
			var modCode = mod.code;
			if(Kit.isEmpty(modulesMap[modCode])) modulesMap[modCode] = { PERMS: [], ROLES: [] };
			$.each(perms, function(j, o){
				if(o.moduleId == modCode) modulesMap[modCode].PERMS.push(o);
			});
			$.each(roles, function(j, o){
				if(o.moduleId == modCode) modulesMap[modCode].ROLES.push(o);
			});
		});
		initLoad();
	}
	
	var initLoad = function(callback){
		$.each(menus, function(i, m){ m.path = 'root_' + m.path; });
		menus.unshift(root);
		list.load(menus);
		loadSubMenus();
		if(Kit.isFunction(callback)) callback();
	}

	//操作状态缓存（active：操作类型，可选值：move/mgr）
	var activeData = { ids: null, active: null };

	//开始交互（移动）
	var startActive = function(){
		$('.table-container .box-controls .top-left-group').find('.btn').addClass('hidden');
		$('.table-container .box-controls .top-left-group').find('.btn-cancal').removeClass('hidden');
		$('.tree-container').addClass('mask');
	}
	
	//结束交互（移动）
	var endActive = function(){
		activeData.active = null;
		$('.table-container .box-controls .top-left-group').find('.btn').removeClass('hidden');
		$('.table-container .box-controls .top-left-group').find('.btn-cancal').addClass('hidden');
		$('.tree-container').removeClass('mask');
	}
	
	var table = Table('.table-container', {
		title: '下级菜单',
		checkMulti: true,
		columns: [
			{
	        	field: 'folder',
		        title: '类型',
	            align: 'center',
			    width: 60,
			    formatter: function(val){
			    	return val === 0 ? '&nbsp;' : '<i class="fa fa-plus-square text-muted"></i>';
			    }
	   		}, {
	        	field: 'ico',
	            title: '图标',
	            align: 'center',
	            width: 60,
	            formatter: function(val){
	            	return '<i class="' + val + '"></i>';
	            }
			}, {
	            field: 'caption',
	            title: '菜单名称'
			}, {
	        	field: 'moduleCode',
	            title: '所属模块',
	            type: 'select',
	            align: 'center',
	            options: modules,
	            optionsKey: 'code',
	            optionsValue: 'caption'
			}, {
	        	field: 'authMode',
	            title: '鉴权模式',
	            align: 'center',
	            type: 'select',
	            options: authJson
			}, {
	        	field: 'authCode',
	            title: '鉴权内容',
	            align: 'center',
	            formatter: function(val, row){
	            	if(Kit.isEmpty(val)) return '';
	            	var module = row.moduleCode;
	            	var mode = row.authMode;
	    			if(Kit.isEmpty(mode) || mode == '-' || Kit.isEmpty(module)) return '';
	    			var codes = val.split(',');
	    			var ls = modulesMap[module][mode.indexOf('PERM') > -1 ? 'PERMS' : 'ROLES'];
	    			var caps = [];
	    			$.each(ls, function(i, o){
	    				if(codes.indexOf(o.code) > -1) caps.push('<span class="badge bg-blue">' + o.caption + '</span>');
	    			});
	    			return caps.join(' ');
	            }
	   		}
  		],
  		btns: {
  			back: { used: false },
  			add: {
  				used: true,
  				click: function(){
  					showForm({ mtype, pid, folder: 0 }, null);
  				}
  			},
  			modify: {
  				used: true,
  				click: function(){
  					var inds = table.getSelectedInd();
  					if(inds.length == 0){
  						Mask().alert('请选择要修改的记录');
  						return;
  					}
  					if(inds.length == 1){
  	  					showForm(menuSub[inds[0]], null);
  					}else{
  	  					showForm({}, table.getSelectedId().join(','));
  					}
  				}
  			},
  			remove: {
  				used: true,
  				click: function(){
  					var ids = table.getSelectedId();
  					if(ids.length == 0){
  						Mask().alert('请选择要删除的记录');
  						return;
  					}
  					Mask().confirm({
  						content: '确定要删除当前选择的 ' + ids.length + ' 条记录吗？',
  						callback: function(){
  							var paras = { mtype, ids: ids.join(',') };
  							$.post(ATTR.ctrl + '/remove', paras, function(res){
  								menus = res.data.menus;
  								initLoad();
  							});
  							return true;
  						}
  					})
  				}
  			},
  			sortUp: {
  				used: true,
  				click: function(){
  					var ids = table.getSelectedId();
  					if(ids.length == 0){
  						Mask().alert('请选择要移动的记录');
  						return;
  					}
					table.showLoading();
  					var paras = { mtype, pid, ids: ids.join(','), opt: 'UP'};
  					$.post(ATTR.ctrl + '/sort', paras, function(res){
						table.hideLoading();
  						menus = res.data.menus;
						initLoad(function(){
							$.each(ids, function(ind, id){
								$('.table-container .row-chk[data-id="' + id + '"]').iCheck('toggle');
							});
						});
  					});
  				}
  			},
  			sortDown: {
  				used: true,
  				click: function(){
  					var ids = table.getSelectedId();
  					if(ids.length == 0){
  						Mask().alert('请选择要移动的记录');
  						return;
  					}
					table.showLoading();
  					var paras = { mtype, pid, ids: ids.join(','), opt: 'DOWN'};
  					$.post(ATTR.ctrl + '/sort', paras, function(res){
						table.hideLoading();
  						menus = res.data.menus;
						initLoad(function(){
							$.each(ids, function(ind, id){
								$('.table-container .row-chk[data-id="' + id + '"]').iCheck('toggle');
							});
						});
  					});
  				}
  			},
   			move: {
   				used: true,
   				cls: 'btn btn-warning btn-sm',
   				icon: 'fa fa-random',
   				caption: '移动到 ┅',
   				click: function(){
   					var ids = table.getSelectedId();
   					if(ids.length == 0){
   						Mask().alert('请选择至少一条数据');
   						return;
   					}
   					activeData.ids = ids.join(',');
   					activeData.active = 'move';
   					startActive();
   				}
   			},
   			cancal: {
   				used: true,
   				cls: 'btn btn-danger btn-sm hidden',
   				icon: 'fa fa-close',
   				caption: '取消操作',
   				click: function(){
   					endActive();
   				}
   			},
  			exports: {
  				used: true,
  				icon: 'fa fa-cloud-download',
  				cls: 'btn btn-sm btn-success btn-flat',
  				caption: '导出',
  				float: 'right',
  				click: function(){
  					//Kit.go(ATTR.ctrl + '/export');
					Mask().form({
						title: '菜单代码',
						columns: [
							{
								field: 'json',
								type: 'textarea',
								showLabel: false,
								css: { height: 400 }
							}
						],
						btns: { submit: { used: false } }
					}, { json: Kit.json2code(Kit.filterFields(menuSub, 'id,ico,caption,folder,command,moduleCode,sub,authMode,authCode')) });
  				}
  			}
  		}
	});

	
	var showForm = function(obj, ids){
		var single = Kit.isEmpty(ids);
		var chgFolderType = function(isFolder){
			if(isFolder == 1){
				mask.box.find('.group-command').hide();
				mask.box.find('.group-command input').removeAttr('required');
			}else{
				mask.box.find('.group-command').show();
				mask.box.find('.group-command input').attr('required', true);
			}
		}
		var getAuthOpts = function(mode, module){
			if(Kit.isEmpty(mode) || mode == '-' || Kit.isEmpty(module)) return [];
			return modulesMap[module][mode.indexOf('PERM') > -1 ? 'PERMS' : 'ROLES'];
		}
		var resetAuthOpts = function(mode, module){
			var sel = mask.box.find('.group-authCode select');
			sel.empty();
			var opts = getAuthOpts(mode, module);
			$.each(opts, function(i, o){
				var opt = $('<option></option>').appendTo(sel);
				opt.val(o.code);
				opt.text(o.caption);
			});
			sel.val('').select2();
		}
		var mask = Mask().form({
			title: single ? '菜单设置' : '批量设置',
			action: ATTR.ctrl + (single ? '/singleEvent' : '/batchEvent'),
			ajax: true,
			columns: [
				{
		        	field: 'mtype',
		            defaultValue: mtype,
		            visible: false
				}, {
		        	field: 'pid',
		            defaultValue: pid,
		            visible: false
				}, {
		        	field: 'ids',
		            defaultValue: ids,
		            visible: false
		   		}, {
		        	field: 'folder',
			        title: '类型',
			        type: 'radio',
			        visible: single,
			        options: [{key:0,value:'菜单'},{key:1,value:'目录'}],
			        events: {
			        	ifClicked: function(evt){
			        		chgFolderType($(this).val());
			        	}
			        }
				}, {
		        	field: 'ico',
		            title: '图标',
			        visible: single,
		            defaultValue: 'fa fa-caret-right'
				}, {
		            field: 'caption',
		            title: '菜单名称',
			        visible: single,
		            required: true
				},{
		            field: 'command',
		            title: '菜单命令',
					defaultValue: 'src:/',
		            required: obj.folder != 1,
		            visible: single && obj.folder != 1
				}, {
		        	field: 'moduleCode',
		            title: '所属模块',
		            type: 'select',
		            options: modules,
		            optionsKey: 'code',
		            optionsValue: 'caption',
					events: {
						change: function(evt) {
							var vals = mask.form.getValues();
							resetAuthOpts(vals.authMode, vals.moduleCode);
						}
					},
		            required: true
				}, {
		        	field: 'authMode',
		            title: '鉴权模式',
		            type: 'select',
		            options: authJson,
					events: {
						change: function(evt) {
							var vals = mask.form.getValues();
							resetAuthOpts(vals.authMode, vals.moduleCode);
						}
					}
				}, {
		        	field: 'authCode',
		            title: '鉴权内容',
		            type: 'selectMulti',
		            options: single ? getAuthOpts(obj.authMode, obj.moduleCode) : [],
		            optionsKey: 'code',
		            optionsValue: 'caption'
		   		}
	  		],
	  		btns: {
	  			back: { used: false }
	  		},
	  		before: function(){
	  			var vals = mask.form.getValues();
	  			if(Kit.notEmpty(vals.authMode) && vals.authMode != '-'){
	  				if(vals.authCode.length == 0){
	  					Mask().alert('当不允许匿名访问时，必须设置鉴权内容！');
	  					return false;
	  				}
	  			}
	  			return true;
	  		},
	  		callback: function(ret, res){
	  			if(!res.state){
	  				Mask().alert(res.msg);
	  			}else{
	  				Mask().alert('菜单保存成功');
					menus = res.data.menus;
					mask.hide();
					initLoad();
	  			}
	  		}
		}, obj);
	}
	
	init();
	
});
</script>
#end