<%@ 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">
			<!-- 입력 영역 -->
			<form id="frmEdit--${pageName}" name="frmEdit">
				<!-- hidden -->
				<input type="hidden" id="crdnId--${pageName}" name="crdnId" data-map="CRDN_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 g-1">
					<!-- 단속 일자 -->
					<div class="col-md-6">
						<label for="crdnYmd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">단속일자</label>
						<input type="text" class="form-control form-date" id="crdnYmd--${pageName}" name="crdnYmd" data-map="CRDN_YMD" data-fmt-type="day" maxlength="10" required />
			            <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
					</div>
					<!-- 단속 시간 -->
					<div class="col-md-6">
						<label for="crdnTm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">단속시간</label>
			            <input type="text" class="form-control form-time" id="crdnTm--${pageName}" name="crdnTm" data-map="CRDN_TM" data-fmt-type="time" maxlength="8" required placeholder="시:분:초" />
					</div>
					<!-- 차량번호 -->
					<div class="col-md-6">
						<label for="vhrno--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차량번호</label>
						<input type="text" class="form-control w-40" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" />
						<button type="button" class="btn btn-sm btn-outline-dark" id="btnVehicle--${pageName}" title="우편번호 검색" onclick="fnVehicle${pageName}();">
							조회
						</button>
					</div>
					<!-- 위반 내용 -->
					<div class="col-md-6">
						<label for="vltnCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">위반내용</label>
						<select class="form-select" id="vltnCd--${pageName}" name="vltnCd" data-map="VLTN_CD">
							<c:forEach items="${VLTNList}" var="item">
								<option value="${item.code}">${item.value}</option>
			                </c:forEach>
						</select>
					</div>
					<!-- 법정동 -->
					<div class="col-md-6 select2-primary">
						<label for="crdnStdgNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">법정동</label>
						<input type="text" class="form-control w-px-150" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" 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 select2-primary">
						<label for="crdnRoadNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">도로명</label>
						<input type="text" class="form-control" id="crdnRoadNm--${pageName}" name="crdnRoadNm" data-map="CRDN_ROAD_NM" />
					</div>
					<!-- 단속 장소 -->
					<div class="col-md-12">
						<label for="crdnPlc--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속장소</label>
						<input type="text" class="form-control w-80" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC" data-maxlengthb="200" />
					</div>
					<!-- 상세 단속 장소 -->
					<div class="col-md-12" slot="edit">
						<template class="bpv">
							<slot>
								<label for="dtlCrdnPlc--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">상세단속장소</label>
								<input type="text" class="form-control w-80" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" data-maxlenghb="200" />
							</slot>
						</template>
					</div>
					<div class="col-md-6" slot="edit">
						<template class="pvs">
							<slot>
								<label for="crdnSpareaCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">특별구역</label>
								<select class="form-select" id="crdnSpareaCd--${pageName}" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD">
									<c:forEach items="${FIM007List}" var="item">
										<option value="${item.code}">${item.value}</option>
					                </c:forEach>
								</select>
							</slot>
						</template>
					</div>
					<div class="col-md-6" slot="edit">
						<template class="pvs">
							<slot>
								<label for="towngYnNm--${pageName}">
									<input type="checkbox" class="form-check-input" id="towngYnNm--${pageName}" name="towngYnNm" data-map="TOWNG_YN_NM" />견인여부
								</label>
							</slot>
						</template>
					</div>
					<!-- 기타 내용 -->
					<div class="col-md-12">
						<label for="etcCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">특기사항</label>
						<input type="text" class="form-control w-80" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN" data-maxlengthb="1000" />
					</div>
					<div class="col-md-6">
						<label for="vin--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차대번호</label>
						<input type="text" class="form-control" id="vin--${pageName}" name="vin" data-map="VIN" readonly placeholder="입력항목이 아닙니다." />
					</div>
					<div class="col-md-6">
						<label for="vhclNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차량명칭</label>
						<input type="text" class="form-control" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" readonly placeholder="입력항목이 아닙니다." />
					</div>
					<div class="col-md-6">
						<label for="vhclColor--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차량색상</label>
						<input type="text" class="form-control" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" readonly placeholder="입력항목이 아닙니다." />
					</div>
					<div class="col-md-12" slot="edit">
						<template class="pvs bpv">
							<slot>
								<label for="ffnlgCarmdlCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
								<select class="form-select" id="ffnlgCarmdlCd--${pageName}" name ="ffnlgCarmdlCd" data-map="FFNLG_CARMDL_CD">
									<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-120 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
								<select id="useFuelCd--${pageName}" class="form-select" name="useFuelCd" data-map="USE_FUEL_CD" 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-6" slot="edit">
						<template class="dpv eca pvs">
							<slot>
								<label for="towngYn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
								<select class="form-select" id="towngYn--${pageName}" name="towngYn" 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-6" slot="edit">
						<template class="dpv eca pvs">
							<slot>
								<label for="crdnSn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">스티커번호</label>
								<input type="text" class="form-control" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" maxlength="20" data-maxlengthb="20" />
							</slot>
						</template>
					</div>
					<div class="col-md-6" slot="edit">
						<template class="dpv">
							<slot>
								<label for="parkngPsbltyRsltCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
								<select class="form-select" id="parkngPsbltyRsltCd--${pageName}" name="parkngPsbltyRsltCd" data-map="PARKNG_PSBLTY_RSLT_CD">
									<c:forEach items="${FIM034List}" var="item">
										<c:if test="${item.code == '0' or item.code == '1'}">
											<option value="${item.code}">${item.value}</option>
										</c:if>
					                </c:forEach>
								</select>
							</slot>
						</template>
					</div>
					<div class="col-md-12" slot="edit">
						<template class="pvs bpv">
							<slot>
								<label for="teamId--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속조</label>
								<select class="form-select" id="teamId--${pageName}" name="teamId" data-map="TEAM_ID">
									<option value=""></option>
									<c:forEach items="${TeamList}" var="item">
										<option value="${item.TEAM_ID}">${item.TEAM_NM}</option>
					                </c:forEach>
								</select>
							</slot>
						</template>
					</div>
					<div class="col-md-12" slot="edit">
						<template class="pvs bpv">
							<slot>
								<label class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속원</label>
								<input type="text" class="form-control" id="teamer1--${pageName}" name="teamer1" data-map="TEAMER_1" />
								<input type="text" class="form-control" id="teamer2--${pageName}" name="teamer2" data-map="TEAMER_2" />
								<input type="text" class="form-control" id="teamer3--${pageName}" name="teamer3" data-map="TEAMER_3" />
								<input type="text" class="form-control" id="teamer4--${pageName}" name="teamer4" data-map="TEAMER_4" />
							</slot>
						</template>
					</div>
				</div>
			</form>
			<!-- /입력 영역 -->
		</div>
		<!-- <div class="card"> -->

		<!-- 업무 버튼 표시 -->
		<div>
			<span class="container-page-btn">
				<span class="container-window-btn-right">
					<!-- 업무 버튼 -->
					<button type="button" class="btn btn-primary" id="btnSave--${pageName}" title="저장" onclick="fnSave${pageName}()">저장</button>
				</span>
			</span>
		</div>
		<!-- / 업무 버튼 표시 -->

	</div> <!-- / Content <div class="container-xxl flex-grow-1 px-0"> -->
