<%@ 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="pageKorName" scope="request">부서관리</c:set>
<div class="content-wrapper" data-doctx="${pageName}">
	<div class="container-xxl flex-grow-1 px-0">
		<div class="card wrapper-list">

		    <div class="container-page-btn">
		        <button type="button" name="btnReset" class="btn btn-outline-dark w-px-120" title="초기화">
		        초기화
		        </button>
		        <span class="container-window-btn-right">
		            <button type="button" name="btnSearch" class="btn btn-search w-px-120" title="검색">
		            검색
		            </button>
		        </span>
		    </div>

		    <form name="frmSearch">
		        <div class="container-search">
                    <div class="row g-1">
                        <div class="col-3">
                            <label is="name-label" for="sggCd"
                            class="form-label fw-bold form-search-title">시군구</label>
                            <select is="id-select" name="sggCd" class="form-select" disabled>
                            	<option value="">전체</option>
                            	<c:forEach items="${sggList}" var="item">
	                      			<option value="${item.SGG_CD}">${item.SGG_NM}</option>
	                      		</c:forEach>
                            </select>
                        </div>
                        <div class="col-3">
                            <label is="name-label" for="instNm"
                            class="form-label fw-bold form-search-title">기관명</label>
                            <input type="text" is="id-input" name="instNm" class="form-control" />
                        </div>
                        <div class="col-3">
                            <label is="name-label" for="instCd"
                            class="form-label fw-bold form-search-title">기관코드</label>
                            <input type="text" is="id-input" name="instCd" class="form-control" maxlength="7" />
                        </div>
                    </div>
                    <div class="row g-1">
                    	<div class="col-3">
                        	<label is="name-label" for="deptNm"
                        	class="form-label fw-bold form-search-title">부서명</label>
                            <input type="text" is="id-input" name="deptNm" class="form-control" />
                        </div>
                        <div class="col-3">
                        	<label is="name-label" for="deptCd"
                        	class="form-label fw-bold form-search-title">부서코드</label>
                            <input type="text" is="id-input" name="deptCd" class="form-control" maxlength="7" />
                        </div>
                        <div class="col-6">
                        </div>
                    </div>
		        </div>

		    </form>

		    <div>
		        <div name="gridButtonArea" class="container-page-btn">
		            <div class="d-flex flex-row justify-content-between">
						<span is="paging-info" name="deptPagingInfo" class="dataTables_info"></span>
		                <ul name="deptPaging" class="pagination pagination-primary"></ul>
					</div>
		        </div>
		    </div>

		    <div class="card-datatable text-nowrap">
		        <div name="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
					<div name="table-responsive" class="table-responsive ox-scroll oy-scroll h-px-500">
						<table name="deptTable" class="table-layout-fixed datatables-ajax table table-bordered dataTable no-footer">
							<thead class="sticky-thead">
								<tr name="deptThead">
									<th style="width: 80px;" class="cmn">No.</th>
									<th class="cmn" style="width: 56px;">
										<input type="checkbox" class="form-check-input"
										onchange="pageObject['${pageName}'].ctrl.dataset.select(this.checked);" />
									</th>
									<th style="width: 200px;">시군구명</th>
									<th style="width: 200px;">시군구코드</th>
									<th style="width: 200px;">기관명</th>
									<th style="width: 200px;">기관코드</th>
									<th style="width: 200px;">부서명</th>
									<th style="width: 200px;">부서코드</th>
									<th style="width: 200px;">사용여부</th>
									<th class="dummy-th"></th>
								</tr>
							</thead>
		                    <tbody name="deptTbody">
		                    </tbody>
							<template is="curly-brackets" name="deptRow">
								<tr data-index="DATA-INDEX">
									<td onclick ondblclick class="text-end">ROW_NUM</td>
									<td class="text-center">
										<input type="checkbox" class="form-check-input" name="gridCheckbox" value="DATA-INDEX"
										onchange="pageObject['${pageName}'].ctrl.dataset.select('{DATA-INDEX}', this.checked);">
									</td>
									<td onclick ondblclick class="text-start">SGG_NM</td>
		                    		<td onclick ondblclick class="text-center">SGG_CD</td>
		                    		<td onclick ondblclick class="text-start">INST_NM</td>
		                    		<td onclick ondblclick class="text-center">INST_CD</td>
		                    		<td onclick ondblclick class="text-start">DEPT_NM</td>
		                    		<td onclick ondblclick class="text-center">DEPT_CD</td>
		                    		<td onclick ondblclick class="text-center">USE_YN_NM</td>
		                    		<td class="dummy-td"></td>
	                    		</tr>
							</template>
							<template name="deptNotFound">
								<tr>
									<td valign="top" colspan="10" class="dataTables_empty text-center">
									부서 정보를 찾지 못했습니다.
									</td>
								</tr>
							</template>
						</table>
					</div>
				</div>
		    </div>

			<div class="toast-container position-fixed bottom-0 end-0 p-3">
				<div name="divToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
			    	<div class="toast-body bg-black text-white">
			    	  삭제 되었습니다.
			    	</div>
			  	</div>
			</div>
		</div>

	</div>

  	<div class="content-backdrop fade"></div>
</div>


<script>
LoadScript("ogdp02010Script",wctx.url("/resources/js/fims/ogdp/ogdp02010.js?ver=${ver}"));

/**************************************************************************
* Global Variable
**************************************************************************/
pageObject["${pageName}"] = newDoctxFinder("${pageName}");


