<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<!-- inner page html -->
<div class="content-wrapper">
	<!-- Content -->
	<div class="container-xxl flex-grow-1 px-0">
		<c:set var="prefixName" scope="request">단속재등록</c:set>

		<!-- Page Body -->
		<div class="card">
			<div class="wrapper-list">
				<div>
					<!-- 상단 버튼 -->
					<div class="container-page-btn">
						<button type="button" class="btn btn-outline-dark" id="btnReset--${pageName}" title="초기화" onclick="fnReset${pageName}();">
							초기화
						</button>
						<span class="container-window-btn-right">
							<button type="button" class="btn btn-search" id="btnSearch--${pageName}" title="검색" onclick="fnSearchList${pageName}();">
								검색
							</button>
							<button type="button" class="btn btn-search" id="btnExcel--${pageName}" title="엑셀" onclick="fnExcel${pageName}();">
								엑셀
							</button>
						</span>
					</div>
					<!-- / 상단 버튼 -->

					<!-- 검색 조건 영역 -->
					<form id="frmSearch--${pageName}" name="frmSearch">
						<!-- 메인 조건 -->
						<div class="container-search">
							<div class="row g-1">
								<!-- 업무구분 -->
								<div class="col-12">
									<label class="form-label fw-bold form-search-title">업무구분</label>
									<span class="form-search-linebox">
										<c:forEach items="${FIM054List}" var="item">
											<label>
												<input type="radio" class="form-check-input" name="taskSeCd" alt="업무구분"
													value="${item.code}" onchange="fnResetAndChangeBiz${pageName}(this.value);">
												${item.value}
											</label>
										</c:forEach>
									</span>
								</div>
								<!-- 재등록일자 -->
								<div class="col-6">
									<label class="form-label fw-bold form-search-title">재등록일자</label>
									<span class="form-search-linebox">
										<input type="text" class="form-control form-date" id="schReRegYmdFrom--${pageName}" name="schReRegYmdFrom"
											data-fmt-type="day" title="시작 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
										~
										<input type="text" class="form-control form-date" id="schReRegYmdTo--${pageName}" name="schReRegYmdTo"
											data-fmt-type="day" title="종료 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
									</span>
								</div>
								<!-- 차량번호 -->
								<div class="col-6">
									<label class="form-label fw-bold form-search-title">차량번호</label>
									<input type="text" class="form-control w-px-150" id="schVhrno--${pageName}" name="schVhrno" />
								</div>
								<!-- 단속일자 -->
								<div class="col-6">
									<label class="form-label fw-bold form-search-title">단속일자</label>
									<span class="form-search-linebox">
										<input type="text" class="form-control form-date" id="schCrdnYmdFrom--${pageName}" name="schCrdnYmdFrom"
											data-fmt-type="day" title="시작 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
										~
										<input type="text" class="form-control form-date" id="schCrdnYmdTo--${pageName}" name="schCrdnYmdTo"
											data-fmt-type="day" title="종료 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
									</span>
								</div>
								<!-- 동적검색 -->
								<div class="col-6">
		                        	<input type="hidden" id="by--${pageName}" name="by" />
									<input type="text" class="form-control" id="byOutput--${pageName}" value="동적 검색" readonly />
									<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
									<input type="hidden" id="subOption--${pageName}" name="subOption" />
									<input type="text" class="form-control w-px-300" id="term--${pageName}" name="term" />
									<!-- 상세 검색조건 버튼 -->
									<span class="flr">
										<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" data-bs-target="#searchDetail--${pageName}">
											<i class="bx bx-chevron-down"></i>
											상세검색
										</button>
									</span>
								</div>
							</div>
						</div>
						<!-- / 메인 조건 -->

						<!-- 상세 조건 -->
						<div id="searchDetail--${pageName}" class="container-search container-search-detail collapse">
							<div class="row g-1">
								<!-- 등록일자, 수정일자 -->
								<div class="col-6">
									<select class="form-select" id="schRegDateOpt--${pageName}" name="schRegDateOpt">
										<option value="regDt">등록일자</option>
										<option value="mdfcnDt">수정일자</option>
									</select>
									<span class="form-search-linebox">
										<input type="text" class="form-control form-date" id="schRegDateFrom--${pageName}" name="schRegDateFrom"
		                                	data-fmt-type="day" title="시작 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                                ~
										<input type="text" class="form-control form-date" id="schRegDateTo--${pageName}" name="schRegDateTo"
		                                	data-fmt-type="day" title="종료 날짜 선택">
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
									</span>
								</div>
								<!-- 등록자명, 수정자명 -->
								<div class="col-6">
									<select class="form-select" id="schDetailUserOpt--${pageName}" name="schDetailUserOpt">
										<option value="rgtr">등록자명</option>
										<option value="mdfr">수정자명</option>
									</select>
									<input type="text" class="form-control" id="schDetailUserNm--${pageName}" name="schDetailUserNm" />
								</div>
							</div>
						</div>
						<!-- / 상세 조건 -->
				    </form>
				    <!-- / 검색 조건 영역 -->

					<!-- 업무 버튼 및 건수 표시 -->
					<div>
						<span class="container-page-btn">
			            	<!-- 건수, 페이지 표시 -->
							<div class="d-flex flex-row justify-content-between">
								<label class="dataTables_info" id="paging--${pageName}PagingInfo" role="status" aria-live="polite"></label>
								<ul class="pagination pagination-primary" id="paging--${pageName}">
								</ul>
							</div>
				            <span class="container-window-btn-right">
								<!-- 업무 버튼 -->
								<button type="button" class="btn btn-primary" id="btnBfrCrdnTotalInfo--${pageName}" title="이전 단속정보 보기" onclick="fnBfrCrdnTotalInfo${pageName}();">
									이전 단속정보 보기
								</button>
				            </span>
						</span>
					</div>
					<!-- / 업무 버튼 및 건수 표시 -->

					<!-- DataTables(그리드) -->
					<div class="card-datatable text-nowrap">
						<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
							<div id="table-responsive--${pageName}" class="table-responsive" style="overflow-x:scroll; height:400px; overflow-y:scroll;" >
								<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
									<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="sorting" style="width: 24px;">NO.</th>
											<th class="sorting" style="width: 24px;">
												<input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);">
											</th>
											<th onclick="searchFromGridTitle('RE_REG_YMD', this.innerText, 'ymd', '');">재등록일자</th>
											<th onclick="searchFromGridTitle('CRDN_REG_SE_NM', this.innerText, 'codeValue', 'FIM026');">단속등록구분명</th>
											<th onclick="searchFromGridTitle('ETC_CN', this.innerText, 'match', 'part');">기타내용</th>
											<th onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th>
											<th onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th>
											<th onclick="searchFromGridTitle('CRDN_STDG_NM', this.innerText, 'match', 'part');">법정동</th>
											<th onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th>
											<th onclick="searchFromGridTitle('FFNLG_AMT', this.innerText, 'match', 'part');">과태료단속금액</th>
											<th onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th>
											<th>등록일시</th>
											<th>등록사용자</th>
										</tr>
									</thead>
									<tbody id="tbody--${pageName}">
									</tbody>
									<template id="${infoPrefix}Row--${pageName}">
										<tr data-key="{RE_REG_ID}">
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
											<td class="text-center">
												<input type="checkbox" class="form-check-input" value="{RE_REG_ID}" onchange="${pageName}Control.select('{RE_REG_ID}', this.checked);">
											</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RE_REG_YMD}</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_REG_SE_NM}</td>
											<td class="text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{ETC_CN}</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td>
											<td class="text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td>
											<td class="text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STDG_NM}</td>
											<td class="text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td>
											<td class="text-end"	onclick="{onclick}" ondblclick="{ondblclick}">{FFNLG_CRDN_AMT}</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
											<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
										</tr>
									</template>
									<template id="${infoPrefix}NotFound--${pageName}">
										<tr class="odd">
											<td valign="top" colspan="13" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
										</tr>
									</template>
								</table>
							</div>
						</div>
					</div>
					<!-- / DataTables(그리드) -->
				</div>
			</div>
			<!-- / Wrapper-list -->
		</div>
		<!-- / Card -->
	</div>
	<!-- / Content -->

	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />

  	<div class="content-backdrop fade"></div>
