#@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>
			</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 rootId = '#(rootId)';
	var pid = rootId;
	var types = #(types);
	var treeData = [];
	var subsData = [];
		
	var loadData = function(tree, subs, callback){
		table.showLoading();
		var url = ATTR.ctrl + '/getData';
		var data = { rootId: tree ? rootId : null, pid: subs ? pid : null };
		$.post(url, data, function(res){
			var data = res.data;
			if(tree){
				treeData = data.tree;
				list.load(treeData);
			}
			if(subs){
				subsData = data.subs;
				table.load(subsData);
			}
			if(Kit.isFunction(callback)) callback();
			table.hideLoading();
		});
	}
	
	var showForm = function(ind){

		var deptTemp = Kit.isEmpty(ind) ? { pid: pid, logic: 0 } : subsData[ind];
		var deptMap = {}, tab, begin;
		var tabs = ' ├───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼───┼──';
		$.each(treeData, function(i, d){
			tab = (d.path.split('_').length - 1) * 4;
			d.cap = tabs.substring(0, tab) + '◾ ' + d.caption;
			deptMap[d.id] = d;
		});
		
		var maskForm = Mask().form({
			title: Kit.isEmpty(ind) ? '添加部门' : '修改部门',
			action: ATTR.ctrl + '/formEvent',
			ajax: true,
			columns: [{
	            field: 'pid',
	            title: '上级部门',
	            visible: false
			}, {
	            field: 'logic',
	            title: '部门性质',
	            type: 'radio',
	            options: [{key:0,value:'真实部门'}, {key:1,value:'逻辑部门'}],
	            defaultValue: 0,
	            required: true,
	            visible: false,//Kit.isEmpty(ind),
	            events: {
					ifClicked: function(evt) {
						var logic = $(this).val();
						toggleLogic(logic);
					}
	            }
			}, {
	            field: 'logicId',
	            title: '逻辑部门',
	            type: 'select',
	            options: treeData,
	            optionsKey: 'id',
	            optionsValue: 'cap',
	            required: true,
	            events: {
					change: function(evt) {
						var selId = $(this).val();
						var dept = deptMap[selId];
						maskForm.box.find('.group-logicPath input').val(dept.path);
						maskForm.box.find('.group-caption input').val(dept.caption);
					}
	            }
			}, {
	            field: 'logicPath',
	            title: '逻辑路径',
	            visible: false
			}, {
	            field: 'typeCode',
	            title: '部门类型',
	            type: 'select',
	            options: types,
	            optionsKey: 'code',
	            optionsValue: 'caption',
	            selectTextField: 'typeCaption'
			}, {
	            field: 'code',
	            title: '部门代码'
			}, {
	            field: 'caption',
	            title: '部门名称',
	            required: true
			}, {
	           	field: 'abbr',
	            title: '部门简称'
			}, {
	           	field: 'summary',
	            title: '部门描述',
	            type: 'textarea'
			}, {
				field: 'x',
				type: 'hline'
			}, {
	           	field: 'index',
	            title: '默认首页',
	            placeholder: '该部门的成员登录后默认页面，默认保持为空即可'
			}, {
	           	field: 'assCode1',
	            title: '关联代码1',
	            placeholder: '备用字段，主要用于和第三方系统对接时进行关联映射'
			}, {
	           	field: 'assCode2',
	            title: '关联代码2',
	            placeholder: '备用字段，主要用于和第三方系统对接时进行关联映射'
			}, {
	           	field: 'assCode3',
	            title: '关联代码3',
	            placeholder: '备用字段，主要用于和第三方系统对接时进行关联映射'
			}, {
				field: 'y',
				type: 'hline'
			}, {
	           	field: 'gpsCoords',
	            title: 'GPS坐标位置',
				events: {
					dblclick: function(evt) {
						window.open('https://lbs.qq.com/tool/getpoint/getpoint.html', '_blank');
					}
				},
	            placeholder: '双击打开GPS坐标选择界面，主要用于定位识别'
			}, {
	           	field: 'gpsRadius',
	            title: 'GPS区域半径',
	            type: 'number',
	            placeholder: '单位：米，主要用于位置判断'
			}, {
	           	field: 'level',
	            title: '部门级别',
	            type: 'number',
	            defaultValue: 1,
	            visible: false
	   		}],
	   		callback: function(ret, res){
	   			if(!res.state){
	   				Mask().alert(res.msg);
	   			}else{
	   				maskForm.hide();
	   				loadData(true, true);
	   			}
	   		}
		}, deptTemp);
		
		var toggleLogic = function(logic){
			if(logic == 1){
				maskForm.box.find('.group-logicId').removeClass('hidden');
				maskForm.box.find('.group-code').addClass('hidden');
				maskForm.box.find('.group-caption').addClass('hidden');
				maskForm.box.find('.group-abbr').addClass('hidden');
				maskForm.box.find('.group-summary').addClass('hidden');
				maskForm.box.find('.group-typeCode').addClass('hidden');
				maskForm.box.find('.group-index').addClass('hidden');
				maskForm.box.find('.group-gpsCoords').addClass('hidden');
				maskForm.box.find('.group-gpsRadius').addClass('hidden');
				maskForm.box.find('.group-assCode1').addClass('hidden');
				maskForm.box.find('.group-assCode2').addClass('hidden');
				maskForm.box.find('.group-assCode3').addClass('hidden');
			}else{
				maskForm.box.find('.group-logicId').addClass('hidden');
				maskForm.box.find('.group-code').removeClass('hidden');
				maskForm.box.find('.group-caption').removeClass('hidden');
				maskForm.box.find('.group-abbr').removeClass('hidden');
				maskForm.box.find('.group-summary').removeClass('hidden');
				maskForm.box.find('.group-typeCode').removeClass('hidden');
				maskForm.box.find('.group-index').removeClass('hidden');
				maskForm.box.find('.group-gpsCoords').removeClass('hidden');
				maskForm.box.find('.group-gpsRadius').removeClass('hidden');
				maskForm.box.find('.group-assCode1').removeClass('hidden');
				maskForm.box.find('.group-assCode2').removeClass('hidden');
				maskForm.box.find('.group-assCode3').removeClass('hidden');
			}
		}
		
		toggleLogic(deptTemp.logic);
	}
	
	var showFormBatch = function(ids){
		var maskForm = Mask().form({
			title: '批量修改部门信息',
			action: ATTR.ctrl + '/formEventBatch',
			ajax: true,
			columns: [
				{
					field: 'ids',
					visible: false,
					defaultValue: ids
				}, {
		            field: 'typeCode',
		            title: '部门类型',
		            type: 'select',
		            options: types,
		            optionsKey: 'code',
		            optionsValue: 'caption',
		            selectTextField: 'typeCaption'
				}, {
		           	field: 'index',
		            title: '默认首页',
		            placeholder: '部门内的成员登录后默认页面，默认保持为空即可'
				}, {
		           	field: 'gpsCoords',
		            title: 'GPS坐标位置',
					events: {
						dblclick: function(evt) {
							window.open('https://lbs.qq.com/tool/getpoint/getpoint.html', '_blank');
						}
					},
		            placeholder: '双击打开GPS坐标选择界面，主要用于定位识别'
				}, {
		           	field: 'gpsRadius',
		            title: 'GPS区域半径',
		            type: 'number',
		            placeholder: '单位：米，主要用于位置判断'
				}
			],
	   		callback: function(ret, res){
	   			if(!res.state){
	   				Mask().alert(res.msg);
	   			}else{
	   				maskForm.hide();
	   				loadData(false, true);
	   			}
	   		}
		}, {});
	}

	//操作状态缓存（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 list = List('.tree-container', {
		title: '组织架构',
		active: function(ind, row){
			return pid === row.id;
		},
		event: {
			selected: function(ind, row){
				if(row.id == pid) return false;
				if(activeData.active == 'move'){ //移动到
					Mask().confirm({
						content: '确定要将其移动到：<b>' + row.caption + '</b> 吗？',
						callback: function(){
							pid = row.id
							table.showLoading();
							var paras = { pid, ids: activeData.ids };
							$.post(ATTR.ctrl + '/move', paras, function(res){
								table.hideLoading();
								endActive();
								loadData(true, true, 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 = row.id
					loadData(false, true);
				}
			}
		}
	}).load([]);
	
	var table = Table('.table-container', {
		title: '下级部门',
		checkMulti: true,
		columns: [{
            field: 'typeCaption',
            title: '部门类型',
            align: 'center'
		}, {
           	field: 'code',
            title: '部门代码',
            align: 'center',
            formatter: function(val, row){
            	return row.logic == 1 ? '<code>逻辑部门</code>' : val;
            }
		}, {
            field: 'caption',
            title: '部门名称'
		}, {
           	field: 'abbr',
            title: '部门简称',
            align: 'center'
		}, {
           	field: 'summary',
            title: '部门描述',
            visible: false
		}, {
           	field: 'index',
            title: '默认首页',
            visible: false
		}, {
           	field: 'assCode1',
            title: '关联代码1',
            visible: false
		}, {
           	field: 'assCode2',
            title: '关联代码2',
            visible: false
		}, {
           	field: 'assCode3',
            title: '关联代码3',
            visible: false
		}, {
           	field: 'level',
            title: '部门级别',
            visible: false
		}, {
           	field: 'gpsCoords',
            title: 'GPS坐标位置',
            visible: false
		}, {
           	field: 'gpsRadius',
            title: 'GPS区域半径（米）',
            visible: false
   		}],
   		btns: {
   			back: { used: false },
   			add: {
   				used: true,
   				click: function(){
   					var d = Kit.findArr(treeData, pid, 'id');
   					if(d.logic){
   						Mask().alert('无法在逻辑机构下面创建子机构！');
   						return;
   					}
   					showForm(null);
   				}
   			},
   			modify: {
   				used: true,
   				click: function(){
					var inds = table.getSelectedInd();
					if(inds.length == 0){
						Mask().alert({ content: '请选择要修改的数据' });
						return;
					}
					if(inds.length == 1){
		   				showForm(inds[0]);
					}else{
						showFormBatch(table.getSelectedId().join(','));
					}
   				}
   			},
   			remove: {
   				used: true,
   				click: function(){
					var ids = table.getSelectedId();
					if(ids.length == 0){
						Mask().alert({ content: '请选择至少一条数据' });
						return;
					}
					Mask().alert({
						content: '确定要删除选定的部门吗？',
						callback: function(){
			   				$.post(ATTR.ctrl + '/remove', { ids: ids.join(',') }, function(res){
		   						if(!res.state){
		   							Mask().alert(res.msg);
		   						}else{
		   			   				loadData(true, true);
		   						}
		   					})
						}
					})
   				}
   			},
   			sortUp: {
   				used: true,
   				click: function(){
					var ids = table.getSelectedId();
					if(ids.length == 0){
						Mask().alert({ content: '请选择至少一条数据' });
						return;
					}
					table.showLoading();
  					var paras = { pid, ids: ids.join(','), opt: 'UP'};
					$.post(ATTR.ctrl + '/sort', paras, function(res){
						table.hideLoading();
						loadData(true, true, 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({ content: '请选择至少一条数据' });
						return;
					}
					table.showLoading();
  					var paras = { pid, ids: ids.join(','), opt: 'DOWN'};
					$.post(ATTR.ctrl + '/sort', paras, function(res){
						table.hideLoading();
						loadData(true, true, 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();
   				}
   			},
   			imports: { 
   				used: true,
   				caption: '批量导入',
   				cls: 'btn btn-success btn-sm',
   				icon: 'fa fa-cloud-upload',
   				float: 'right',
   				click: function(){ Kit.go(ATTR.ctrl + '/imports?pid=' + pid) }
   			}
   		}
	}).load([]);
	
	loadData(true, true);
	
});
</script>
#end