<%@ 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">
	<div class="container-xxl flex-grow-1 px-0">
		<c:set var="pageKorName" scope="request">단속 자료 검사</c:set>
		<div class="card">
			<div class="wrapper-list">
				<div>
				    <div class="container-page-btn">
				        <button type="button" id="btnReset--${pageName}" class="btn btn-outline-dark" title="초기화">초기화</button>
				        <button type="button" id="btnPhotoInspection--${pageName}" class="btn btn-blue" title="단속사진 비교">단속사진 비교</button>
				        <button type="button" id="btnSameVehicleInspection--${pageName}" class="btn btn-blue" title="동일단속차량 검사">동일단속차량 검사</button>
				        <span class="container-window-btn-right">
				            <button type="button" id="btnSearch--${pageName}" class="btn btn-search" title="검색">검색</button>
				        </span>
				    </div>

				    <form id="frmSearch--${pageName}" name="frmSearch">
				        <div class="container-search">
		                    <div class="row g-1">
		                        <div class="col-6">
		                            <label class="form-label fw-bold form-search-title">업무구분</label>
		                            <span class="form-search-linebox">
										<c:forEach items="${FIM054List}" var="item">
											<label>
												<input name="taskSeCd" type="radio" value="${item.code}"
												class="form-check-input" alt="업무구분"
												onchange="pageObject['${pageName}'].fnResetAndChangeBiz(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" id="schCrdnYmdFrom--${pageName}" name="schCrdnYmdFrom" class="form-control form-date"
		                                	data-fmt-type="day"   title="시작 날짜 선택" />
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                                ~
		                                <input type="text" id="schCrdnYmdTo--${pageName}" name="schCrdnYmdTo" class="form-control form-date"
		                                	data-fmt-type="day" title="종료 날짜 선택">
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                            </span>
		                        </div>
		                        <div class="col-4">
		                            <label class="form-label fw-bold form-search-title">단속구분</label>
		                            <select id="crdnInptSeCd--${pageName}" name="crdnInptSeCd" class="form-select">
		                            	<option value="">전체</option>
		                            	<c:forEach items="${FIM003List}" var="item">
		                            		<option value="${item.code}">${item.value}</option>
		                            	</c:forEach>
		                            </select>
		                        </div>
		                        <div class="col-4">
		                        	<label class="form-label fw-bold form-search-title">차량번호</label>
		                            <input type="text" id="vhrno--${pageName}" name="vhrno" class="form-control" />
		                        </div>
		                        <div class="col-4">
		                        	<span class="area-samevehicleinspection">
			                        	<label class="form-label fw-bold form-search-title">단속건수</label>
			                        	<input type="text" name="schCrdnCntFrom" class="form-control w-px-50" placeholder="2" />
			                        	~ <input type="text" name="schCrdnCntTo" class="form-control w-px-50"/>
		                        	</span>
		                        </div>
		                        <div class="col-12">
		                        	<label>
		                        		<input type="checkbox" name="schExclEnd" class="form-check-input" />
		                        		서손자료제외
									</label>
		                        	<label class="area-samevehicleinspection">
		                        		<input type="checkbox" name="schOnlySamePlace" class="form-check-input" />
		                        		동일장소만조회
									</label>
									<label class="area-photoinspection">
		                        		<input type="checkbox" name="schOnlyUnpay" class="form-check-input" />
		                        		미납만조회
									</label>
									<span slot="search">
										<template class="pvs">
											<slot>
												<label class="area-photoinspection">
					                        		<input type="checkbox" name="schExclOvtime" class="form-check-input" />
					                        		2시간초과 처리 자료 제외
												</label>
											</slot>
										</template>
									</span>
		                        	<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">
				            	<div class="col-6">
				            		<input type="hidden" id="by--${pageName}" name="by" />
									<input type="text" id="byOutput--${pageName}" class="form-control" readonly value="동적 검색" />
									<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
									<input type="hidden" id="subOption--${pageName}" name="subOption" />
									<input type="text" id="term--${pageName}" name="term" class="form-control" />
				            	</div>
					            <div class="col-6">
					                <label class="form-label fw-bold form-search-title">자료상태</label>
		                            <select id="crdnSttsCd--${pageName}" name="crdnSttsCd" class="form-select">
		                            	<option value="">전체</option>
		                            	<c:forEach items="${FIM010List}" var="item">
		                            		<option value="${item.code}">${item.value}</option>
		                            	</c:forEach>
		                            </select>
					            </div>
					            <div class="col-6">
					            	<select id="schDateOpt--${pageName}" name="schDateOpt" class="form-select">
		                                <option value="regDt">등록일자</option>
		                                <option value="mdfcnDt">수정일자</option>
		                            </select>
		                            <span class="form-search-linebox">
		                                <input type="text" id="schDateFrom--${pageName}" name="schDateFrom" class="form-control form-date"
		                                	data-fmt-type="day"   title="시작 날짜 선택" />
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                                ~
		                                <input type="text" id="schDateTo--${pageName}" name="schDateTo" class="form-control form-date"
		                                	data-fmt-type="day" title="종료 날짜 선택">
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                            </span>
					            </div>
					        </div>
				        </div>
				    </form>

			        <div id="gridbuttonArea--${pageName}" class="container-page-btn">
			        	<div class="d-flex flex-row justify-content-between">
							<label id="photoInspectionPaging--${pageName}PagingInfo"
								class="dataTables_info area-photoinspection" role="status" aria-live="polite"></label>
			                 <ul id="photoInspectionPaging--${pageName}" class="pagination pagination-primary area-photoinspection">
			                 </ul>
						</div>
						<div class="d-flex flex-row justify-content-between">
							<label id="sameVehicleInspectionMainPaging--${pageName}PagingInfo"
								class="dataTables_info area-samevehicleinspection" role="status" aria-live="polite"></label>
			                 <ul id="sameVehicleInspectionMainPaging--${pageName}" class="pagination pagination-primary area-samevehicleinspection">
			                 </ul>
						</div>
			            <span class="container-window-btn-right">
							<button type="button" class="btn btn-primary" id="btnInstLevyExcl--${pageName}" title="비부과 등록">비부과 등록</button>
							<span slot="button">
								<template class="pvs">
									<slot>
										<button id="btnOpenOverTime--${pageName}"
										class="btn btn-primary area-photoinspection"
										title="2시간 초과 처리">2시간 초과 처리</button>
									</slot>
								</template>
							</span>
			            </span>
			        </div>

					<div class="card-datatable text-nowrap area-photoinspection">
				        <div id="photoInspection_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
							<div id="photoInspection-responsive--${pageName}" class="table-responsive"
								style="overflow-x: scroll;height:200px;overflow-y: scroll;">
								<table id="photoInspection_Table_0--${pageName}"
									class="datatables-ajax table table-bordered dataTable no-footer">
									<thead>
										<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
											data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
											<th style="min-width: 80px;">No.</th>
											<th onclick="searchFromGridTitle('CRDN_YMD','단속일자','ymd','');"
											style="min-width: 160px;">단속일시</th>
											<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');"
											style="min-width: 80px;">차량번호</th>
											<th style="min-width: 80px;" class="text-orange">위반건수</th>
											<th style="min-width: 80px;" class="text-orange">검사결과</th>
											<th style="min-width: 250px;" class="text-orange">처리방법</th>
											<th onclick="searchFromGridTitle('CRDN_STDG_NM',this.innerText,'match','perfect');"
											style="min-width: 80px;">위반동</th>
											<th onclick="searchFromGridTitle('CRDN_PLC',this.innerText,'match','part');"
											style="min-width: 300px;">위반장소</th>
											<th onclick="searchFromGridTitle('ATCH_FILE_CNT',this.innerText,'match','perfect');"
											style="min-width: 80px;">사진매수</th>
											<th onclick="searchFromGridTitle('CRDN_STTS_CD',this.innerText,'codeValue','FIM010');"
											style="min-width: 80px;">처리상태</th>
											<th onclick="searchFromGridTitle('FFNLG_CRDN_AMT',this.innerText,'match','perfect');"
											style="min-width: 80px;">원금액</th>
											<th onclick="searchFromGridTitle('UNKNOWN',this.innerText,'match','perfect');"
											style="min-width: 80px;">감경금액</th>
											<th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');"
											style="min-width: 80px;">자료출처</th>
										</tr>
				                    </thead>
				                    <tbody id="photoInspectionTbody--${pageName}"></tbody>
									<template id="photoInspectionRow--${pageName}">
										<tr data-key="{CRDN_ID}">
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{ROW_NUM}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_YMD_TM}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{VHRNO}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_CNT}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{INSP_RSLT}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{PRCS_MTHD}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_STDG_NM}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start text-truncate"
												style="max-width:500px;">{CRDN_PLC}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{ATCH_FILE_CNT}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_STTS_CD}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{FFNLG_CRDN_AMT}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{unknown}</td>
											<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_INPT_SE_CD}</td>
										</tr>
									</template>
									<template id="photoInspectionNotFound--${pageName}">
										<tr class="odd">
											<td valign="top" colspan="13" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
										</tr>
									</template>
								</table>
							</div>
						</div>
				    </div>

					<div style="height:200px;" class="area-photoinspection">
						선택자료
						<strong id="curDataVhrno--${pageName}"></strong>
						<div id="curDataFiles--${pageName}" style="width: 100%;height: 180px;overflow-x: scroll;background-color:#D9DEE3;">

						</div>
					</div>
					<div style="height:200px;" class="area-photoinspection">
						비교자료(선택자료의 다음 자료가 보여집니다.)
						<strong id="nextDataVhrno--${pageName}"></strong>
						<div id="nextDataFiles--${pageName}" style="width: 100%;height: 180px;overflow-x: scroll;background-color:#D9DEE3;">

						</div>
					</div>

					<div class="area-samevehicleinspection">
						<div class="card-datatable text-nowrap" style="display: inline-flex;">
					        <div id="sameVehicleInspectionMain_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
								<div id="sameVehicleInspectionMain-responsive--${pageName}" class="table-responsive"
									style="overflow-x: scroll;height:400px;width:310px;overflow-y: scroll;">
									<table id="sameVehicleInspectionMain_Table_0--${pageName}"
										class="datatables-ajax table table-bordered dataTable no-footer">
										<thead>
											<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
												data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
												<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');"
												>차량번호</th>
												<th onclick="searchFromGridTitle('CRDN_STDG_NM',this.innerText,'match','perfect');"
												>단속동</th>
												<th class="text-orange"
												>단속건수</th>
											</tr>
					                    </thead>
					                    <tbody id="sameVehicleInspectionMainTbody--${pageName}"></tbody>
										<template id="sameVehicleInspectionMainRow--${pageName}">
					                    	<tr data-key="{CRDN_ID_LIST}">
												<td onclick="{onclick}" class="text-center">{VHRNO}</td>
						                    	<td onclick="{onclick}" class="text-center">{CRDN_STDG_NM}</td>
						                    	<td onclick="{onclick}" class="text-center">{CRDN_CNT}</td>
						                    </tr>
										</template>
										<template id="sameVehicleInspectionMainNotFound--${pageName}">
											<tr class="odd">
												<td valign="top" colspan="3" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
											</tr>
										</template>
									</table>
								</div>
							</div>
					    </div>

					    <div class="card-datatable text-nowrap" style="display: inline-flex;margin-left:10px;">
					        <div id="sameVehicleInspectionSub_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
								<div id="sameVehicleInspectionSub-responsive--${pageName}" class="table-responsive"
									style="overflow-x: scroll;height:400px;width:1000px;overflow-y: scroll;">
									<table id="sameVehicleInspectionSub_Table_0--${pageName}"
										class="datatables-ajax table table-bordered dataTable no-footer">
										<thead>
											<tr data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
												data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
												<th onclick="searchFromGridTitle('CRDN_YMD','단속일자','ymd','');"
												>단속일시</th>
												<th onclick="searchFromGridTitle('CRDN_INPT_SE_CD',this.innerText,'codeValue','FIM003');"
												>자료출처</th>
												<th onclick="searchFromGridTitle('TEAM_NM',this.innerText,'match','perfect');"
												>단속조</th>
												<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');"
												>차량번호</th>
												<th onclick="searchFromGridTitle('CRDN_STDG_NM',this.innerText,'match','perfect');"
												>단속동</th>
												<th onclick="searchFromGridTitle('CRDN_PLC',this.innerText,'match','part');"
												>단속장소</th>
												<th onclick="searchFromGridTitle('CRDN_STTS_CD',this.innerText,'codeValue','FIM010');"
												>처리상태</th>
												<th onclick="searchFromGridTitle('FFNLG_CRDN_AMT',this.innerText,'match','perfect');"
												>금액</th>
												<th onclick="searchFromGridTitle('RTPYR_NM',this.innerText,'match','part');"
												>성명</th>
												<th class="privacy">주민번호(전체)</th>
												<th class="privacy-mask">주민번호(마스크)</th>
											</tr>
					                    </thead>
					                    <tbody id="sameVehicleInspectionSubTbody--${pageName}"></tbody>
										<template id="sameVehicleInspectionSubRow--${pageName}">
											<tr data-key="{CRDN_ID}">
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_YMD_TM}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_INPT_SE_CD}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{TEAM_NM}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{VHRNO}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_STDG_NM}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start text-truncate"
													style="max-width:500px;min-width: 300px;">{CRDN_PLC}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_STTS_CD}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{FFNLG_CRDN_AMT}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{RTPYR_NM}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center privacy">{RTPYR_NO}</td>
												<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center privacy-mask">************</td>
											</tr>
										</template>
										<template id="sameVehicleInspectionSubNotFound--${pageName}">
											<tr class="odd">
												<td valign="top" colspan="11" class="dataTables_empty text-center">단속 정보를 찾지 못했습니다.</td>
											</tr>
										</template>
									</table>
								</div>
							</div>
					    </div>
					</div>
				</div>
			</div>
		</div>
	</div>

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

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