</div>
<!-- Content wrapper -->

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	// URL
	var ${pageName}PrefixUrl = "/excl/excl03";

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Control = new DatasetControl({
		  prefix : "crdnReReg"
		, prefixName : "단속 재등록"
		, infoSize : "lg"
		, keymapper : info => info ? info.RE_REG_ID : ""
		, dataGetter : obj => obj.crdnReRegList
		, appendData : true
		, urls : {
			  load : wctx.url(${pageName}PrefixUrl + "/010/list.do")			// 검색
			, create : wctx.url(${pageName}PrefixUrl + "/010/create.do")        // 신규 등록
		}
		, formats : {
			  RE_REG_YMD : dateFormat
	    	, CRDN_YMD_TM : datetimeFormat
	    	, FFNLG_CRDN_AMT : numberFormat
	    	, REG_DT : datetimeFormat
		}
	});

	/**************************************************************************
	 * DatasetControl 이벤트
	 **************************************************************************/
	// Dataset 변경 이벤트
	${pageName}Control.onDatasetChange = obj => {
		renderList${pageName}();

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

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

		let key = item.data.RE_REG_ID;

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

	// 선택(체크) 변경 이벤트
	${pageName}Control.onSelectionChange = selected => {
		let ${infoPrefix}List = ${pageName}Control.dataset;
		let keys = selected.map(e => ${infoPrefix}List.getKey(e));

		$("#tbody--${pageName} input[type='checkbox']").each(function() {
			let checkbox = $(this);

			checkbox.prop("checked", keys.includes(checkbox.val()));
		});

		$("#btnRemove--${pageName}").prop("disabled", keys.length < 1);
	};

	// 개별총정보 dialog
	${pageName}Control.getInfo = (crdnId) => {
		if (crdnId == undefined || crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callControlName : "${pageName}Control"
			, crdnId : crdnId
		}

		ajax.get({
			  url : ${pageName}Control.urls.getInfo
			, data : params || {}
			, success : resp => {
				dialog.open({
					  id : "totalInfoMainDialog"
					, title : "개별총정보"
					, content : resp
					, size : "xxl"
					, init : () => { }
					, onClose : () => { }
				});
			}
		});
	}

	/**************************************************************************
	 *
	 **************************************************************************/
	// DataTables에 click, dbclick 이벤트
	renderList${pageName} = () => {
		let ${infoPrefix}List = ${pageName}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, "${pageName}Control.setCurrent('" + dataItem.getValue("RE_REG_ID") + "');")
					.replace(/{ondblclick}/gi, "${pageName}Control.getInfo('" + dataItem.getValue("CRDN_ID") + "');")
			);

		$("#tbody--${pageName}").html(trs.join());
		$("th input[type='checkbox']").prop("checked", false);

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

	// 업무구분 변경
	fnResetAndChangeBiz${pageName} = (taskSeCd) => {
		initForm${pageName}();

		${pageName}Control.urls.load = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/list.do");		// 조회
		${pageName}Control.urls.create = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/create.do");	// 등록
		${pageName}Control.urls.getInfo = wctx.url("/" + taskSeCd + "/sprt/sprt02/010/main.do");				// 개별총정보
	}

	// 검색 조건 파라미터 가져오기
	fnGetParams${pageName} = () => {
		let formFields = new FimsFormFields("#frmSearch--${pageName}");
		let formData = formFields.get();

		formData.fetchSize = FETCH_XS;							// 한번에 조회되는 자료 건수

		// 나중에 삭제
		formData.sggCd = "41480";								// 시군구 코드 임시

		return formData;
	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 화면 초기값 셋팅
	initForm${pageName} = () => {
		// 달력 초기화
		initDatepicker("frmSearch--${pageName}");

		$("#schReRegYmdFrom--${pageName}").datepicker("setDate", new Date());
		$("#schReRegYmdTo--${pageName}").datepicker("setDate", new Date());

		${pageName}Control.dataset.clear();
	}

	// 이벤트
	setEvent${pageName} = () => {
		// form-date 항목에서 키보드로 입력시 날짜 포맷팅 적용
		$("#frmSearch--${pageName}").find(".form-date").each(function() {
			$(this).on("input", function() {
				let value = this.value.replaceAll("-", "");

				if (value.length > 7) {
					this.value = value.substring(0, 4) + "-" + value.substring(4, 6) + "-" + value.substring(6);
				} else if(value.length > 5) {
					this.value = value.substring(0, 4) + "-" + value.substring(4);
				}
			});
		});

		// DataTables 스크롤 이벤트
		$("#table-responsive--${pageName}").scroll(function(obj) {
			let el = $(this);

			if (el.scrollTop() == 0) {
				return;
			}

			let itemsCnt = ${pageName}Control.dataset._items.length;
			let totCnt =  ${pageName}Control.dataset.getCurrent("item").data.TOT_CNT;

			if (itemsCnt >= totCnt) {
				return;
			}

 			if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) {
 				${pageName}Control.load(${pageName}Control.query.pageNum + 1);
			}
	    });
	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	// 초기화
	fnReset${pageName} = () => {
	    let taskSeCd = $("#layout-navbar input[name='taskSeCd']:checked").val();

		fnResetAndChangeBiz${pageName}(taskSeCd);
	}

	// 검색
	fnSearchList${pageName} = () => {
		// 검색조건
		${pageName}Control.query = fnGetParams${pageName}();
		${pageName}Control.query.delYn = "N";									// 삭제 여부

		${pageName}Control.load();
	}

	// 엑셀
	fnExcel${pageName} = () => {

	}

	// 이전 단속정보 보기
	fnBfrCrdnTotalInfo${pageName} = () => {
		let bfrCrdnId = ${pageName}Control.dataset.getValue("BFR_CRDN_ID");

		// 개별총정보 dialog
		${pageName}Control.getInfo(bfrCrdnId);
	}

	/**************************************************************************
	 * script 진입
	 **************************************************************************/
	$(document).ready(function() {
		// 이벤트 설정
		setEvent${pageName}();

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

		// 업무구분 및 화면 초기 설정
	    let defaultBizValue = $("#layout-navbar input[name='taskSeCd']:checked").val();
		$("#frmSearch--${pageName} input[name='taskSeCd'][value='" + defaultBizValue + "']").prop("checked", true);

		fnResetAndChangeBiz${pageName}(defaultBizValue);
	});

// #sourceURL=excl03010-main.jsp
</script>