</div> <!-- / inner page html <div class="content-wrapper"> -->

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	// URL
	var ${pageName}PrefixUrl = "/crdn/crdn06";
	// FormFields
 	var ${pageName}Fields = new FormFields("#frmEdit--${pageName}");

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Control = new DatasetControl({
		  prefix : "crdn"
		, prefixName : "단속"
		, keymapper : info => info ? info.CRDN_ID : ""
		, dataGetter : obj => obj.crdnInfo
		, formats : {
			  CRDN_YMD : dateFormat
			, CRDN_TM : timeFormat
		}
	});

	${pageName}Control.onCurrentChange = item => {
		// Dataset 셋팅
		${pageName}Fields.set(item);

		// 업무별 입력 항목
		renderTask${pageName}(item.data.TASK_SE_CD);
	}

	/**************************************************************************
	 * DatasetControl 이벤트
	 **************************************************************************/
	// 저장 callback
	${pageName}Control.onSave = (resp) => {
  		let dialogTitle = $("#" + ${pageName}Control.prefix + "Dialog").find("h5.modal-title").html();
  		let showMessage = resp.retMessage.replace(/[S]|[F]/g, dialogTitle);

		dialog.alert(showMessage);

		if (resp.saved) {
			dialog.close(${pageName}Control.prefix + "Dialog");
		}
	}

	// 저장
	${pageName}Control.save = (info) => {
		if (!info) return;

		ajax.post({
  			  url : wctx.url("/" + info.taskSeCd + ${pageName}PrefixUrl + "/020/update.do")
  			, data : info
  			, success : resp => ${pageName}Control.onSave(resp)
  		});
	}

	/**************************************************************************
	 *
	 **************************************************************************/
	// 업무별 입력 항목
	renderTask${pageName} = (taskSeCd) => {
		if (taskSeCd == undefined || taskSeCd == null || taskSeCd == "") {
			taskSeCd = $("#taskSeCd--${pageName}").val().toLowerCase();
		} else {
			taskSeCd = taskSeCd.toLowerCase();
		}

		renderForTask("frmEdit--${pageName}", taskSeCd);
	}

	// 차적 조회
	getVehicle${pageName} = () => {
		let crdnYmd = $("#crdnYmd--${pageName}").val().replaceAll("-", "");
		let vhrno = this.value;

		if (crdnYmd == "") {
			dialog.alert({
				content : "단속일자를 입력하세요.",
				onClose : function() { $("#crdnYmd--${pageName}").focus(); }
			});

			return;
		}
		if (vhrno == "") {
			dialog.alert({
				content : "차량번호를 입력하세요.",
				onClose : function() { $("#vhrno--${pageName}").focus(); }
			});

			return;
		}

		let params = {
			  sggCd : $("#sggCd--${pageName}").val()
			, levy_stdde : crdnYmd
			, inqire_se_code : "3"
			, vhrno : vhrno
		}

		json.post({
			  url : wctx.url("/payer/vehicle.do")
			, data : params || {}
			, success : resp => {
				// 항목 초기화
				$("#vin--${pageName}").val("");
				$("#vhclNm--${pageName}").val("");
				$("#vhclColor--${pageName}").val("");
				$("#useFuelCd--${pageName}").val("");
				$("#ffnlgCarmdlCd--${pageName}").val("");

				if (!resp.found) {
					dialog.alert("차량 정보가 없습니다.");

					return;
				}

				let vehicle = resp.vehicle;

				// 단속(TB_CRDN) - 공통 항목
				$("#vin--${pageName}").val(vehicle.vin);						// 차대번호
				$("#vhclNm--${pageName}").val(vehicle.cnm);						// 차량명
				$("#vhclColor--${pageName}").val(vehicle.color_nm);				// 차량색상

				// 단속 부가 정보(TB_CRDN_ADI) - 사용 연료 코드
				$("#useFuelCd--${pageName}").val(vehicle.use_fuel_code);

				// 단속 부가 정보(TB_CRDN_ADI) - 과태료 차종 코드
				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("");
				}
			}
		});
	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 화면 초기값 셋팅
	initForm${pageName} = () => {
		// 달력 초기화
	    initDatepicker("frmEdit--${pageName}");
	    $("#rcptYmd--${pageName}").datepicker("setDate", new Date());
	}

	// 이벤트 설정
	setEvent${pageName} = () => {
		// form-date 항목에서 키보드로 입력시 날짜 포맷팅 적용
		$("#frmEdit--${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);
				}
			});
		});

		$("#vhrno--${pageName}").on("keyup", function(e) {
			if (e.key == "Enter") {
				// 차적 조회
				getVehicle${pageName}();
			}
		});
	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	// 차적 조회
	fnVehicle${pageName} = () => {
		getVehicle${pageName}();
	}

	// 저장
	fnSave${pageName} = () => {
		// validate 확인
		if (!customValidate($("#frmEdit--${pageName}").find("input, select, textarea"))) return;

		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");

		if (crdnId == null || crdnId == "") {
			return;
		}

		dialog.alert({
			  content : "현재 " + ${pageName}Control.prefixName + " 정보를 저장하시겠습니까?"
			, onOK : () => {
				${pageName}Control.save(${pageName}Fields.get());
			}
		});
	}

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

		// 화면 초기 설정
		initForm${pageName}();

		// Dataset 셋팅 - 단건일 경우 setData
		${pageName}Control.setData([${crdnInfo}]);
	});

// #sourceURL=crdn06020-info.jsp
</script>
