<%--
  Class Name : EgovOrgChartManage.jsp
  Description : 조직도 관리 화면
  Modification Information
 
      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2018.06.11   ITN              최초 생성
 
    author   : ITN
    since    : 2018.06.11
--%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="egovframework.com.cmm.service.EgovProperties"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko">
<link href="<c:url value='/'/>css/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
<style>
.jstree_orgChart {
	overflow: auto;
	border: 1px solid silver;
	min-height: 100px;
	width: 250px;
}
</style>
<script src="<c:url value='/js/jquery-1.12.4.min.js' />"></script>
<script src="<c:url value='/js/jstree.min.js' />"></script>
<script src="<c:url value='/js/EgovCmmUtl.js' />"></script>
<script>
// 부서 해당 직원 정보 리스트
function fn_select_part(empData, partIdx, upperIdxs) {
	upperIdxs = upperIdxs.join("|");
	var tmpHtml = "";
	for (var i = 0; i < empData.length; i++) {
		/* var btnModfy = "<a href='#LINK' onclick='javascript:fn_select_emp(" + empData[i].paIdx + ", " + empData[i].partIdx + ", \"" + upperIdxs + "\"); return false;'>수정</a>";
		var btnDelete = "<a href='#LINK' onclick='javascript:fn_delete_empInf(" + empData[i].paIdx + ", " + empData[i].partIdx + "); return false;'>삭제</a>"; */
		var btnModfy = "<button class='r_button' style='line-height:0px;' onclick='javascript:fn_select_emp(" + empData[i].paIdx + ", " + empData[i].partIdx + ", \"" + upperIdxs + "\"); return false;'>수정</button>";
		var btnDelete = "<button class='d_button' style='line-height:0px;' onclick='javascript:fn_delete_empInf(" + empData[i].paIdx + ", " + empData[i].partIdx + "); return false;'>삭제</button>";
		tmpHtml += "<tr id='emp_"+ empData[i].paIdx +"'>";
		tmpHtml += "<td>" + (i+1) + "</td>";
		tmpHtml += "<td>" + empData[i].paGrade + "</td>";
		tmpHtml += "<td>" + empData[i].paName + "</td>";
		tmpHtml += "<td>" + empData[i].paTel + "</td>";
		tmpHtml += "<td>" + empData[i].paJob + "</td>";
		tmpHtml += "<td>" + empData[i].sortOrd + "</td>";
		tmpHtml += "<td>" + btnModfy + "</td>";
		tmpHtml += "<td>" + btnDelete + "</td>";
		tmpHtml += "</tr>";
	}
	
	$("#tbEmpList>tbody").html(tmpHtml);
	
	
	$("#selectPartIdx").val(partIdx);
	$("#selectPartParents").val(upperIdxs);
	
	fn_add_emp();
}

// 직원 수정 상세
function fn_select_emp(paIdx, partIdx, parentIds) {
	fn_set_emp_part(partIdx, parentIds);
	
	$("#empFormTitle").text("직원 수정 상세");
	$("input[name='paIdx']").val(paIdx);
	$("input[name='paGrade']").val($("#emp_"+paIdx+">td:eq(1)").text());
	$("input[name='paName']").val($("#emp_"+paIdx+">td:eq(2)").text());
	$("input[name='paTel']").val($("#emp_"+paIdx+">td:eq(3)").text());
	$("input[name='paJob']").val($("#emp_"+paIdx+">td:eq(4)").text());
	$("input[name='sortOrd']").val($("#emp_"+paIdx+">td:eq(5)").text());
}

// 직원 상세 초기화
function fn_add_emp() {
	var partIdx =$("#selectPartIdx").val();
	var upperIdxs = $("#selectPartParents").val();

	// 직원 상세 초기화
	document.empInfForm.reset();
	$("#empFormTitle").text("직원 추가등록 상세");
	$("input[name='paIdx']").val("");
	
	fn_set_emp_part(partIdx, upperIdxs);
}

