<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<c:set var="prefixName" scope="request">기관 정보</c:set>
              <!-- Page Body -->
    <div class="d-flex flex-column flex-grow-1">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
        
			<div class="d-flex flex-row justify-content-evenly">
				<div style="width:49%;">
				<h5 class="mt-3">${prefixName}</h5>
				<div class="d-flex flex-row justify-content-between p-3">
					<%--div>
						<div class="input-group" id="${infoPrefix}-query">
							<select id="${infoPrefix}by" name="by" onchange="document.getElementById('${infoPrefix}term').focus();" aria-controls="DataTables_Table_0" class="form-select">
								<option value="sggName">이름</option>
								<option value="sggID">아이디</option>
							</select>
							<input id="${infoPrefix}term" name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
						</div>
					</div--%>
					<div>
						<%--button onclick="searchSggs();" class="btn btn-primary">찾기</button--%>
						<button onclick="sggDeptControl.newSgg();" class="btn btn-primary">+ 추가</button>
						<button id="btnRemoveSggs" onclick="removeSggs();" class="btn btn-primary">- 제거</button>
					</div>
				</div>
				<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
					<thead id="sggThead">
						<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input onchange="sggDeptControl.sggs.select(this.checked);" type="checkbox" class="form-check-input"></th>
							<th class="text-center sorting sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="2" aria-sort="ascending">시군구</th>
							<th class="text-center sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="2">기관</th>
						</tr>
                    </thead>
                    <tbody id="sggList">
					</tbody>
                   	<template id="sggRow">
                   	<tr data-key="{SGG_CD}"{notUsed}>
                       <td style="text-align:center;"><input value="{SGG_CD}" onchange="sggDeptControl.sggs.select('{SGG_CD}', this.checked);" type="checkbox" class="form-check-input"></td>
                       <td onclick="sggDeptControl.sggs.setCurrent('{SGG_CD}')" ondblclick="sggDeptControl.sggs.getInfo({})">{SGG_CD}</td>
                       <td onclick="sggDeptControl.sggs.setCurrent('{SGG_CD}')" ondblclick="sggDeptControl.sggs.getInfo({})">{SGG_NM}</td>
                       <td onclick="sggDeptControl.sggs.setCurrent('{SGG_CD}')" ondblclick="sggDeptControl.sggs.getInfo({})">{INST_CD}</td>
                       <td onclick="sggDeptControl.sggs.setCurrent('{SGG_CD}')" ondblclick="sggDeptControl.sggs.getInfo({})">{INST_NM}</td>
                    </tr>
                    </template>
                   	<template id="sggNotFound">
					<tr class="odd">
						<td valign="top" colspan="5" class="dataTables_empty text-center">${prefixName}를 찾지 못했습니다.</td>
					</tr>
                    </template>
				</table>
				<div class="d-flex flex-row p-3 justify-content-between">
					<label id="sggPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
	                 <ul id="sggPaging" class="pagination pagination-primary">
	                 </ul>
				</div>
				</div>
				<div style="width:49%;">
				<h5 class="mt-3">부서 정보</h5>
				<div class="d-flex flex-row justify-content-end p-3">
					<div>
						<button id="btnAddDept" onclick="sggDeptControl.newDept();" class="btn btn-primary">+ 추가</button>
						<button id="btnRemoveDepts" onclick="removeDepts();" class="btn btn-primary">- 제거</button>
					</div>
				</div>
				<table class="datatables-ajax table table-bordered dataTable no-footer" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info">
					<thead id="deptThead">
						<tr><th tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="text-align:center;"><input id="deptToggler" onchange="sggDeptControl.depts.select(this.checked);" type="checkbox" class="form-check-input"></th>
							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1">부서코드</th>
							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1">부서이름</th>
							<th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1">전화번호</th>
						</tr>
                    </thead>
                    <tbody id="deptList">
					</tbody>
                   	<template id="deptRow">
                   	<tr data-key="{DEPT_CD}"{notUsed}>
                       <td style="text-align:center;"><input value="{DEPT_CD}" onchange="sggDeptControl.depts.select('{DEPT_CD}', this.checked);" type="checkbox" class="form-check-input"></td>
                       <td onclick="sggDeptControl.depts.setCurrent('{DEPT_CD}')" ondblclick="sggDeptControl.depts.getInfo({})">{DEPT_CD}</td>
                       <td onclick="sggDeptControl.depts.setCurrent('{DEPT_CD}')" ondblclick="sggDeptControl.depts.getInfo({})">{DEPT_NM}</td>
                       <td onclick="sggDeptControl.depts.setCurrent('{DEPT_CD}')" ondblclick="sggDeptControl.depts.getInfo({})">{DEPT_TELNO}</td>
                    </tr>
                    </template>
                   	<template id="deptNotFound">
					<tr class="odd">
						<td valign="top" colspan="4" class="dataTables_empty text-center">부서 정보를 찾지 못했습니다.</td>
					</tr>
                    </template>
				</table>
				<div class="d-flex flex-row p-3 justify-content-between">
					<label id="deptPagingInfo" class="dataTables_info" role="status" aria-live="polite"></label>
	                 <ul id="deptPaging" class="pagination pagination-primary">
	                 </ul>
				</div>
				</div>
			</div>
		</div>
    </div>
              <!--/ Page Body -->