$(document).ready(function(){

	var $P = pageObject["${pageName}"];

	$P.toast = new bootstrap.Toast($P.findn("divToast"), {
        animation: true,
        autohide: true,
        delay: 2000
    });

	/**************************************************************************
	* DatasetControl, DatasetSupport, FormFields
	**************************************************************************/
	var ctrl = newOgdp02020Control($P);
	ctrl.defaultFetchSize = FETCH_XS;
	ctrl.query = { pageNum : 1, fetchSize : ctrl.defaultFetchSize };

	ctrl.dataset.onDatasetChange = (obj, option) => {
		var t = $P.getGridTemplate();
		var trs = Apply.fromDataset.getTbody(ctrl.dataset, t.found, t.notFound, t.replacer);
		$P.renderDeptList(obj?.Paging?.totalSize, ctrl.dataset.length, trs, option);

		$P.pagingSupport.setPagingInfo(obj);
	};

	ctrl.dataset.onCurrentChange = (dataItem) => {
		Apply.fromDataset.currentRow(ctrl.dataset, dataItem, $P.findn("deptTbody"));
	}

	ctrl.dataset.onSelectionChange = (selectedArr) => {
		Apply.fromDataset.gridCheckbox(ctrl.dataset, $P.findn("deptTbody"), 1, selectedArr);
	};

	$P.pagingSupport = new FimsPagingSupport({
		doq: $P,
        linkContainer: "[name='deptPaging']"
	});

	/**************************************************************************
	* pageObject.function
	**************************************************************************/
	$P.fnReset = () => {
		var searchForm = $P.$findn("frmSearch");
		searchForm.find("input[type='radio']").not("[name='taskSeCd']").prop("checked", false);
		searchForm.find("input[type='checkbox']").prop("checked", false);
		searchForm.find("input[type='hidden']").val("");
		searchForm.find("input[type='text']").val("");

		searchForm.find("select[name='sggCd']").val(MY_INFO.info.sggCd);

		ctrl.dataset.setData([]);
	}

	$P.getParams = () => {
		var formFields = new FimsFormFields($P.selectorn("frmSearch"));
		var data = formFields.get();
		data.fetchSize = ctrl.defaultFetchSize;

		return data;
	}

	$P.searchDeptList = () => {
		ctrl.query = $P.getParams();
	    ctrl.load(1);
	}

	$P.scrollDeptList = () => {
		ctrl.load(ctrl.query.pageNum + 1);
	}

	$P.refreshDeptList = () => {
		if(ctrl.query.pageNum == null){
			return;
		}

        ctrl.reload({all : true});
    }

	$P.getGridTemplate = () => {
		var notFound = [$P.findn("deptNotFound").innerHTML];
		var found = $P.findn("deptRow").innerHTML;
		var replacer = (str, dataItem) => str
			.replace(/{onclick}/gi, "pageObject['${pageName}'].clickDeptList('{DATA-INDEX}');")
			.replace(/{ondblclick}/gi, "pageObject['${pageName}'].dblclickDeptList('{DEPT_CD}');");

		return {
			found : found,
			notFound : notFound,
			replacer : replacer
		};
	}

	$P.renderDeptList = (total, listLength, trs, option) => {

		let noMore = (listLength >= total);
		var initScroll = (ctrl.query.pageNum < 2);
		if(option != null && option.reloaded){
			initScroll = false;
		}

		$P.findn("table-responsive").changeContent(trs, initScroll, noMore);

	    fn_securityModeToggle($("#securityMode--top").is(":checked")); //보안모드

	}

	$P.clickDeptList = (dataIndex) => {
		if(dataIndex == ""){
			return;
		}

		$P.$findn("deptTbody").setCurrentRow(dataIndex);

		Apply.toDataset.current(ctrl.dataset, dataIndex);
	}

	$P.dblclickDeptList = (dataKey) => {
		$P.getInfo(dataKey);
	}



	$P.getInfo = (deptCd) => {
		var params = {};
		params.deptCd = deptCd;

		ajax.get({
			url : ctrl.urls.getInfo,
			data : params,
			success : (resp) => {

				let dialogName = "deptInfoDialog";
				let dialogId = dialogName+"-"+uuid();

				dialog.open({
					id : dialogId,
					title : "부서 정보",
					size : "xl",
					content : resp,
					init : () => {
						$("#"+dialogId).attr("name", dialogName);
						$("#"+dialogId).attr("data-ref-doctx","${pageName}");

						var parentRes = new Object();
						var childReq = pageObject.childReq.pop();

						for(var reqKey in childReq) {
						    if($P.provide[reqKey]){
						    	parentRes[reqKey] = $P.provide[reqKey];
						    } else {
						    	parentRes[reqKey] = function(){};
						    }
						}

						pageObject.parentRes.push(parentRes);
					}
				});

			}
		});
	}


	$P.provide = {
		"refreshList" : function(){
    		$P.refreshDeptList();
    	},
	};

	/**************************************************************************
	* element.on
	**************************************************************************/
	$P.$findn("btnReset").on('click', () => $P.fnReset());
    $P.$findn("btnSearch").on('click', () => $P.searchDeptList());

	/**************************************************************************
	* 초기화
	**************************************************************************/
	Componentization.fnMakeResizableTable($P.findn("table-responsive"));
	Componentization.fnMakeScrollableTable($P.findn("table-responsive"), $P.scrollDeptList);

	$P.fnReset();
    fn_securityModeToggle($("#securityMode--top").is(":checked")); //보안모드

	if(MY_INFO.institute == "ADMIN00"){
		$P.$findn("sggCd").removeAttr("disabled");
	}
});

</script>
