<%@ 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>

<!-- inner page html -->
<div class="content-pop">
	<!-- Content -->
	<div class="container flex-grow-1 px-0">
		<div class="card">
			<!-- 상단 버튼 -->
			<div class="container-page-btn">
				<button type="button" class="btn btn-outline-dark w-px-120" id="btnReset--${pageName}" title="초기화">
					초기화
				</button>
				<span class="container-window-btn-right">
					<button type="button" class="btn btn-search w-px-120" id="btnSearch--${pageName}" title="검색">
						검색
					</button>
					<button type="button" class="btn btn-primary w-px-120" id="btnOK--${pageName}" title="확인">
						확인
					</button>
				</span>
			</div>
			<!-- 상단 버튼 -->

			<!-- 검색 조건 영역 -->
			<form id="frmSearch--${pageName}" name="frmSearch">
				<!-- hidden -->
				<input type="text" id="sggCd--${pageName}" name="sggCd" />
				<input type="text" id="deptCd--${pageName}" name="deptCd" />

				<!-- 메인 조건 -->
				<div class="container-search">
					<div class="row g-1">
						<div class="col-6">
							<select class="form-select" id="by--${pageName}" name="by" onchange='$("#term--${pageName}").focus();'>
								<option value="${infoPrefix}Name">이름</option>
								<option value="${infoPrefix}Account">계정</option>
							</select>
							<input type="text" class="form-control" id="term--${pageName}" name="term" autofocus placeholder="조회 조건을 입력하십시오.">
						</div>
						<div class="col-6">
						</div>
					</div>
				</div>
				<!-- 메인 조건 -->
		    </form>
		    <!-- 검색 조건 영역 -->

			<!-- 업무 버튼 및 건수 표시 -->
			<div>
				<span class="container-page-btn">
	            	<!-- 건수, 페이지 표시 -->
					<div class="d-flex flex-row justify-content-between">
						<span class="dataTables_info" id="paging--${pageName}PagingInfo" role="status" aria-live="polite"></span>
						<ul class="pagination pagination-primary" id="paging--${pageName}">
						</ul>
					</div>
					<!-- 업무 버튼 -->
		            <span class="container-window-btn-right">
		            </span>
				</span>
			</div>
			<!-- 업무 버튼 및 건수 표시 -->

			<!-- DataTables(그리드) -->
			<div class="card-datatable text-nowrap">
				<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
					<div class="table-responsive h-px-400" id="table-responsive--${pageName}">
						<table class="table dataTable table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
							<thead class="sticky-thead">
								<tr id="theadTr--${pageName}"
									data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
									<th class="cmn" style="width: 72px;">No.</th>
									<th class="cmn" style="width: 150px;">부서명</th>
									<th class="cmn" style="width: 160px;">사용자계정</th>
									<th class="cmn" style="width: 160px;">사용자이름</th>
									<th class="cmn" style="width: 60px;">상태</th>
									<th class="cmn" style="width: 155px;">등록일시</th>
								</tr>
							</thead>
							<tbody id="tbody--${pageName}">
							</tbody>
							<template id="${infoPrefix}Row--${pageName}">
								<tr data-key="{USER_ID}">
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
									<td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{DEPT_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{USER_ACNT}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{USER_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{STTS_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
								</tr>
							</template>
							<template id="${infoPrefix}NotFound--${pageName}">
								<tr class="odd">
									<td valign="top" colspan="6" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
							</template>
						</table>
					</div>
				</div>
			</div> <!-- DataTables(그리드) -->
		</div> <!-- <div class="card"> -->
	</div> <!-- <div class="container flex-grow-1 px-0"> -->
	<!-- Content -->
</div>
<!-- / inner page html <div class="content-pop"> -->

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	pageObject["${pageName}"] = {};

	/**************************************************************************
	 * script 진입
	 **************************************************************************/
	$(document).ready(function() {
		// pageObject
		let $P = pageObject["${pageName}"];

		// FormFields
	 	$P.formFields = new FimsFormFields("#frmSearch--${pageName}");

		/**************************************************************************
		 * DatasetControl
		 **************************************************************************/
		 $P.control = new DatasetControl({
			  prefix: "user"
			, prefixName: "사용자"
			, keymapper: info => info ? info.USER_ID : ""
			, dataGetter: obj => obj.${infoPrefix}List
			, appendData: true
			, formats: {
		    	REG_DT: datetimeFormat
			}
		});
		// $P.control 설정
		$P.control.defaultFetchSize = FETCH_XS;									// 1 페이지당 조회되는 자료 건수 index.jsp에서 확인 FETCH_XS = 30
		$P.control.query = { pageNum : 1, fetchSize : $P.control.defaultFetchSize };
		$P.control.beforeCurrent = null;

		/**************************************************************************
		 * DatasetControl 이벤트
		 **************************************************************************/
		// Dataset 변경 이벤트
		$P.control.onDatasetChange = (obj, option) => {
			$P.renderList(obj.${infoPrefix}Total, option);

			$("#paging--${pageName}").setPagingInfo({
				  list: $P.control.dataset
				, prefix: "paging--${pageName}"
				, start: obj.${infoPrefix}Start
				, totalSize: obj.${infoPrefix}Total
				, fetchSize: obj.${infoPrefix}Fetch
				, func: "pageObject['${pageName}'].control.load({index})"
			});
		};

		// 현재 선택 자료 변경 이벤트
		$P.control.onCurrentChange = (item) => {
			if (!item) return;

			let key = item.data.USER_ID;

			$("#tbody--${pageName}").setCurrentRow(key);
		};

		/**************************************************************************
		 * DataTables 이벤트
		 **************************************************************************/
		// DataTables에 click, dbclick 이벤트
		$P.renderList = (totalSize, option) => {
			let ${infoPrefix}List = $P.control.dataset;
			let empty = ${infoPrefix}List.empty;

			let trs = empty ?
				[document.getElementById("${infoPrefix}NotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
				${infoPrefix}List.inStrings(
					document.getElementById("${infoPrefix}Row--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
					(str, dataItem) => str
						.replace(/{onclick}/gi, "pageObject['${pageName}'].control.setCurrent('" + dataItem.getValue("USER_ID") + "');")
						.replace(/{ondblclick}/gi, "pageObject['${pageName}'].fnOK('" + dataItem.getValue("USER_ID") + "');")
				);

			let noMore = (${infoPrefix}List.length >= totalSize);
			let initScroll = ($P.control.query.pageNum < 2);
			if (option != null && option.reloaded) {
				initScroll = false;
			}

			$("#table-responsive--${pageName}")[0].changeContent(trs.join(), initScroll, noMore);

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

		// DataTables에 스크롤이 맨 밑으로 이동했을 때 이벤트
		$P.scrollDataList = () => {
			$P.control.load($P.control.query.pageNum + 1);
		}

		/**************************************************************************
		 * 사용자 함수(function)
		 **************************************************************************/
		// 검색 자료 재조회
		$P.fnRefreshList = () => {
			$P.control.reload({all : true});
		}

		/**************************************************************************
		 * 버튼 clickEvent
		 **************************************************************************/
		// 업무 구분 변경 이벤트
		$P.fnResetAndChangeBiz = (taskSeCd) => {
			// 업무 구분 코드
			if (typeof taskSeCd == "undefined" || taskSeCd == null || taskSeCd == "") {
				taskSeCd = $("#layout-navbar input[name='taskSeCd']:checked").val();
			}

			// 초기 기본 설정
			$P.initForm(taskSeCd);
			// 업무 구분별 설정
			$P.setTask(taskSeCd);

			// dataset 초기화
	 		$P.control.dataset.clear();
		}

		// 검색 버튼 클릭 이벤트
		$P.fnSearchList = () => {
			// 검색조건
			$P.control.query = $P.formFields.get();								// 검색 조건
			if($P.control.query.by == "userAccount"){
				$P.control.query.term = $P.control.query.term.toUpperCase();
			}

			$P.control.query.fetchSize = $P.control.defaultFetchSize;			// 한번에 조회되는 자료 건수
			$P.control.query.useYn = "Y";										// 사용 여부

			$P.control.load(1);
		}

		// 확인
		$P.fnOK = (userId) => {
			// 사용자 ID
			if (typeof userId == "undefined" || userId == null || userId == "") {
				userId = $P.control.dataset.getValue("USER_ID");
			}

			if ("${callbackFuncName}" != "") {
				${callbackFuncName}(userId, $P.control.dataset.getValue("USER_NM"));
			}

			dialog.close($("#frmSearch--${pageName}").parents(".modal")[0].id);
		}

		/**************************************************************************
		 * 초기 설정
		 **************************************************************************/
		// 이벤트
		$P.setEvent = () => {
			// 기본 버튼 이벤트
			$("#btnReset--${pageName}").on("click", () => $P.fnResetAndChangeBiz());	// 초기화
			$("#btnSearch--${pageName}").on("click", () => $P.fnSearchList());			// 검색
			$("#btnOK--${pageName}").on("click", () => $P.fnOK());						// 확인

			// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
			$("#term--${pageName}").onEnterPress(function() {
				$P.fnSearchList();
			});

			// DataTables width 변경 조정
			Componentization.fnMakeResizableTable($("#table-responsive--${pageName}")[0]);

			// DataTables 스크롤 이벤트 생성
			Componentization.fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
		}

		// 화면 초기 설정
		$P.initForm = (taskSeCd) => {
			// 화면 초기화
	 		$("#frmSearch--${pageName}")[0].reset();

			// input 이 1개밖에 없으면 submit 으로 동작하기 때문에 text 로 지정하고 hide 처리하였다.
			$("#sggCd--${pageName}").hide();
			$("#deptCd--${pageName}").hide();

			// 기본 데이터 설정
			$("#sggCd--${pageName}").val("${sggCd}");							// 시군구 코드
			$("#deptCd--${pageName}").val("${deptCd}");							// 부서 코드
			$("#userAcnt--${pageName}").val("${userAcnt}");						// 사용자 계정
		}

		// 업무 구분별 설정
		$P.setTask = (taskSeCd) => {
			// 업무구분에 따른 URL 설정
			$P.control.urls.load = wctx.url("/user/list.do");					// 검색
		}

		/**************************************************************************
		 * 최초 실행 함수
		 **************************************************************************/
		// 1. 이벤트 설정
		$P.setEvent();

		// 2. 초기 설정 및 업무 구분 변경
		$P.fnResetAndChangeBiz($("#layout-navbar input[name='taskSeCd']:checked").val());

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

</script>