<script >
var sggDeptControl = new SggDeptControl();
sggDeptControl.sggs.query = {includeAll: true};
<%--
function searchSggs() {
	sggDeptControl.sggs.query = {
		by:$("#${infoPrefix}-query [name='by']").val(),
		term:$("#${infoPrefix}-query [name='term']").val()
		includeAll: true
	};
	sggDeptControl.sggs.load(1);
}--%>

function removeSggs() {
	dialog.alert({
		content:"선택한 ${prefixName} 정보를 제거하시겠습니까?",
		onOK:() => {
			sggDeptControl.sggs.remove();
		}
	});
}

function removeDepts() {
	dialog.alert({
		content:"선택한 코드를 삭제하시겠습니까?",
		onOK:() => {
			sggDeptControl.depts.remove();
		}
	});
}

function renderSggList() {
	let sggList = sggDeptControl.sggs.dataset;
	let empty = sggList.empty;
	
	let trs = empty ?
		[document.getElementById("sggNotFound").innerHTML] : <%-- from template#sggNotFound --%>
		sggList.inStrings(
				document.getElementById("sggRow").innerHTML,
				(tmpl, item) => tmpl.replace(/{notUsed}/gi, item.getValue("USE_YN") == "N" ? "class=\"not-used\"" : "")
			); <%-- from template#sggRow --%>
	$("#sggList").html(trs.join());
	$("#sggThead").find("th input[type='checkbox']").prop("checked", false);
	$("#deptThead").find("th input[type='checkbox']").prop("checked", false);
}

sggDeptControl.sggs.onDatasetChange = obj => {
	renderSggList();

	$("#sggPaging").setPaging({
		list:sggDeptControl.sggs.dataset,
		prefix:sggDeptControl.sggs.prefix,
		start:obj.sggStart,
		totalSize:obj.sggTotal,
		fetchSize:obj.sggFetch,
		func:"sggDeptControl.sggs.load({index})"
	});
};

sggDeptControl.sggs.onCurrentChange = item => {
	$("#btnAddDept").prop("disabled", !item);
	if (!item) return;
	
	let key = item.data.SGG_CD;
	$("#sggList").setCurrentRow(key);
	sggDeptControl.getDepts({includeAll: true});
};

sggDeptControl.sggs.onSelectionChange = selected => {
	let sggList = sggDeptControl.sggs.dataset;
	let keys = selected.map(e => sggList.getKey(e));
	$("#sggList input[type='checkbox']").each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
	
	$("#btnRemoveSggs").prop("disabled", keys.length < 1);
};

function renderDeptList() {
	let deptList = sggDeptControl.depts.dataset;
	let empty = deptList.empty;
	
	let trs = empty ?
		[document.getElementById("deptNotFound").innerHTML] : <%-- from template#sggNotFound --%>
		deptList.inStrings(
				document.getElementById("deptRow").innerHTML,
				(tmpl, item) => tmpl.replace(/{notUsed}/gi, item.getValue("USE_YN") == "N" ? "class=\"not-used\"" : "")
			); <%-- from template#sggRow --%>
	$("#deptList").html(trs.join());
	$("#deptToggler").prop("checked", false);
}

sggDeptControl.depts.onDatasetChange = obj => {
	renderDeptList();
	
	$("#deptPaging").setPaging({
		list:sggDeptControl.depts.dataset,
		prefix:sggDeptControl.depts.prefix,
		start:obj ? obj.deptStart : -1,
		totalSize:obj ? obj.deptTotal : 0,
		fetchSize:obj ? obj.deptFetch : 10,
		func:"sggDeptControl.depts.load({index})"
	});
};

sggDeptControl.depts.onCurrentChange = item => {
	if (!item) return;
	
	let data = item.data;
	let key = data.DEPT_CD;
	$("#deptList").setCurrentRow(key);
};

sggDeptControl.depts.onSelectionChange = selected => {
	let deptList = sggDeptControl.depts.dataset;
	let keys = selected.map(e => deptList.getKey(e));
	$("#deptList input[type='checkbox']").each(function() {
		let checkbox = $(this);
		checkbox.prop("checked", keys.includes(checkbox.val()));
	});
	
	let sgg = sggDeptControl.sggs.getCurrent();
	sgg = sgg ? sgg.USE_YN : "N";
	
	$("#btnAddDept").prop("disabled", "N" == sgg);
	$("#btnRemoveDepts").prop("disabled", selected.length < 1);
};

$(function(){
	${onload}
	sggDeptControl.sggs.setData({
		sggList:${sggList},
		sggStart:${sggStart},
		sggFetch:${sggFetch},
		sggTotal:${sggTotal}
	});
	sggDeptControl.depts.setData({
		deptList:${deptList},
		deptStart:${deptStart},
		deptFetch:${deptFetch},
		deptTotal:${deptTotal}
	});

<%-- $("#${infoPrefix}term").onEnterPress(searchSggs); --%>
});
//# sourceURL=sgg-dept.jsp
</script>