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

<div class="d-flex flex-row justify-content-evenly">
	<div class="card" style="max-width:1000px;">
		<form id="frmEdit--${pageName}">
			<input type="hidden" id="crdnId--${pageName}" name="crdnId" data-map="CRDN_ID" />
			<input type="hidden" id="rtpyrId-${pageName}" name="rtpyrId" data-map="RTPYR_ID" />
			<input type="hidden" id="sggCd--${pageName}" name="sggCd" data-map="SGG_CD" />
			<input type="hidden" id="taskSeCd--${pageName}" name="taskSeCd" data-map="TASK_SE_CD" />

			<div class="row mt-4 justify-content-end mb-3">
				<div class="col-md-12 ps-4 pe-4">
					<button type="button" id="btnReset--${pageName}" class="btn btn-primary">초기화</button>
					<span class="float-end">
						<input type="text" id="countStauts--${pageName}" class="form-control w-px-150 text-center fw-bold" readonly />
						<button type="button" id="btnPrev--${pageName}" class="w-px-50 btn-PageUp">◀</button>
						<button type="button" id="btnNext--${pageName}" class="w-px-50 btn-PageDown">▶</button>
					</span>
				</div>
			</div>

			<div class="row g-1">
				<div class="col-md-12" slot="edit">
					<template class="pvs bpv">
						<slot>
							<label for="crdnSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">단속구분</label>
							<select id="crdnSeCd--${pageName}" name="crdnSeCd" data-map="CRDN_SE_CD" class="form-select">
								<c:forEach items="${FIM002List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
				<div class="col-md-4">
					<label for="crdnYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
						위반일자
					</label>
					<input type="text" id="crdnYmd--${pageName}" name="crdnYmd" data-map="CRDN_YMD"
						class="form-control form-date" data-fmt-type="day" maxlength="10" required />
		            <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
				</div>
				<div class="col-md-4">
					<label for="crdnTm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end required">
						위반시간
					</label>
		            <input type="text" id="crdnTm--${pageName}" name="crdnTm" data-map="CRDN_TM"
		            	class="form-control form-time" data-fmt-type="time" maxlength="8" required
		            	placeholder="시:분:초" />
				</div>
				<div class="col-md-4">
					<label for="vhrno--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">
						차량번호
					</label>
					<input type="text" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" class="form-control"
						data-maxlengthb="30" />
				</div>
				<div class="col-md-6">
					<label for="vltnCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">
						위반내용
					</label>
					<select id="vltnCd--${pageName}" name="vltnCd" class="form-select" data-map="VLTN_CD">
						<c:forEach items="${VLTNList}" var="item">
							<option value="${item.code}">${item.value}</option>
		                </c:forEach>
					</select>
					<label for="dstrbncYn--${pageName}">
						<input type="checkbox" id="dstrbncYn--${pageName}" name="dstrbncYn" data-map="DSTRBNC_YN" value="Y" />
						1면 방해
					</label>
				</div>
				<div class="col-md-6 select2-primary">
					<label for="crdnStdgNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
					<input type="text" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" 
					class="form-control" list="stdgNmList--${pageName}" />
					<datalist id="stdgNmList--${pageName}">
						<c:forEach items="${stdgNmList}" var="item">
							<option value="${item}"></option>
						</c:forEach>
					</datalist>
				</div>
				<div class="col-md-6">
					<label for="crdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">위반장소</label>
					<input type="text" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC"
						class="form-control w-px-300" data-maxlengthb="200" />
				</div>
				<div class="col-md-6" slot="edit">
					<template class="bpv">
						<slot>
							<label for="dtlCrdnPlc--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세위반장소</label>
							<input type="text" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" class="form-control"
								data-maxlenghb="200" />
						</slot>
					</template>
					<template class="pvs">
						<slot>
							<label for="crdnSpareaCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
							<select id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD" class="form-select">
								<c:forEach items="${FIM007List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
				<div class="col-md-6">
					<label for="cvlcptAplcntNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">신고자</label>
					<input type="text" id="cvlcptAplcntNm--${pageName}" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM"
						class="form-control" readonly />
				</div>
				<div class="col-md-6">
					<label for="cvlcptPrcsPicNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">담당자</label>
					<input type="text" id="cvlcptPrcsPicNm--${pageName}" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM"
						class="form-control" readonly />
				</div>
				<div class="col-md-12">
					<label for="cvlcptAplyCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end align-top"
					>신고내용</label>
					<textarea type="text" id="cvlcptAplyCn--${pageName}" name="cvlcptAplyCn" data-map="CVLCPT_APLY_CN"
						class="form-control" cols="100%" rows="4" readonly
					></textarea>
				</div>
				<div class="col-md-6">
					<label for="cvlcptRcptYmd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">접수일</label>
					<input type="text" id="cvlcptRcptYmd--${pageName}" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD"
						class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
				</div>
				<div class="col-md-6">
					<label for="cvldptPrcsPrnmntDt--${pageName}"
						class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">답변기한</label>
					<input type="text" id="cvldptPrcsPrnmntDt--${pageName}" name="cvldptPrcsPrnmntDt" data-map="CVLCPT_PRCS_PRNMNT_DT"
						class="form-control form-date" data-fmt-type="day" maxlength="10" disabled />
				</div>
				<div class="col-md-12">
					<label for="etcCn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
					<input type="text" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN"
						class="form-control w-px-500" data-maxlengthb="1000" />
				</div>
				<div class="col-md-4">
					<label for="rtpyrNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">소유자</label>
					<input type="text" id="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" class="form-control"
						/>
				</div>
				<div class="col-md-4">
					<label for="rtpyrSeCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호구분</label>
					<select id="rtpyrSeCd--${pageName}" name="rtpyrSeCd" data-map="RTPYR_SE_CD" class="form-select">
						<c:forEach items="${FIM011List}" var="item">
							<option value="${item.code}">${item.value}</option>
		                </c:forEach>
					</select>
				</div>
				<div class="col-md-4">
					<label for="rtpyrNo--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주민번호</label>
					<input type="text" id="rtpyrNo--${pageName}" name="rtpyrNo" data-map="RTPYR_NO" class="form-control privacy" />
					<input type="text" id="mask-rtpyrNo--${pageName}" class="form-control privacy-mask" disabled value="******"/>
				</div>
				<div class="col-md-12">
					<label for="addr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
					<input type="text" id="addr--${pageName}" name="addr" data-map="ADDR" class="form-control w-px-700"
						data-maxlengthb="320" />
				</div>
				<div class="col-md-12">
					<label for="dtlAddr--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">상세주소</label>
					<input type="text" id="dtlAddr--${pageName}" name="dtlAddr" data-map="DTL_ADDR" class="form-control w-px-700"
						data-maxlengthb="200" />
				</div>
				<div class="col-md-6">
					<label for="zip--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">우편번호</label>
					<input type="text" id="zip--${pageName}" name="zip" data-map="ZIP" class="form-control w-px-100"
						maxlength="7" pattern="(\d{3}-\d{3}|\d{6}|\d{5})" />
					<button type="button" class="btn btn-sm btn-outline-dark" onclick="">검색</button>
				</div>
				<div class="col-md-6">

				</div>
				<div class="col-md-4">
					<label for="vin--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
					<input type="text" id="vin--${pageName}" name="vin" data-map="VIN" class="form-control" readonly
						placeholder="입력항목이 아닙니다." />
				</div>
				<div class="col-md-4">
					<label for="vhclNm--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
					<input type="text" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" class="form-control" readonly
						placeholder="입력항목이 아닙니다." />
				</div>
				<div class="col-md-4">
					<label for="vhclColor--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
					<input type="text" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" class="form-control" readonly
						placeholder="입력항목이 아닙니다." />
				</div>
				<div class="col-md-12" slot="edit">
					<template class="pvs bpv">
						<slot>
							<label for="ffnlgCarmdlCd--${pageName}" 
							class="w-px-150 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
							<select id="ffnlgCarmdlCd--${pageName}" name ="ffnlgCarmdlCd" data-map="FFNLG_CARMDL_CD" 
							class="form-select">
								<option value=""></option>
								<c:forEach items="${FIM009List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
				<div class="col-md-12" slot="edit">
					<template class="eca">
						<slot>
							<label for="useFuelCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
							<select id="useFuelCd--${pageName}" name="useFuelCd" data-map="USE_FUEL_CD" class="form-select" disabled>
								<option value=""></option>
								<c:forEach items="${LVS005List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
				<div class="col-md-4" slot="edit">
					<template class="dpv eca pvs">
						<slot>
							<label for="towngYn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
							<select id="towngYn--${pageName}" name="towngYn" class="form-select" data-map="TOWNG_YN">
								<c:forEach items="${FIM053List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
				<div class="col-md-4" slot="edit">
					<template class="dpv eca pvs">
						<slot>
							<label for="crdnSn--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
							<input type="text" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" class="form-control"
								maxlength="20" data-maxlengthb="20" />
						</slot>
					</template>
				</div>
				<div class="col-md-4" slot="edit">
					<template class="dpv">
						<slot>
							<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
							<select id="parkngPsbltyRsltCd--${pageName}" name="parkngPsbltyRsltCd" data-map="PARKNG_PSBLTY_RSLT_CD" class="form-select">
								<c:forEach items="${FIM034List}" var="item">
									<option value="${item.code}">${item.value}</option>
				                </c:forEach>
							</select>
						</slot>
					</template>
				</div>
			</div>

			<div class="row mt-4 justify-content-end mb-3">
				<div class="col-md-12">
					<div class="float-end pe-4">
						<button type="button" id="btnInstLevyExcl1--${pageName}" class="btn btn-primary">저장(서손처리)</button>
						<button type="button" id="btnInstLevyExcl2--${pageName}" class="btn btn-primary">저장(계고처리)</button>
						<button type="button" id="btnAccept--${pageName}" class="btn btn-primary">저장(수용)</button>
						<button type="button" id="btnSendBack--${pageName}" class="btn btn-primary">반송</button>
						<button type="button" id="btnDataCopy--${pageName}" class="btn btn-primary">자료복사</button>
						<button type="button" id="btnHold--${pageName}" class="btn btn-primary">처리보류</button>
						<button type="button" id="btnOpenCvlcptOrgnl--${pageName}" class="btn btn-primary">원본보기</button>
					</div>
				</div>
			</div>

		</form>
	</div>
	<div class="card" style="width:500px;">
		<form id="frmFile--${pageName}" method="post" enctype="multipart/form-data">
			<input type="file" id="newFileList--${pageName}" name="newFileList" multiple accept="image/*" hidden />
			<input type="file" id="modifyFileList--${pageName}" name="modifyFileList" multiple accept="image/*" hidden />
		</form>

		<div class="col-md-12 d-flex justify-content-between">
			<div class="fs-4 fw-bold">등록된 사진</div>
			<div>
				<button type="button" id="btnEditPhoto--${pageName}" class="btn btn-primary">선택 사진 편집</button>
				<button type="button" id="btnDeleteExistPhoto--${pageName}" class="btn btn-primary">선택 사진 삭제</button>
			</div>
		</div>
		<div id="displayForExist--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
		</div>

		<form id="frmUploadSet--${pageName}" method="post" enctype="multipart/form-data">
			<input type="file" id="inputUploadSet--${pageName}" name="inputUploadSet" multiple accept="image/*" hidden />
		</form>
		<div class="col-md-12 d-flex justify-content-between">
			<div class="fs-4 fw-bold">추가한 사진</div>
			<div>
				<button type="button" id="btnAddFile--${pageName}" class="btn btn-primary">사진 추가</button>
				<button type="button" id="btnOpenVideoCapture--${pageName}" class="btn btn-primary">동영상 캡쳐</button>
				<button type="button" id="btnCancelAddFile--${pageName}" class="btn btn-primary">선택 사진 삭제</button>
			</div>
		</div>
		<div id="displayForNew--${pageName}" style="overflow-y: scroll;min-height: 40px;max-height: 340px;border-style: solid;">
		</div>
	</div>