// 직원 상세 - 부서 선택박스 셋팅
function fn_set_emp_part(partIdx, parentIds) {
	fn_add_emp_part(0, 1);
	
	//	parentIds : ....(부모3id)|(부모2id)|(부모1id)|# : jstree parents 정보. 해당 노드의 부모들 ID. #은 최상위(우체국물류지원단)  
	var upperIdxs = (partIdx+"|"+parentIds).split("|");
	var depth = 1;
	for (var i = upperIdxs.length-3; i >= 0; i--) {
		$("select[depth="+depth+"]").val(upperIdxs[i]);
		fn_select_emp_part($("select[depth="+depth+"]"));
		depth++;
	}
}

// 직원 상세 - 부서 선택박스 변경 시
function fn_select_emp_part(obj) {
	var selectId = $(obj).children("option:selected").val();
	var selectDepth = $(obj).children("option:selected").attr("depth");
	fn_add_emp_part(selectId, eval(selectDepth)+1);
}

// 직원 상세 - 부서 선택박스 추가
function fn_add_emp_part(upperIdx, depth) {
	var instance = $('#kopost_organization').jstree(true);
	var partInfList = instance.get_json('#', { 'flat': true });
	var selectPart = $("select[depth="+ depth +"]");
	
	// 하위 부서 삭제
	if (selectPart.length > 0 ) {
		var partSelects = $("select[id^='depth']");
		for (var i = 0; i < partSelects.length; i++) {
			if ($(partSelects[i]).attr("depth") >= depth) {
				$(partSelects[i]).remove();
			}
		}
	}
	
	var tmpHtml = "<select id='depth_" + depth + "'"
							+" depth=" + depth
							+" onChange='fn_select_emp_part(this);' >";
	tmpHtml += "<option value='' depth=" + depth + ">선택</option>"				
	var partCnt = 0;
	for (var i = 0; i < partInfList.length; i++) {
		if (partInfList[i].parent == upperIdx) {
			tmpHtml += "<option value='" + partInfList[i].id + "' depth=" + partInfList[i].li_attr.depth + ">" + partInfList[i].text +"</option>"
			partCnt++;
		}
	}
	tmpHtml += "</select>";
	
	// 하위 부서 없을 시 리턴
	if (partCnt == 0) return;
	
	$("#select_part").append(tmpHtml);
}

// 직원정보 init
function fn_init_empInf() {
	$("#selectPartIdx").val("");
	$("#selectPartParents").val("");
	$("#tbEmpList>tbody").html("");
	fn_add_emp();
}