<script type="module" src="<c:url value='/resources/js/fims/crdn/inspection.js?${ver}'/>"></script>
<script ${module}>
import {InspectionControl, fnMakeImgTag} from "<c:url value='/resources/js/fims/crdn/inspection.js?${ver}'/>";
/**************************************************************************
 * Global Variable
 **************************************************************************/
var FIM002 = new CommonCodes(${FIM002});
var FIM003 = new CommonCodes(${FIM003});
var FIM010 = new CommonCodes(${FIM010});
var FIM026 = new CommonCodes(${FIM026});
pageObject["${pageName}"] = {};

$(document).ready(function(){

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

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	//단속사진검사 datasetControl 인스턴스
	$P.photoInspectionControl = new DatasetControl({
	    urls : { load : "", getInfo : "" },
	    dataGetter : obj => obj["List"], appendData:true,
	    keymapper : info => info ? info.CRDN_ID : "",
	    formats: {
	    	CRDN_YMD_TM 	: datetimeFormat,
	    	CRDN_INPT_SE_CD : FIM003,
	    	CRDN_STTS_CD 	: FIM010,
	    	FFNLG_CRDN_AMT 	: numberFormat
			//감경금액
		}
	});
	$P.photoInspectionControl.defaultFetchSize = FETCH_XS;
	$P.photoInspectionControl.untilPageNum = 0;
	$P.photoInspectionControl.beforeCurrent = null;
	$P.photoInspectionControl.tableRenderComplete = false;


	//동일차량검사 datasetControl 인스턴스
	$P.sameVehicleControl = new InspectionControl({
	    urls : { load : "", getInfo : "" },
	    dataGetter : obj => obj["List"], appendData:true,
	    keymapper : info => info ? info.CRDN_ID_LIST : "",
	    formats: { CRDN_CNT : numberFormat, FFNLG_CRDN_AMT : numberFormat }
	},
	{
	    urls : { load : "", getInfo : "" },
	    dataGetter : obj => obj["List"],
	    keymapper : info => info ? info.CRDN_ID : "",
	    formats: {
	    	CRDN_YMD_TM : datetimeFormat,
	    	CRDN_INPT_SE_CD 	: FIM003,
	    	CRDN_STTS_CD 	: FIM010
		}
	}
	);
	$P.sameVehicleControl.defaultFetchSize = FETCH_XS;
	$P.sameVehicleControl.untilPageNum = 0;
	$P.sameVehicleControl.main.beforeCurrent = null;
	$P.sameVehicleControl.main.tableRenderComplete = false;
	$P.sameVehicleControl.sub.tableRenderComplete = false;

	$P.photoInspectionControl.getNext = (key) => {

		var ds = $P.photoInspectionControl.dataset.getDataset();

		var index = ds.findIndex(item => item.CRDN_ID == key);
		if(ds.length > index+1){
			return ds[index+1];
		} else {
			return null;
		}
	}
	/**************************************************************************
	 * DatasetControl.on
	 **************************************************************************/
	 $P.photoInspectionControl.onDatasetChange = (obj) => {

	    $P.renderInspectionDataList(obj["Total"], "photoInspection");

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

	    $P.photoInspectionControl.tableRenderComplete = true;
	};

	$P.photoInspectionControl.onCurrentChange = (item) => {

		if(!$P.photoInspectionControl.tableRenderComplete){
			return;
		}

		if($P.photoInspectionControl.beforeCurrent != null){
			var beforeCurrentKey = $P.photoInspectionControl.beforeCurrent.key;
			var beforeCurrentIndex = $P.photoInspectionControl.beforeCurrent.index;
			$P.photoInspectionControl.beforeCurrent = null;

			if(!$P.photoInspectionControl.dataset.empty){
				var info = $P.photoInspectionControl.dataset.getData(beforeCurrentKey);

				if(info != null){
					$P.photoInspectionControl.dataset.setCurrent(beforeCurrentKey, true);
					return;
				}

				if(beforeCurrentIndex > ($P.photoInspectionControl.dataset.length - 1)){
					info = $P.photoInspectionControl.dataset.getDataset()[$P.photoInspectionControl.dataset.length - 1];
				} else {
					info = $P.photoInspectionControl.dataset.getDataset()[beforeCurrentIndex];
				}

				$P.photoInspectionControl.dataset.setCurrent(info["CRDN_ID"], true);
				return;
			}
		}

		$P.photoInspectionControl.tableRenderComplete = false;
		if(!item){
			$P.clickInspectionDataList("","photoInspection", true);
		} else {
			$P.clickInspectionDataList($P.photoInspectionControl.getCurrent()["CRDN_ID"],"photoInspection", true);
		}
	}

	$P.sameVehicleControl.main.onDatasetChange = (obj) => {

		$P.renderInspectionDataList(obj["Total"], "sameVehicleInspectionMain");

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


	    $P.sameVehicleControl.main.tableRenderComplete = true;
	};

	$P.sameVehicleControl.main.onCurrentChange = (item) => {
		if(!$P.sameVehicleControl.main.tableRenderComplete){
			return;
		}

		if($P.sameVehicleControl.main.beforeCurrent != null){
			var beforeCurrentKey = $P.sameVehicleControl.main.beforeCurrent.key;
			var beforeCurrentIndex = $P.sameVehicleControl.main.beforeCurrent.index;
			$P.sameVehicleControl.main.beforeCurrent = null;

			if(!$P.sameVehicleControl.main.dataset.empty){
				var info = $P.sameVehicleControl.main.dataset.getData(beforeCurrentKey);

				if(info != null){
					$P.sameVehicleControl.main.dataset.setCurrent(beforeCurrentKey,true);
					return;
				}

				if(beforeCurrentIndex > ($P.sameVehicleControl.main.dataset.length - 1)){
					info = $P.sameVehicleControl.main.dataset.getDataset()[$P.sameVehicleControl.main.dataset.length - 1];
				} else {
					info = $P.sameVehicleControl.main.dataset.getDataset()[beforeCurrentIndex];
				}

				$P.sameVehicleControl.main.dataset.setCurrent(info["CRDN_ID_LIST"],true);
				return;
			}
		}

		$P.sameVehicleControl.main.tableRenderComplete = false;
		if(!item){
			$P.clickInspectionDataList("","sameVehicleInspectionMain", true);
		} else {
			$P.clickInspectionDataList($P.sameVehicleControl.main.getCurrent()["CRDN_ID_LIST"],"sameVehicleInspectionMain", true);
		}
	}

	$P.sameVehicleControl.sub.onDatasetChange = (obj) => {
		$P.renderInspectionDataList(obj["Total"], "sameVehicleInspectionSub");
		$P.sameVehicleControl.sub.tableRenderComplete = true;
	};

	$P.sameVehicleControl.sub.onCurrentChange = (item) => {
		if(!$P.sameVehicleControl.sub.tableRenderComplete){
			return;
		}

		$P.sameVehicleControl.sub.tableRenderComplete = false;
		if(!item){
			$P.clickInspectionDataList("","sameVehicleInspectionSub", true);
		} else {
			$P.clickInspectionDataList($P.sameVehicleControl.sub.getCurrent()["CRDN_ID"],"sameVehicleInspectionSub", true);
		}
	};

	/**************************************************************************
	 * pageObject.function
	 **************************************************************************/
	$P.fnReset = () => {
		var searchForm = $("#frmSearch--${pageName}");
		searchForm.find("input[type='radio']").not("[name='taskSeCd']").prop("checked", false);
		searchForm.find("input[type='checkbox']").prop("checked", false);
		searchForm.find("input[type='text']").val("");
		searchForm.find("input[type='hidden']").val("");
		searchForm.find("select").each(function(){ $(this).find("option:eq(0)").prop("selected", true); });

		$("#byOutput--${pageName}").val("동적 검색");
		$('#schCrdnYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-7).date);
    	$('#schCrdnYmdTo--${pageName}').datepicker('setDate', new Date());
		$P.photoInspectionControl.setData([]);
		$P.sameVehicleControl.main.setData([]);
	};

	$P.fnResetAndChangeBiz = (taskSeCd) => {
		$P.fnReset();
		$P.photoInspectionControl.urls.load = wctx.url("/"+taskSeCd+"/crdn/crdn02/020/list.do?inspectionDataType=photo");
		$P.photoInspectionControl.urls.getInfo = "";
		$P.sameVehicleControl.main.urls.load = wctx.url("/"+taskSeCd+"/crdn/crdn02/020/list.do?inspectionDataType=sameVehicleMain");
		$P.sameVehicleControl.main.urls.getInfo = "";
		$P.sameVehicleControl.sub.urls.load = wctx.url("/"+taskSeCd+"/crdn/crdn02/020/list.do?inspectionDataType=sameVehicleSub");
		$P.sameVehicleControl.sub.urls.getInfo = "";

		var clsForTask = taskSeCd.toLowerCase();
		//업무별 조회조건
		renderForTask("frmSearch--${pageName}", clsForTask);
		//업무별 버튼
		renderForTask("gridbuttonArea--${pageName}", clsForTask);
		//버튼 이벤트 재매핑
		$("#btnOpenOverTime--${pageName}").off("click");
		$("#btnOpenOverTime--${pageName}").on("click", () => $P.openOverTimePop());

		$('#btnPhotoInspection--${pageName}').trigger("click");
	}


	$P.refreshInspectionList = () => {
		switch ($P.currentDisplay) {
			case "photoInspection":
				$P.photoInspectionControl.untilPageNum = $P.photoInspectionControl.query.pageNum;
				$P.photoInspectionControl.query.fetchSize = $P.photoInspectionControl.defaultFetchSize * $P.photoInspectionControl.query.pageNum;
		        $P.photoInspectionControl.beforeCurrent = {
	                key : $P.photoInspectionControl.getCurrent()["CRDN_ID"],
	                index : $P.photoInspectionControl.getCurrent()["ROW_NUM"] - 1
	            };
				$P.photoInspectionControl.load(1);
				break;
			case "sameVehicleInspection":
				$P.sameVehicleControl.untilPageNum = $P.sameVehicleControl.main.query.pageNum;
				$P.sameVehicleControl.main.query.fetchSize = $P.sameVehicleControl.defaultFetchSize * $P.sameVehicleControl.main.query.pageNum;
				$P.sameVehicleControl.main.beforeCurrent = {
	                key : $P.sameVehicleControl.main.getCurrent()["CRDN_ID_LIST"],
	                index : $P.sameVehicleControl.main.getCurrent()["ROW_NUM"] - 1
	            };
				$P.sameVehicleControl.main.load(1);
			    break;
			default: break;
		}
	}

	$P.searchInspectionList = () => {
		switch ($P.currentDisplay) {
			case "photoInspection":
				$P.photoInspectionControl.query = $P.getParams();
			    $P.photoInspectionControl.load(1);
				break;
			case "sameVehicleInspection":
				$P.sameVehicleControl.main.query = $P.getParams();
			    $P.sameVehicleControl.main.load(1);
				break;
			default: break;
		}
	}
	$P.searchDetailInspectionDataList = (dataKey) => {
		$P.sameVehicleControl.sub.query = { "crdnIDs" : dataKey.split(",") };
		$P.sameVehicleControl.sub.query.taskSeCd = $P.sameVehicleControl.main.query.taskSeCd;
	    $P.sameVehicleControl.sub.load(0);
	}

	$P.scrollEnd = (obj) => {
		if(obj.dataset.scrollStatus){
			return;
		}

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

    	if((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()){
    		obj.dataset.scrollStatus = "waiting";
			$P.scrollInspectionDataList();
    	}
	}

	$P.scrollInspectionDataList = () => {
		switch ($P.currentDisplay) {
			case "photoInspection":
				$P.photoInspectionControl.load($P.photoInspectionControl.query.pageNum + 1);
				break;
			case "sameVehicleInspection":
				$P.sameVehicleControl.main.load($P.sameVehicleControl.main.query.pageNum + 1);
				break;
			default: break;
		}
	}
	$P.clickInspectionDataList = (dataKey, gridType, auto) => {
		switch (gridType) {
			case "photoInspection":

				if(dataKey == ""){
					$("#curDataVhrno--${pageName}").html("");
					$("#nextDataVhrno--${pageName}").html("");
					$("#curDataFiles--${pageName}").html("");
					$("#nextDataFiles--${pageName}").html("");
					return;
				}

				$("#photoInspectionTbody--${pageName}").setCurrentRow(dataKey);

				var curDataVhrno = $P.photoInspectionControl.dataset.getData(dataKey)["VHRNO"];
				var nextData = $P.photoInspectionControl.getNext(dataKey);
				var nextDataKey = nextData != null ? nextData.CRDN_ID : "";
				var nextDataVhrno = nextData != null  ? nextData.VHRNO : "";

				$("#curDataVhrno--${pageName}").html(curDataVhrno);
				$("#nextDataVhrno--${pageName}").html(nextDataVhrno);

				ajax.get({
					url:"file/list.do",
					data: {
						infoType : "100",
						infoKeys : [dataKey, nextDataKey],
						fetchSize : 0
					},
					success : resp => {

						var fileList = resp.fileList;

						var currentDataFileList = fileList.filter(x => x.INF_KEY == dataKey);
						var nextDataFileList = fileList.filter(x => x.INF_KEY == nextDataKey);

						$("#curDataFiles--${pageName}").html("");
						$("#nextDataFiles--${pageName}").html("");

						currentDataFileList.forEach(function(item, index, array){
							var output = fnMakeImgTag(item.URL, item.FILE_NM);
							$("#curDataFiles--${pageName}").append(output);
						});
						nextDataFileList.forEach(function(item, index, array){
							var output = fnMakeImgTag(item.URL, item.FILE_NM);
							$("#nextDataFiles--${pageName}").append(output);
						});

					}
				});

				if(!auto){
					$P.photoInspectionControl.setCurrent(dataKey);
				}

				break;
			case "sameVehicleInspectionMain":
				if(dataKey == ""){
					$P.sameVehicleControl.sub.setData([]);
					return;
				}
				$("#sameVehicleInspectionMainTbody--${pageName}").setCurrentRow(dataKey);
				$P.searchDetailInspectionDataList(dataKey);
				if(!auto){
					$P.sameVehicleControl.main.setCurrent(dataKey);
				}
				break;
			case "sameVehicleInspectionSub":
				if(dataKey == ""){
					return;
				}
				$("#sameVehicleInspectionSubTbody--${pageName}").setCurrentRow(dataKey);
				if(!auto){
					$P.sameVehicleControl.sub.setCurrent(dataKey);
				}
				break;
		}
	}
	$P.dblclickInspectionDataList = (dataKey, gridType) => {

		var taskSeCd = $("#frmSearch--${pageName} input[name='taskSeCd']:checked").val();

		var dialogUrl = wctx.url("/"+taskSeCd+"/sprt/sprt02/010/main.do");

		let params = {
			  callControlName : "pageObject['${pageName}'].photoInspectionControl"
			, crdnId : dataKey
		}

		ajax.get({
			url : dialogUrl,
			data : params,
			success : resp => {

				dialog.open({
					id : "totalDialog--${pageName}",
					title : "개별총정보", size : "xxl", content : resp,
					init : () => {}
				});

			}
		});
	}

	$P.openLevyExclPop = (levyExclSeCd) => {
		var info = "";

		if ($P.currentDisplay == "photoInspection") {
			info = $P.photoInspectionControl.dataset.getCurrent("item");
		} else if ($P.currentDisplay == "sameVehicleInspection") {
			info = $P.sameVehicleControl.sub.dataset.getCurrent("item");
		} else {
			return;
		}

		if (info == undefined || info == "") {
			return;
		}

		var params = {
			"crdnId" : info.data.CRDN_ID,
			"levyExclSeCd" : levyExclSeCd,
			"savedCallbackFuncName" : "pageObject['${pageName}']['popupSavedCallback']",
			"callPurpose" : "create"
		};

		ajax.get({
			url : wctx.url("/excl/excl01/020/info.do"),
			data : params,
			success : resp => {

				if((typeof resp) != "string"){
					dialog.alert(resp.message);
					return;
				}

				dialog.open({
					id : "levyExcldialog",
					title : "부과제외 정보",
					content : resp,
					size : "lg",
					init : () => {},
					onClose : () => {}
				});

			}
		});
	};

	$P.openOverTimePop = () => {

		if ($P.currentDisplay != "photoInspection") {
			return;
		}

		var info = $P.photoInspectionControl.dataset.getCurrent("item");

		if (info == undefined || info == "") {
			return;
		}

		var params = {
			"crdnId" : info.data.CRDN_ID,
			"openerPageName" : "${pageName}",
			"savedCallbackFuncName" : "pageObject['${pageName}']['popupSavedCallback']"
		};

		ajax.get({
			url : wctx.url("/PVS/crdn/crdn02/050/info.do"),
			data : params,
			success : resp => {

				if((typeof resp) != "string"){
					dialog.alert(resp.message);
					return;
				}

				dialog.open({
					id : "overTimeProcessDialog--${pageName}",
					title : "2시간 초과 처리",
					content : resp,
					size : "lg",
					init : () => {},
					onClose : () => {}
				});
			}
		});
	}

	$P.popupSavedCallback = (saved) => {
		if(saved){
			$P.refreshInspectionList();
		}
	}

	$P.renderInspectionDataList = (total, renderDataType) => {

	    switch (renderDataType) {
			case "photoInspection":
				var dataList = $P.photoInspectionControl.dataset;
				var empty = dataList.empty;
				var notFound = [document.getElementById("photoInspectionNotFound--${pageName}").innerHTML]
				var found = document.getElementById("photoInspectionRow--${pageName}").innerHTML;
				var replacer = (str, dataItem) => str
				    .replace(/{onclick}/gi, "pageObject['${pageName}'].clickInspectionDataList('" + dataItem.getValue("CRDN_ID") + "','photoInspection');")
		            .replace(/{ondblclick}/gi, "pageObject['${pageName}'].dblclickInspectionDataList('" + dataItem.getValue("CRDN_ID") + "','photoInspection');");
				var trs = empty ? notFound : dataList.inStrings(found, replacer);
				$("#photoInspectionTbody--${pageName}").html(trs.join());

				if(total == dataList.length){
					$("#photoInspection-responsive--${pageName}").attr("data-scroll-status", "complete");
				} else {
					$("#photoInspection-responsive--${pageName}").removeAttr("data-scroll-status");
				}

				if($P.photoInspectionControl.untilPageNum != 0){
					$P.photoInspectionControl.query.fetchSize = $P.photoInspectionControl.defaultFetchSize;
					$P.photoInspectionControl.query.pageNum = $P.photoInspectionControl.untilPageNum;
					$P.photoInspectionControl.untilPageNum = 0;
				}
				break;
			case "sameVehicleInspectionMain":
				var dataList = $P.sameVehicleControl.main.dataset;
				var empty = dataList.empty;
				var notFound = [document.getElementById("sameVehicleInspectionMainNotFound--${pageName}").innerHTML];
				var found = document.getElementById("sameVehicleInspectionMainRow--${pageName}").innerHTML;
				var replacer = (str, dataItem) => str
					.replace(/{onclick}/gi, "pageObject['${pageName}'].clickInspectionDataList('" + dataItem.getValue("CRDN_ID_LIST") + "','sameVehicleInspectionMain');");
				var trs = empty ? notFound : dataList.inStrings(found, replacer);
				$("#sameVehicleInspectionMainTbody--${pageName}").html(trs.join());

				if(total == dataList.length){
					$("#sameVehicleInspectionMain-responsive--${pageName}").attr("data-scroll-status", "complete");
				} else {
					$("#sameVehicleInspectionMain-responsive--${pageName}").removeAttr("data-scroll-status");
				}

				if($P.sameVehicleControl.untilPageNum != 0){
					$P.sameVehicleControl.main.query.fetchSize = $P.sameVehicleControl.defaultFetchSize;
					$P.sameVehicleControl.main.query.pageNum = $P.sameVehicleControl.untilPageNum;
					$P.sameVehicleControl.untilPageNum = 0;
				}
				break;
			case "sameVehicleInspectionSub":
				var dataList = $P.sameVehicleControl.sub.dataset;
				var empty = dataList.empty;
				var notFound = [document.getElementById("sameVehicleInspectionSubNotFound--${pageName}").innerHTML]
				var found = document.getElementById("sameVehicleInspectionSubRow--${pageName}").innerHTML;
				var replacer = (str, dataItem) => str
					.replace(/{onclick}/gi, "pageObject['${pageName}'].clickInspectionDataList('" + dataItem.getValue("CRDN_ID") + "','sameVehicleInspectionSub');")
		        	.replace(/{ondblclick}/gi, "pageObject['${pageName}'].dblclickInspectionDataList('" + dataItem.getValue("CRDN_ID") + "','sameVehicleInspectionSub');");
				var trs = empty ? notFound : dataList.inStrings(found, replacer);
				$("#sameVehicleInspectionSubTbody--${pageName}").html(trs.join());
				break;
			default: break;
		}

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

	$P.getParams = () => {
		var formFields = new FimsFormFields("#frmSearch--${pageName}");
		var data = formFields.get();

		if($P.currentDisplay == "photoInspection"){
			data.fetchSize = $P.photoInspectionControl.defaultFetchSize;
		} else if($P.currentDisplay == "sameVehicleInspection"){
			data.fetchSize = $P.sameVehicleControl.defaultFetchSize;
		}

		return data;
	}

	/**************************************************************************
	 * element.on
	 **************************************************************************/
    $('#btnReset--${pageName}').on('click', () => $P.fnReset()); //초기화버튼
    $('#btnPhotoInspection--${pageName}').on('click', () => {

    	$(".area-photoinspection").show();
    	$(".area-samevehicleinspection").hide();

		$('#btnPhotoInspection--${pageName}').addClass("active");
		$('#btnSameVehicleInspection--${pageName}').removeClass("active");
    	$P.currentDisplay = "photoInspection";
    });
    $('#btnSameVehicleInspection--${pageName}').on('click', () => {

    	$(".area-samevehicleinspection").show();
    	$(".area-photoinspection").hide();

		$('#btnSameVehicleInspection--${pageName}').addClass("active");
		$('#btnPhotoInspection--${pageName}').removeClass("active");
    	$P.currentDisplay = "sameVehicleInspection";
    });
    $('#btnSearch--${pageName}').on('click', () => $P.searchInspectionList()); //검색버튼

	$("#btnInstLevyExcl--${pageName}").on("click", () => $P.openLevyExclPop("1"));

	//스크롤 이벤트 추가(동일차량검사)
	$("#photoInspection-responsive--${pageName}").scroll(function(){ $P.scrollEnd(this); });
	$("#sameVehicleInspectionMain-responsive--${pageName}").scroll(function(){ $P.scrollEnd(this); });

	/**************************************************************************
	 * 초기화
	 **************************************************************************/
    initDatepicker("frmSearch--${pageName}"); //달력 초기화
    initDetailSearchButton("frmSearch--${pageName}");

    var defaultBizValue = $("#layout-navbar input[name='taskSeCd']:checked").val();
	$("#frmSearch--${pageName} input[name='taskSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
	$P.fnResetAndChangeBiz(defaultBizValue);

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

});

</script>