</div>
<label for="" id="refreshEnd--${pageName}" class="parentGrid" hidden></label>
<script>
/**************************************************************************
 * Global Variable
 **************************************************************************/
pageObject["${pageName}"] = {};
pageObject["${pageName}"].provided = {};

pageObject.childReq = [];
pageObject.childReq.push({
	getCountStatus : function(){ return ""; },
	getNextKey : function(){ return ""; },
	getPrevKey : function(){ return ""; },
	selectRow : function(){},
	holdRow : function(){},
	refreshList : function(){},
	hasData : function(){ return true; }
});

$(document).ready(function(){

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

	if(pageObject.parentRes.length > 0){
		$P.provided = pageObject.parentRes.pop();
	} else {
		$P.provided = pageObject.childReq.pop();
	}

	$P.existFileArr = [];

	$P.captureFileArr = [];
	$P.localUploadArr = [];
	$P.numberPlateArr = [];

	/**************************************************************************
	 * DatasetControl, Dataset, FormFields
	 **************************************************************************/
	$P.formFields = new FimsFormFields("#frmEdit--${pageName}");

	$P.uploadSet = uploadSupport("#inputUploadSet--${pageName}");

	$P.crdnControl = new DatasetControl({
	    urls : {
	    	load : "",
	    	getInfo : wctx.url("/${taskSeCd}/cvlc/cvlc01/020/info.do"),
	    	update : wctx.url("/${taskSeCd}/cvlc/cvlc01/020/update.do"),
	    	create : wctx.url("/${taskSeCd}/cvlc/cvlc01/020/create.do"),
	    	remove : wctx.url("/${taskSeCd}/cvlc/cvlc01/020/remove.do")
	    },
	    keymapper:info => info ? info.CRDN_ID : "",
	    dataGetter:obj => obj.crdnInfo,
	    formats: {

		}
	});


	$P.crdnControl.save = (info, accept) => {
		if (!info) return;

		var formData = new FormData(document.getElementById("frmFile--${pageName}"));
		for(var key in info) {
		    var value = info[key];
		    formData.append(key,value);
		}

		formData.delete("newFileList");
		formData.delete("modifyFileList");

		if($P.localUploadArr.length > 0){
			$P.localUploadArr.forEach(item => formData.append("newFileList",item));
		}
		if($P.numberPlateArr.length > 0){
			$P.numberPlateArr.forEach(item => formData.append("newFileList",item));
		}
		if($P.captureFileArr.length > 0){
			$P.captureFileArr.forEach(item => formData.append("newFileList",item));
		}

		if($P.existFileArr.length > 0){
			for(var i=0; i < $P.existFileArr.length; i++){
				if($P.existFileArr[i].status == "delete"){
					formData.append("deleteFileKeyList", $P.existFileArr[i].FILE_ID);
				} else if($P.existFileArr[i].status == "modified"){
					formData.append("modifyFileKeyList", $P.existFileArr[i].FILE_ID);
					formData.append("modifyFileList", $P.existFileArr[i]);
				}
			}
		}

		if(accept){
			formData.append("acceptYn", "Y");
		} else {
			formData.append("acceptYn", "N");
		}

		ajax.post({
			url : $P.crdnControl.urls.update,
			data : formData, contentType : false, processData : false,
			success : resp => { $P.crdnControl.onSave(resp); }
		});
	};

	/**************************************************************************
	 * DatasetControl.on, Dataset.on
	 **************************************************************************/
	$P.crdnControl.onCurrentChange = (item) => {
		$P.formFields.set(item);
	}

	$P.uploadSet.onDatasetChange  = () => {
		var files = $P.uploadSet.getDataset();
		files.forEach(item => $P.localUploadArr.push(item));

		$P.fnDisplay(false);
	};
	$P.uploadSet.onRemove = () => { };

	$P.crdnControl.onSave = (resp) => {
		if (resp.saved) {

			dialog.alert("저장됐습니다.");

			if($("#levyExcldialog--${pageName}").length > 0){
				dialog.close("levyExcldialog--${pageName}");
			}

			var crdnId = $("#crdnId--${pageName}").val();

			var cursorKey = "";

			var nextKey = $P.provided.getNextKey(crdnId);
	    	if(nextKey != ""){
	    		cursorKey = nextKey;
	    	} else {
	    		var prevKey = $P.provided.getPrevKey(crdnId);
				if(prevKey != ""){
					cursorKey = prevKey;
				}
	    	}

	    	$("#refreshEnd--${pageName}").attr("data-cursor-key", cursorKey);
			$P.provided.refreshList();
		}
	};
	/**************************************************************************
	 * pageObject.function
	 **************************************************************************/
	$P.fnMakeImgForExistFile = (fileArr) => {
		var tagsText = "";

		for(var index = 0, j = 0; index < fileArr.length; index++){
			var item = fileArr[index];

			if(item.status == "delete"){
				continue;
			}

			tagsText += "<label class='mx-2'>";
			tagsText += "<input type='radio' name='existPhoto' class='form-check-input' value='"+item.FILE_ID +"' ";
			if(index == 0){
				tagsText += " checked='checked' ";
			}
			tagsText += " />";
			tagsText += "<img src='"+ item.URL +"' width='200' height='200' />";
			tagsText += "</label>";

			if(j % 2 == 1){
				tagsText += "<br />";
			}

			j++;
		}

		return tagsText;
	}


	$P.fnMakeImgForNewFile = (fileArr) => {
		var tagsText = "";

		for(var index = 0; index < fileArr.length; index++){
			var item = fileArr[index];

			tagsText += "<label class='mx-2'>";
			tagsText += "<input type='checkbox' name='newPhoto' class='form-check-input' value='"+item.id +"' ";
			tagsText += " />";
			tagsText += "<img src='"+ item.url +"' width='200' height='200' />";
			tagsText += "</label>";

			if(index % 2 == 1){
				tagsText += "<br />";
			}
		}

		return tagsText;
	}

	$P.fnDisplay = (isExist) => {
		if(isExist){
			var displayArea = document.querySelector("#displayForExist--${pageName}");
			var tagsText = $P.fnMakeImgForExistFile($P.existFileArr);

			if(tagsText == ""){
				displayArea.innerHTML = "등록된 사진이 없습니다.";
				$("#btnEditPhoto--cvlc01020-info").hide();
			} else {
				displayArea.innerHTML = tagsText;
				$("#btnEditPhoto--cvlc01020-info").show();
			}
		} else {
			var displayArea = document.querySelector("#displayForNew--${pageName}");
			var concatArr = $P.localUploadArr.concat($P.numberPlateArr).concat($P.captureFileArr);
			var tagsText = $P.fnMakeImgForNewFile(concatArr);
			displayArea.innerHTML = tagsText;
		}
	};


	$P.fnReset = () => {
		var crdnId = $("#crdnId--${pageName}").val();

		$P.fnGo(crdnId);
	}

	$P.fnAccept = () => {

		if(!customValidate($("#frmEdit--${pageName} input"))) return;

		var vhrno = document.getElementById("vhrno--${pageName}");
		var rtpyrNm = document.getElementById("rtpyrNm--${pageName}");

		if(vhrno.value == ""){
			dialog.alert({
				content:"수용 처리를 하기 위해선 차량번호가 입력되어야 합니다.",
				onClose:function(){vhrno.focus();}
			});
			return;
		}

		if(rtpyrNm.value == ""){
			dialog.alert({
				content:"수용 처리를 하기 위해선 소유주정보가 입력되어야 합니다.",
				onClose:function(){rtpyrNm.focus();}
			});
			return;
		}

		if(confirm("현재 단속 정보를 저장하시겠습니까?")){
			$P.crdnControl.save($P.formFields.get(), true);
		}

	};

	
	$P.fnSendBack = () => {
		if(!confirm("반송 처리 하시겠습니까?")){
			return;
		}
		
		var crdnId = $("#crdnId--${pageName}").val();
		
		ajax.post({
			url : $P.crdnControl.urls.remove,
			data : { crdnId : crdnId }, 
			success : resp => { 
				if(resp.saved){
					var message = "민원회수 요청이 등록되었습니다.\n"
						+"30~60분 사이에 서버에서 민원시스템으로 전송이 진행되니 이후에 민원시스템에서 확인하시기 바랍니다.";
					dialog.alert(message);
					
					var crdnId = $("#crdnId--${pageName}").val();

					var cursorKey = "";

					var nextKey = $P.provided.getNextKey(crdnId);
			    	if(nextKey != ""){
			    		cursorKey = nextKey;
			    	} else {
			    		var prevKey = $P.provided.getPrevKey(crdnId);
						if(prevKey != ""){
							cursorKey = prevKey;
						}
			    	}

			    	$("#refreshEnd--${pageName}").attr("data-cursor-key", cursorKey);
					$P.provided.refreshList();
				}
			}
		});
	}
	
	$P.videoCallback = (snapshots) => {
		snapshots.forEach(function(canvas, index, array){
			canvas.toBlob(function(blob){
				var identify = new Date().getTime()+ "-" + index;
				var file = new File([blob], "capture-"+identify+".png", {type: "image/png"});
				file.id = "file-" + identify;
				file.url = (window.URL || window.webkitURL).createObjectURL(file);
				$P.captureFileArr.push(file);
				if(index === array.length - 1){
					$P.fnDisplay(false);
				}
			});
		});

	}

	$P.editPhotoCallback = (modifiedFile, originalFileInfo, isNumberPlate) => {

		modifiedFile.id = "file-" + new Date().getTime() + "-" + "0";
		modifiedFile.url = (window.URL || window.webkitURL).createObjectURL(modifiedFile);

		if(isNumberPlate){
			$P.numberPlateArr.push(modifiedFile);
			$P.fnDisplay(false);
		} else {
			$P.existFileArr.forEach(function(item,index){
				if(item.FILE_ID == originalFileInfo.FILE_ID){
					modifiedFile.URL = modifiedFile.url;
					modifiedFile.FILE_ID = originalFileInfo.FILE_ID;
					modifiedFile.status = "modified";
					$P.existFileArr.splice(index, 1, modifiedFile);
				};
			});

			$P.fnDisplay(true);
		}
	}

	$P.openLevyExclPop = (levyExclSeCd) => {

		if(levyExclSeCd == "2"){
			var rtpyrNm = document.getElementById("rtpyrNm--${pageName}");

			if(rtpyrNm.value == ""){
				dialog.alert({
					content:"계고 처리를 하기 위해선 소유주정보가 입력되어야 합니다.",
					onClose:function(){rtpyrNm.focus();}
				});
				return;
			}
		}

		var crdnId = $("#crdnId--${pageName}").val();

		var params = {
			"crdnId" : crdnId,
			"levyExclSeCd" : levyExclSeCd,
			"saveCallbackFuncName" : "pageObject['cvlc01020-info']['exclSaveCallback']",
			"callPurpose" : "create"
		};

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

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


	$P.exclSaveCallback = function(exclInfo){

		var mergeInfo = {...$P.formFields.get(), ...exclInfo}

		$P.crdnControl.save(mergeInfo, false);
	}

	$P.fnPrev = () => {
		var prevKey = $P.provided.getPrevKey($("#crdnId--${pageName}").val());
		if(prevKey != ""){
			$P.fnGo(prevKey);
		}
	}

	$P.fnNext = () => {
		var nextKey = $P.provided.getNextKey($("#crdnId--${pageName}").val());
		if(nextKey != ""){
			$P.fnGo(nextKey);
		}
	}

	$P.fnGo = (crdnId) => {
		ajax.get({
			url: $P.crdnControl.urls.getInfo,
			data: { "crdnId" : crdnId },
			headers: {
			    Accept: "application/json; charset=utf-8"
			},
			success : resp => {
				var crdnInfo = resp.crdnInfo;
				crdnInfo.CVLCPT_APLY_CN = escapeHTMLEntity(crdnInfo.CVLCPT_APLY_CN);
				$P.crdnControl.setData([crdnInfo]);

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

				var cs = $P.provided.getCountStatus($("#crdnId--${pageName}").val());
				$("#countStauts--${pageName}").val(cs);
				$P.provided.selectRow(crdnId);

				if(crdnInfo.videoExist == "N"){
					$("#btnOpenVideoCapture--${pageName}").hide();
				} else {
					$("#btnOpenVideoCapture--${pageName}").show();
				}

				$P.existFileArr = [];
				if(crdnInfo.fileList){
					crdnInfo.fileList.forEach(function(item){
						item.status = "";
						$P.existFileArr.push(item);
					});
				}
				$P.fnDisplay(true);

				$P.captureFileArr = [];
				$P.localUploadArr = [];
				$P.numberPlateArr = [];
				$("#inputUploadSet--${pageName}")[0].value = "";
				$P.fnDisplay(false);
			}
		});
	}

	$P.fnCopy = () => {
		var crdnId = $("#crdnId--${pageName}").val();

		if(confirm("현 자료의 복사본을 생성하시겠습니까?")){

			ajax.get({
				url : $P.crdnControl.urls.create,
				data : { crdnId : crdnId },
				success : resp => {
					if (resp.saved) {
						dialog.alert("복사 자료가 생성되었습니다.");
						$("#refreshEnd--${pageName}").attr("data-cursor-key", crdnId);
						$P.provided.refreshList();
					}
				}
			});
		}

	}

	$P.fnOpenCvlcptOrgnl = () => {
		var crdnId = $("#crdnId--${pageName}").val();

		var dialogId = "cvlcptOrgnlDialog--${pageName}";

		ajax.get({
			url : wctx.url("/${taskSeCd}/cvlc/cvlc01/050/info.do"),
			data : { crdnId : crdnId },
			success : resp => {
				dialog.open({
					id : dialogId,
					title : "민원내역 원본",
					content : resp,
					size : "xl",
					init : () => {

					}
				});
			}
		});
	}

	$P.fnHold = () => {
		var crdnId = $("#crdnId--${pageName}").val();

		$P.provided.holdRow(crdnId);

		var nextKey = $P.provided.getNextKey(crdnId);
    	if(nextKey != ""){
    		$P.fnGo(nextKey);
    		return;
    	}
    	var prevKey = $P.provided.getPrevKey(crdnId);
		if(prevKey != ""){
			$P.fnGo(prevKey);
			return;
		}

		dialog.close("cvlcptInitialDataEditDialog--${openerPageName}");
	}

	/**************************************************************************
	 * 초기화(업무별 입력항목)
	 **************************************************************************/
	var clsForTask = "${taskSeCd}".toLowerCase();

	//업무별 입력 항목
	renderForTask('frmEdit--${pageName}', clsForTask);

	/**************************************************************************
	 * element.on
	 **************************************************************************/
	$("#btnReset--${pageName}").on("click", () => $P.fnReset() );	
	$("#btnPrev--${pageName}").on("click", () => $P.fnPrev() );
	$("#btnNext--${pageName}").on("click", () => $P.fnNext() );
	
	//업무처리 버튼
	$("#btnSendBack--${pageName}").on('click', () => { $P.fnSendBack(); });
	$("#btnInstLevyExcl1--${pageName}").on("click", () => $P.openLevyExclPop("1"));
	$("#btnInstLevyExcl2--${pageName}").on("click", () => $P.openLevyExclPop("2"));
	$("#btnDataCopy--${pageName}").on("click", () => $P.fnCopy());
	$("#btnAccept--${pageName}").on('click', () => $P.fnAccept());
	$("#btnHold--${pageName}").on("click", () => $P.fnHold());
	$("#btnOpenCvlcptOrgnl--${pageName}").on("click", () => $P.fnOpenCvlcptOrgnl());
	
	
	//파일처리 버튼
	$("#btnAddFile--${pageName}").on('click', () => { $("#inputUploadSet--${pageName}").trigger("click"); });

	$("#btnOpenVideoCapture--${pageName}").on('click', () => {
		var crdnId = $("#crdnId--${pageName}").val();

		window.open(wctx.url("/sprt/sprt03/010/main.do?openerPageName=${pageName}&crdnId="+crdnId)
				,"newVideoCapture"
				,"width=1800,height=950"
		);
	});
	$("#btnEditPhoto--${pageName}").on('click', () => {
		var checked = $("#displayForExist--${pageName}").find("[name='existPhoto']:checked");
		if(checked.length < 1){
			alert("선택된 사진이 없습니다.");
			return;
		}

		var fileId = checked.val();

		window.open(wctx.url("/sprt/sprt03/020/main.do?openerPageName=${pageName}&fileId="+fileId)
				,"editPhoto"
				,"width=1400,height=750"
		);
	});

	$("#btnDeleteExistPhoto--${pageName}").on('click', () => {

		var checked = $("#displayForExist--${pageName}").find("[name='existPhoto']:checked");
		if(checked.length < 1){
			alert("선택된 사진이 없습니다.");
			return;
		}

		var target = checked[0].value;

		$P.existFileArr.forEach(function(item){
			if(item.FILE_ID == target){
				item.status = "delete";
			}
		});

		$P.fnDisplay(true);
	});

	$("#btnCancelAddFile--${pageName}").on('click', () => {
		var checked = $("#displayForNew--${pageName}").find("[name='newPhoto']:checked");
		if(checked.length < 1){
			alert("선택된 사진이 없습니다.");
			return;
		}

		var checkedArr = [];
		for(var i=0; i < checked.length; i++){
			checkedArr.push(checked[i].value);
		}

		$P.captureFileArr = $P.captureFileArr.filter(item => checkedArr.indexOf(item.id) == -1);
		$P.localUploadArr = $P.localUploadArr.filter(item => checkedArr.indexOf(item.id) == -1);
		$P.numberPlateArr = $P.numberPlateArr.filter(item => checkedArr.indexOf(item.id) == -1);

		$P.fnDisplay(false);
	});

	//차적조회
	$("#vhrno--${pageName}").on("keyup",function(e){
		if(e.key == "Enter"){
			var crdnYmd = $("#crdnYmd--${pageName}").val().replaceAll("-", "");
			var vhrno = this.value;
			if(crdnYmd == ""){
				dialog.alert({
					content:"단속일자를 입력하세요.",
					onClose:function(){ $("#crdnYmd--${pageName}").focus(); }
				});
				return;
			}
			if(vhrno == ""){
				dialog.alert({
					content:"차량번호를 입력하세요.",
					onClose:function(){ $(this).focus(); }
				});
				return;
			}

			json.post({
				url: wctx.url("/payer/vehicle.do"),
				data: {
					sggCd : $("#sggCd--${pageName}").val(),
					vhrno : vhrno,
					levy_stdde : crdnYmd
				},
				success:resp => {
					
					if(!resp.found){
						dialog.alert("차량 정보가 없습니다.");
						$("#rtpyrId--${pageName}").val("");
						$("#rtpyrNm--${pageName}").val("");
						$("#rtpyrSeCd--${pageName}").val("");
						$("#rtpyrNo--${pageName}").val("");
						$("#vin--${pageName}").val("");
						$("#vhclNm--${pageName}").val("");
						$("#vhclColor--${pageName}").val("");
						$("#useFuelCd--${pageName}").val("");
						$("#ffnlgCarmdlCd--${pageName}").val("");
						$("#zip--${pageName}").val("");
						$("#addr--${pageName}").val("");
						$("#dtlAddr--${pageName}").val("");
						return;
					}
					
					$("#rtpyrId--${pageName}").val(resp.rtpyrId);
					
					var vehicle = resp.vehicle;
					
					$("#rtpyrNm--${pageName}").val(vehicle.mber_nm);
					
					var pyrSeCd = "";
					switch(vehicle.mber_se_code){
						case "11" : pyrSeCd = "01"; break;
						case "12" : pyrSeCd = "02"; break;
						case "13" : pyrSeCd = "03"; break;
						case "14" : pyrSeCd = "04"; break;
						case "15" : pyrSeCd = "05"; break;
					}
					$("#rtpyrSeCd--${pageName}").val(pyrSeCd);

					$("#rtpyrNo--${pageName}").val(vehicle.mber_se_no);
					
					$("#vin--${pageName}").val(vehicle.vin);
					$("#vhclNm--${pageName}").val(vehicle.cnm);
					$("#vhclColor--${pageName}").val(vehicle.color_nm);
					$("#useFuelCd--${pageName}").val(vehicle.use_fuel_code);
					
					if(vehicle.vhcty_asort_code == "1"){ //승용
						$("#ffnlgCarmdlCd--${pageName}").val("11");
					} else if(vehicle.vhcty_asort_code == "2"){ //승합
						$("#ffnlgCarmdlCd--${pageName}").val("12");
					} else if(vehicle.vhcty_asort_code == "3"){ //화물
						if(vehicle.vhcle_tot_wt <= 4000){
							$("#ffnlgCarmdlCd--${pageName}").val("13");
						} else {
							$("#ffnlgCarmdlCd--${pageName}").val("14");
						}
					} else if(vehicle.vhcty_asort_code == "4"){ //특수
						$("#ffnlgCarmdlCd--${pageName}").val("15");
					} else {
						$("#ffnlgCarmdlCd--${pageName}").val("");
					}

					$("#zip--${pageName}").val(vehicle.zip_code); //우편번호
					$("#addr--${pageName}").val(vehicle.road_nm_adres); //주소
					$("#dtlAddr--${pageName}").val(vehicle.use_strnghld_adres_nm); //상세주소
				}
			});
		}
	});

	if("${taskSeCd}" == "DPV"){
		$("#vltnCd--${pageName}").on("change", function(){
			if(this.value == "01"){
				$("label[for='dstrbncYn--${pageName}']").show();
			} else {
				$("label[for='dstrbncYn--${pageName}']").hide();
				$("input[id='dstrbncYn--${pageName}']").prop("checked", false);
			}
		});
	}

	$("#refreshEnd--${pageName}").on("refreshEnd", function(){
		
		if(this.dataset.cursorKey == null || this.dataset.cursorKey == ""){
			dialog.close("cvlcptInitialDataEditDialog--${openerPageName}");
			return;
		}
   
		if(!$P.provided.hasData(this.dataset.cursorKey)){
			dialog.close("cvlcptInitialDataEditDialog--${openerPageName}");
			return;
		}
		
		$P.fnGo(this.dataset.cursorKey);
	});

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

	$("#frmEdit--${pageName}").find(".form-date").each(function(){
		$(this).on("input",function(){
			var 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);
			}

		});
	});
	$("#frmEdit--${pageName}").find(".form-time").each(function(){
		$(this).on("input",function(){
			var value = this.value.replaceAll(":","");

			if(value.length > 5){
				this.value = value.substring(0,2)+":"+value.substring(2,4)+":"+value.substring(4);
			} else if(value.length > 3){
				this.value = value.substring(0,2)+":"+value.substring(2);
			}

		});
	});

	var crdnInfo = ${crdnInfo};
	crdnInfo.CVLCPT_APLY_CN = escapeHTMLEntity(crdnInfo.CVLCPT_APLY_CN);
	$P.crdnControl.setData([crdnInfo]);

	if($("#taskSeCd--${pageName}").val() == "DPV" && $("#vltnCd--${pageName}").val() == "01"){
		$("label[for='dstrbncYn--${pageName}']").show();
	} else {
		$("label[for='dstrbncYn--${pageName}']").hide();
	}

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

	var cs = $P.provided.getCountStatus($("#crdnId--${pageName}").val());
	$("#countStauts--${pageName}").val(cs);

	if(crdnInfo.videoExist == "N"){
		$("#btnOpenVideoCapture--${pageName}").hide();
	} else {
		$("#btnOpenVideoCapture--${pageName}").show();
	}

	if(crdnInfo.fileList){
		crdnInfo.fileList.forEach(function(item){
			item.status = "";
			$P.existFileArr.push(item);
		});
	}

	$P.fnDisplay(true);
});


</script>