// 직원 정보 저장. 등록/수정
function fn_save_empInf() {
	var empInfForm = document.empInfForm;
	// 최종 선택 부서ID
	var selectedDepths = $("select[id^=depth_] option:selected[value!='']");

	if (selectedDepths.length == 0) { alert("부서를 선택해주세요."); return; }
	if (empInfForm.sortOrd.value == "") { alert("순번을 입력해주세요."); return; }
	if (!isNumber(empInfForm.sortOrd.value, "순번 숫자")) { return };
	
	var partIdx = selectedDepths[selectedDepths.length-1].value;
	empInfForm.partIdx.value = partIdx;
	var paIdx = empInfForm.paIdx.value;
	var url = "";
	if (empInfForm.paIdx.value == "") {
		url = "<c:url value='/cop/org/insertEmpInfAjax.do'/>";
		//ajax 전송 시 VO 변수 타입과 매칭되어. int 셋팅
		empInfForm.paIdx.value="0";
	} else {
		url = "<c:url value='/cop/org/updateEmpInfAjax.do'/>";
	}
	
	var params = $(empInfForm).serialize();
	
	$.ajax({
		type:"POST",
		"url":url,
		data:params,
		dataType:'jsonp',
		//timeout:(1000*30),
		success : function(returnData, status) {
			if (status == "success") {
				// 직원 목록 갱신
				var selectPartIdx = $('#kopost_organization').jstree(true).get_node(partIdx).a_attr.id;
				$("#" + selectPartIdx).trigger("click");
				
				alert("직원 정보가 저장 되었습니다.");
			} else { alert("ERROR"); return;} 
		},
		error : function(request , status, error) {
			alert("직원 정보 저장이 실패되었습니다.");
			//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		},
		complete : function () {
			
		}
	});
}

// 직원 정보 삭제
function fn_delete_empInf(paIdx, partIdx) {
	if (confirm("직원 정보를 삭제 하시겠습니까?")) {
		$.ajax({
			type:"POST",
			"url" : "<c:url value='/cop/org/deleteEmpInfAjax.do'/>",
			data:{ "paIdx" : paIdx },
			dataType:'jsonp',
			//timeout:(1000*30),
			success : function(returnData, status) {
				if (status == "success") {
					// 직원 목록 갱신
					var instance = $('#kopost_organization').jstree(true);
					$("#" + instance.get_node(partIdx).a_attr.id).trigger("click");
					
					alert("직원 정보가 삭제 되었습니다.");
				} else { alert("ERROR"); return;} 
			},
			error : function(request , status, error) {
				alert("부서 정보 조회가 실패되었습니다.");
				//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
			},
			complete : function () {
				
			}
		});
	}
}
/*********************************
 * jstree
 *********************************
 */
function jstreeInit() {
	$('#kopost_organization').jstree({
		"core" : {
			"animation" : 0,
			"multiple" : false,
			"check_callback" : true, 
			"themes" : { "stripes" : true },
			"data" : {
				"url" : "<c:url value='/cop/org/orgChartPartListAjax.do'/>",
				"dataType" : "json",
				"data" : function (node) {
					return {'id' : node.id};
				}
			}
		},
		"types" : {
			"#" : {
				/* "max_children" : 4, */
				"max_depth" : 5,
				"valid_children" : ["root"]
			},
			"root" : {
				//"icon" : "/static/3.3.5/assets/images/tree_icon.png",
				"icon" : "glyphicon glyphicon-flash",
				"valid_children" : ["default"]
			},
		    "default" : {
				"valid_children" : ["default","file"]
		    },
		    "file" : {
				//"icon" : "glyphicon glyphicon-file",
				"icon" : "jstree-file",
				"valid_children" : []
			}
		},
		"plugins" : [
			"contextmenu", "dnd", "search",
			"types"
			//, "unique"
			//, "wholerow"
		],
		'contextmenu' : {
			items : function(node) {
				var items = $.jstree.defaults.contextmenu.items();
				delete items.ccp;
				 
				// 우체국물류지원단 우클릭 시 '부서 추가' 메뉴만 제외하고 제거
				if (node.id == "0") {
					items.create.separator_after = false;
					delete items.remove;
					delete items.rename;
				}
				
				return items;
			}
		}
	})
	.bind('refresh.jstree', function(e, data) {
		$(this).jstree(true).open_all();
	})
	.bind('before.jstree', function(e, data) {
		//console.log("jstree before");
	})
	.bind('loaded.jstree', function(e, data) {
		//console.log("jstree loaded");
		$(this).jstree(true).open_all();
		fn_add_emp();
	})
	.on('deselect_all.jstree', function (e, data) {
		fn_init_empInf();
	})
	.on('select_node.jstree', function (e, data) {
		/*  부서 선택 */
		var partIdx = data.node.id;
		$("#partNm").text(data.node.text);
		
		$.ajax({
			type:"POST",
			url:"<c:url value='/cop/org/selectPartEmpInfAjax.do' />",
			data:{ "partIdx" : partIdx },
			dataType:'jsonp',
			//timeout:(1000*30),
			success : function(returnData, status) {
				if (status == "success") {
					//console.log(returnData);
					var empData = returnData.empList;
					var partData = returnData.partList;
					//partInfList = partData;
					
					fn_select_part(empData, partIdx, data.node.parents);
				} else { alert("ERROR"); return;} 
			},
			error : function(request , status, error) {
				alert("부서 정보 조회가 실패되었습니다.");
				//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
			},
			complete : function () {
				
			}
		});
	})
	.on('delete_node.jstree', function (e, data) {
		/* 부서 삭제 */
		if (confirm("[" + data.node.text + "]" + " 부서 삭제 시 하위 부서 및 직원정보 전체가 삭제됩니다. 삭제 하시겠습니까?")) {
			$.ajax({
				type:"POST",
				url:"<c:url value='/cop/org/deletePartAjax.do' />",
				data:{ "partIdx" : data.node.id },
				dataType:'jsonp',
				//timeout:(1000*30),
				success : function(returnData, status) {
					if (status == "success") {
						alert("부서 정보가 삭제되었습니다.");
						fn_init_empInf();
					} else { alert("ERROR"); return;} 
				},
				error : function(request , status, error) {
					alert("부서 정보 삭제가 실패되었습니다.");
					//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
				},
				complete : function () {
					data.instance.refresh();
				}
			});
		} else {
			data.instance.refresh();
		}
	})
	.on('rename_node.jstree', function (e, data) {
		var nodeId = data.node.id; 
		var oldText = data.old;
		var newText = data.text;
		
		if (nodeId > 0) {
			/* 부서명 변경 */
			if (oldText != newText) {
				//if (confirm("[" + oldText + "]" + "부서를 " + "[" + newText + "]" + "로 변경하시겠습니까?" )) {
				if (confirm("부서명을 변경하시겠습니까?" )) {
					$.ajax({
						type:"POST",
						url:"<c:url value='/cop/org/updatePartTitleAjax.do' />",
						data:{ "partIdx" : nodeId, "partTitle" :  newText },
						dataType:'jsonp',
						//timeout:(1000*30),
						success : function(returnData, status) {
							if (status == "success") {
								alert("부서명이 변경되었습니다.");
							} else { alert("ERROR"); return;} 
						},
						error : function(request , status, error) {
							alert("부서명 변경이 실패되었습니다.");
							//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
						},
						complete : function () {
							data.instance.refresh();
						}
					});
				} else {
					data.instance.refresh();
				}
			}
		} else {
			/* 부서 추가 */
			var instance = data.instance;
			var partTitle = data.text;
			var upperIdx = data.node.parent;
			var sortOrd = 1;
			var childrenNodes = instance.get_node(upperIdx).children;
			
			// 하위 부서 있을 시 마지막 부서 sort_ord + 1
			if (childrenNodes.length > 1) {
				var lastChildrenNode = instance.get_node(childrenNodes[childrenNodes.length - 2]);
				sortOrd = lastChildrenNode.li_attr.sortOrd + 1;
			}
			
			//console.log("신규 추가| upperIdx:" + upperIdx + " sortOrd:" + sortOrd);
			$.ajax({
				type:"POST",
				url:"<c:url value='/cop/org/insertPartInfAjax.do' />",
				data:{ "partTitle" : partTitle, "upperIdx" :  upperIdx,  "sortOrd" : sortOrd},
				dataType:'jsonp',
				//timeout:(1000*30),
				success : function(returnData, status) {
					if (status == "success") {
						//alert("[" + partTitle + "]" + " 부서가 추가 되었습니다.");
						alert("부서가 추가 되었습니다.");
					} else { alert("ERROR"); return;}
				},
				error : function(request , status, error) {
					alert("부서 추가가 실패되었습니다.")
					//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
				},
				complete : function () {
					data.instance.refresh();
				}
			});
		}
	})
	.on('move_node.jstree', function (e, data) {
		/* 부서 위치 변경 */
		if (confirm("부서 위치를 변경하시겠습니까?" )) {
			var partIdx = data.node.id;
			var upperIdx = data.parent;
			var sortOrd = 1;
			var incrsSortOrd = 0;
			
			var instance = data.instance;
			var position = data.position;
			var parentNode = instance.get_node(upperIdx); 
			
			// sortOrd - 정렬순번 채번 및 전체 증가 필요 체크
			if (parentNode.children.length > 1) {
				if (position != 0) {
					var prevNodeOrd = instance.get_node(parentNode.children[position - 1]).li_attr.sortOrd;
					sortOrd = prevNodeOrd + 1;
				}
				
				var nextNode = instance.get_node(parentNode.children[position + 1]);
				if (nextNode && sortOrd == nextNode.li_attr.sortOrd) {
					incrsSortOrd = sortOrd;
				}
			}
			
			//console.log("위치변경| sortOrd:" + sortOrd + " incrsSortOrd:" + incrsSortOrd);
			$.ajax({
				type:"POST",
				url:"<c:url value='/cop/org/updatePartOrderAjax.do' />",
				data:{ "partIdx" : partIdx, "upperIdx" :  upperIdx,  "sortOrd" : sortOrd, "incrsSortOrd" : incrsSortOrd},
				dataType:'jsonp',
				//timeout:(1000*30),
				success : function(returnData, status) {
					if (status == "success") {
						alert("부서 위치가 변경되었습니다.");
					} else { alert("ERROR"); return;}
				},
				error : function(request , status, error) {
					alert("부서 위치 변경이 실패되었습니다.");
					//alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
				},
				complete : function () {
					data.instance.refresh();
				}
			});
		} else {
			data.instance.refresh();
		}
	})
	.on('changed.jstree', function (e, data) {
		if (data && data.selected && data.selected.length) {
			/* $.get('?operation=get_content&id=' + data.selected.join(':'), function (d) {
			});  */
			//$('#kopost_data .default').text(data.selected.join(':')).show();
		}
		else {
			//$('#kopost_data .content').hide();
			//$('#kopost_data .default').text('Select a file from the tree.').show();
		}
	});
}
	
$( document ).ready(function() {
	jstreeInit();
});
</script>
<title>조직도 관리</title>
</head>
<body>
<div class="ad_content">
	<div class="ad_con_head">
		<div class="ad_head_text">
			<p class="today_txt">조직도 관리</p>
			<div class="ad_head_ment">
				<p class="today_last_txt"><span id="cnt_cate_list"></span></p>
			</div>
		</div>
	</div>

	<div class="ad_organcon">
	
		<!-- 조직도 관리 시작 -->
		<div class="organ_leftbox">
			<!-- <button id="evts_button_open_all">open all</button> -->
			<div id="kopost_organization" class="jstree_orgChart"></div>
		</div>
	
		<div class="organ_rightbox">
			<div class="organ_righthead" id="partNm">부서선택</div>
			<button class="main1_btn main1_save_btn" style="float: right; margin-bottom: 5px;" onclick="javascript:fn_add_emp(); return false;">
				직원추가
			</button>
			
			<table id="tbEmpList">
				<%-- <colgroup>
					<col width="8%">
					<col width="8%">
					<col width="10%">
					<col width="23%">
					<col width="26%">
					<col width="9%">
					<col width="8%">
					<col width="8%">
				</colgroup> --%>
				<thead>
					<tr>
						<th>번호</th>
						<th>직위</th>
						<th>이름</th>
						<th>전화번호</th>
						<th>업무</th>
						<th>순번</th>
						<th>수정</th>
						<th>삭제</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			
			<input type="hidden" id="selectPartIdx" />
			<input type="hidden" id="selectPartParents" />
			<form name="empInfForm">
				<p class="reply_emp" id="empFormTitle">직원 추가등록 상세</p>
				<div class="emp_div2">
					<table class="emp_table">
						<colgroup>
							<col style="width:150px;"/>
							<col style="width:500px;"/>
						</colgroup>
						<tr>
							<th>부서</th>
							<td>
								<div id="select_part">
									<input type="hidden" name="partIdx" />
									<input type="hidden" name="paIdx" />
								</div>
							</td>
						</tr>
						<tr>
							<th>직위</th>
							<td>
								<input type="text" name="paGrade" />
							</td>
						</tr>
						<tr>
							<th>성명</th>
							<td>
								<input type="text" name="paName" />
							</td>
						</tr>
						<tr>
							<th>전화번호</th>
							<td>
								<input type="text" name="paTel" />
							</td>
						</tr>
						<tr>
							<th>담당업무</th>
							<td>
								<input type="text" name="paJob" />
							</td>
						</tr>
						<tr>
							<th>순번</th>
							<td>
								<input type="text" name="sortOrd" />
							</td>
						</tr>
					</table>
					<ul class="btn_li2" style="width: unset;">
						<li><button class="main1_btn main1_save_btn" onClick="javascript:fn_save_empInf(); return false;" >저 장</button></li>
					</ul>
				</div>
			</form>
		</div>
		<!-- //조직도 관리 끝 -->
	</div>
</div>
</body>
</html>