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

<!-- Page Body -->
<div class="content-wrapper">
	<div class="d-flex flex-row justify-content-evenly">
		<div class="col-xl-9 mx-1">
			<!-- 입력 영역 -->
			<form id="frmEdit--${pageName}" name="frmEdit">
				<input type="hidden" id="crdnId--${pageName}" name="crdnId" data-map="CRDN_ID" />
				<input type="hidden" id="rtpyrId--${pageName}" name="rtpyrId" data-map="RTPYR_ID" />

				<!-- 단속 정보 -->
				<div class="card">
					<!-- 업무 버튼 -->
					<div class="container-page-btn">
						<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">단속 정보</label>
						<!-- 버튼 우측 정렬 -->
						<span class="container-window-btn-right">
							<button type="button" class="btn btn-primary" id="btnViewCvlcptOrgnl--${pageName}" title="민원 원본 보기" onclick="fnViewCvlcptOrgnl${pageName}();">
								민원 원본 보기
							</button>
							<button type="button" class="btn btn-primary" id="btnViewAnswerPreview--${pageName}" title="민원 답변 보기" onclick="fnViewAnswerPreview${pageName}();">
								민원 답변 보기
							</button>
							<button type="button" class="btn btn-primary" id="btnUpdateCrdn--${pageName}" title="단속정보 수정" onclick="fnUpdateCrdn${pageName}();">
								단속 정보 수정
							</button>
							<button type="button" class="btn btn-primary" id="btnRemoveCrdn--${pageName}" title="단속 정보 삭제" onclick="fnRemoveCrdn${pageName}();">
								단속 정보 삭제
							</button>
							<button type="button" class="btn btn-primary" id="btnCreateCrdnReReg--${pageName}" title="단속 재등록" onclick="fnCreateCrdnReReg${pageName}();">
								단속 재등록
							</button>
							<button type="button" class="btn btn-primary" id="btnPrintNotice--${pageName}" title="고지서 출력" onclick="fnPrintNotice${pageName}();">
								고지서 출력
							</button>
							<button type="button" class="btn btn-primary" id="btnUpdateCrdnSttsCd--${pageName}" title="단속 상태 변경" onclick="fnUpdateCrdnSttsCd${pageName}();">
								단속 상태 변경
							</button>
						</span>
					</div> <!-- <div class="container-page-btn"> -->

					<div class="row g-1">
						<!-- 등록구분 -->
						<div class="col-md-4">
							<label for="crdnRegSeNm--${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="crdnRegSeNm--${pageName}" name="crdnRegSeNm" data-map="CRDN_REG_SE_NM" readonly />
						</div>
						<!-- 입력구분 -->
						<div class="col-md-4">
							<label for="crdnInptSeNm--${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="crdnInptSeNm--${pageName}" name="crdnInptSeNm" data-map="CRDN_INPT_SE_NM" readonly />
						</div>
						<!-- 빈 칸1 -->
						<div class="col-md-4" id="divBlank1--${pageName}">
						</div>
						<!-- 단속 시작 시각 ~ 단속 종료 시각 -->
						<div class="col-md-4" id="divCrdnBgngTm--${pageName}">
							<label for="crdnBgngTm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속시간</label>
							<input type="text" class="form-control w-25" id="crdnBgngTm--${pageName}" name="crdnBgngTm" data-map="CRDN_BGNG_TM" readonly /> ~
							<input type="text" class="form-control w-25" id="crdnEndTm--${pageName}" name="crdnEndTm" data-map="CRDN_END_TM" readonly />
						</div>
						<!-- 단속일시 -->
						<div class="col-md-4">
							<label for="crdnYmdTm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속일시</label>
							<input type="text" class="form-control w-45" id="crdnYmdTm--${pageName}" name="crdnYmdTm" data-map="CRDN_YMD_TM" readonly />
						</div>
						<!-- 차량번호 -->
						<div class="col-md-4">
							<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" readonly />
						</div>
						<!-- 위반내용 -->
						<div class="col-md-4">
							<label for="vltnNm--${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="vltnNm--${pageName}" name="vltnNm" data-map="VLTN_NM" readonly />
							<label for="dstrbncYn--${pageName}" id="lbDstrbncYn--${pageName}">
								<input type="checkbox" id="dstrbncYn--${pageName}" name="dstrbncYn" data-map="DSTRBNC_YN" disabled /> 1면 방해
							</label>
						</div>
						<!-- 법정동 -->
						<div class="col-md-4">
							<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-40" id="crdnStdgNm--${pageName}" name="crdnStdgNm" data-map="CRDN_STDG_NM" readonly />
						</div>
						<!-- 단속 장소 -->
						<div class="col-md-4">
							<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-60" id="crdnPlc--${pageName}" name="crdnPlc" data-map="CRDN_PLC" readonly />
						</div>
						<!-- 빈 칸2 -->
						<div class="col-md-4" id="divBlank2--${pageName}">
						</div>
						<!-- 단속 일련번호 -->
						<div class="col-md-4" id="divCrdnSn--${pageName}">
							<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 w-40" id="crdnSn--${pageName}" name="crdnSn" data-map="CRDN_SN" readonly />
						</div>
						<!-- 상세 단속 장소 -->
						<div class="col-md-4" id="divDtlCrdnPlc--${pageName}">
							<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-60" id="dtlCrdnPlc--${pageName}" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" readonly />
						</div>
						<!-- 민원 신청인 명 -->
						<div class="col-md-4">
							<label for="cvlcptAplcntNm--${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="cvlcptAplcntNm--${pageName}" name="cvlcptAplcntNm" data-map="CVLCPT_APLCNT_NM" readonly />
						</div>
						<!-- 민원 접수 일자 -->
						<div class="col-md-4">
							<label for="cvlcptRcptYmd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">민원접수일</label>
							<input type="text" class="form-control w-45" id="cvlcptRcptYmd--${pageName}" name="cvlcptRcptYmd" data-map="CVLCPT_RCPT_YMD" readonly />
						</div>
						<!-- 담당자 -->
						<div class="col-md-4">
							<label for="cvlcptPrcsPicNm--${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="cvlcptPrcsPicNm--${pageName}" name="cvlcptPrcsPicNm" data-map="CVLCPT_PRCS_PIC_NM" readonly />
						</div>
						<!-- 차대번호 -->
						<div class="col-md-4">
							<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 w-45" id="vin--${pageName}" name="vin" data-map="VIN" readonly />
						</div>
						<!-- 차량 명 -->
						<div class="col-md-4">
							<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 w-60" id="vhclNm--${pageName}" name="vhclNm" data-map="VHCL_NM" readonly />
						</div>
						<!-- 차량 색상 -->
						<div class="col-md-4">
							<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 w-40" id="vhclColor--${pageName}" name="vhclColor" data-map="VHCL_COLOR" readonly />
						</div>
						<!-- 기타 내용 -->
						<div class="col-md-12">
							<label for="etcCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end align-top">기타내용</label>
							<textarea type="text" class="form-control w-87" id="etcCn--${pageName}" name="etcCn" data-map="ETC_CN" cols="100%" rows="3" readonly>
							</textarea>
						</div>
						<!-- 과태료 단속금액 -->
						<div class="col-md-3">
							<label for="ffnlgCrdnAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">과태료 단속원금</label>
							<input type="text" class="form-control w-40 text-sm-end" id="ffnlgCrdnAmt--${pageName}" name="ffnlgCrdnAmt" data-map="FFNLG_CRDN_AMT" readonly />
						</div>
						<!-- 과태료 감경 율 -->
						<div class="col-md-3">
							<label for="ffnlgRductRt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">과태료 감경율</label>
							<input type="text" class="form-control w-20 text-sm-end" id="ffnlgRductRt--${pageName}" name="ffnlgRductRt" data-map="FFNLG_RDUCT_RT" readonly /> %
						</div>
						<!-- 과태료 금액 -->
						<div class="col-md-3">
							<label for="ffnlgAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">과태료 금액</label>
							<input type="text" class="form-control w-40 text-sm-end" id="ffnlgAmt--${pageName}" name="ffnlgAmt" data-map="FFNLG_AMT" readonly />
						</div>
						<!-- 사전통지 금액 -->
						<div class="col-md-3">
							<label for="advntceAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">사전 감경금액</label>
							<input type="text" class="form-control w-40 text-sm-end" id="advntceAmt--${pageName}" name="advntceAmt" data-map="ADVNTCE_AMT" readonly />
						</div>
						<!-- 부과 금액 -->
						<div class="col-md-3">
							<label for="levyAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">부과금액</label>
							<input type="text" class="form-control w-40 text-sm-end" id="levyAmt--${pageName}" name="levyAmt" data-map="LEVY_AMT" readonly />
						</div>
						<!-- 감액 금액 -->
						<div class="col-md-3">
							<label for="reducAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">감액금액</label>
							<input type="text" class="form-control w-40 text-sm-end" id="reducAmt--${pageName}" name="reducAmt" data-map="REDUC_AMT" readonly />
						</div>
						<!-- 수납 금액 -->
						<div class="col-md-3">
							<label for="rcvmtAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수납금액</label>
							<input type="text" class="form-control w-40 text-sm-end" id="rcvmtAmt--${pageName}" name="rcvmtAmt" data-map="RCVMT_AMT" readonly />
						</div>
						<!-- 미납 금액 -->
						<div class="col-md-3">
							<label for="sumAmt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">미납금액</label>
							<input type="text" class="form-control w-40 text-sm-end fw-bolder text-red" id="sumAmt--${pageName}" name="sumAmt" data-map="SUM_AMT" readonly />
						</div>
						<!-- 단속 특별구역 코드 -->
						<div class="col-md-3" id="divCrdnSpareaNm--${pageName}">
							<label for="crdnSpareaNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속특별구역</label>
							<input type="text" class="form-control w-50" id="crdnSpareaNm--${pageName}" name="crdnSpareaNm" data-map="CRDN_SPAREA_NM" readonly />
						</div>
						<!-- 견인 여부 -->
						<div class="col-md-3" id="divTowngYnNm--${pageName}">
							<label for="towngYnNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">견인여부</label>
							<input type="text" class="form-control w-25" id="towngYnNm--${pageName}" name="towngYnNm" data-map="TOWNG_YN_NM" readonly />
						</div>
						<!-- 시간외 여부 -->
						<div class="col-md-3" id="divOvtimeYnNm--${pageName}">
							<label for="ovtimeYnNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">시간외여부</label>
							<input type="text" class="form-control w-25" id="ovtimeYnNm--${pageName}" name="ovtimeYnNm" data-map="OVTIME_YN_NM" readonly />
						</div>
						<!-- 과태료 차종 -->
						<div class="col-md-3" id="divFfnlgCarmdlNm--${pageName}">
							<label for="ffnlgCarmdlNm--${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="ffnlgCarmdlNm--${pageName}" name="ffnlgCarmdlNm" data-map="FFNLG_CARMDL_NM" readonly />
						</div>
						<!-- 주차 가능 결과 코드 -->
						<div class="col-md-3" id="divParkngPsbltyRsltNm--${pageName}">
							<label for="parkngPsbltyRsltNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">주차가능결과</label>
							<input type="text" class="form-control w-50" id="parkngPsbltyRsltNm--${pageName}" name="parkngPsbltyRsltNm" data-map="PARKNG_PSBLTY_RSLT_NM" readonly />
						</div>
						<!-- 사용 연료 구분 -->
						<div class="col-md-3" id="divUseFuelNm--${pageName}">
							<label for="useFuelNm--${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="useFuelNm--${pageName}" name="useFuelNm" data-map="USE_FUEL_NM" readonly />
						</div>
					</div>
				</div> <!-- 단속 정보 <div class="card"> -->

				<p></p>

				<!-- 납부자 정보 -->
				<div class="card">
					<!-- 업무 버튼 -->
					<div class="container-page-btn">
						<label class="w-px-120 bg-label-danger pe-2 col-form-label text-sm-center">납부자 정보</label>
						<!-- 버튼 우측 정렬 -->
						<span class="container-window-btn-right">
							<button type="button" class="btn btn-primary" id="btnPayerReset--${pageName}" title="납부자 초기화" onclick="btnPayerReset${pageName}();">
								납부자 초기화
							</button>
							<button type="button" class="btn btn-primary" id="btnPayerUpdate--${pageName}" title="납부자 수정" onclick="fnBtnPayerUpdate${pageName}();">
								납부자 수정
							</button>
						</span>
					</div> <!-- <div class="container-page-btn"> -->

					<div class="row g-1">
						<!-- 납부자 명 -->
						<div class="col-md-4">
							<label for="rtpyrNm--${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="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" readonly />
						</div>
						<!-- 납부자 구분 코드 -->
						<div class="col-md-4">
							<label for="rtpyrSeNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">납부자 구분</label>
							<input type="text" class="form-control w-25" id="rtpyrSeNm--${pageName}" name="rtpyrSeNm" data-map="RTPYR_SE_NM" readonly />
						</div>
						<!-- 납부자 번호 -->
						<div class="col-md-4">
							<label for="rtpyrNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">납부자 번호</label>
							<input type="text" class="form-control w-50" id="rtpyrNo--${pageName}" name="rtpyrNo" data-map="RTPYR_NO" readonly />
						</div>
						<!-- 납부자 주소 --><!-- 납부자 우편번호 -->
						<div class="col-md-12">
							<label for="addr--${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="addr--${pageName}" name="addr" data-map="ADDR" readonly />
							<input type="text" class="form-control w-px-75" id="zip--${pageName}" name="zip" data-map="ZIP" readonly />
						</div>
						<!-- 납부자 상세주소 -->
						<div class="col-md-12">
							<label for="dtlAddr--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">상세 주소</label>
							<input type="text" class="form-control w-87" id="dtlAddr--${pageName}" name="dtlAddr" data-map="DTL_ADDR" readonly />
						</div>
						<!-- 납부자 입력 구분 코드 -->
						<div class="col-md-4">
							<label for="rtpyrInptSeNm--${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="rtpyrInptSeNm--${pageName}" name="rtpyrInptSeNm" data-map="RTPYR_INPT_SE_NM" readonly />
						</div>
						<!-- 수정 일시 -->
						<div class="col-md-4">
							<label for="payerMdfcnDt--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">수정 일시</label>
							<input type="text" class="form-control w-50" id="payerMdfcnDt--${pageName}" name="payerMdfcnDt" data-map="PAYER_MDFCN_DT" readonly />
						</div>
						<!-- 수정자 -->
						<div class="col-md-4">
							<label for="payerMdfr--${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="payerMdfr--${pageName}" name="payerMdfr" data-map="PAYER_MDFR" readonly />
						</div>
					</div>
				</div> <!-- 납부자 정보 <div class="card"> -->
			</form> <!-- /입력 영역 -->
		</div> <!-- <div class="col-xl-9 mx-1"> -->

		<!-- 단속 이미지 -->
		<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 />
			</form>

			<div class="col-md-12 d-flex justify-content-between">
				<div>
					<button type="button" class="btn btn-primary" id="btnEditPhoto--${pageName}" title="선택 사진 편집">사진 편집</button>
				</div>
				<div>
					<button type="button" class="btn btn-primary" id="btnAddFile--${pageName}" title="사진 추가">사진 추가</button>
					<button type="button" class="btn btn-primary" id="btnDeleteFile--${pageName}" title="선택 사진 삭제">사진 삭제</button>
				</div>
			</div>
			<div id="displayForExist--${pageName}" style="overflow-y:scroll; min-height:80px; max-height:630px; 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> <!-- 단속 이미지 <div class="card" style="width:500px;"> -->
	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
</div> <!-- <div class="content-wrapper"> -->

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	// URL
	var ${pageName}PrefixUrl = "/crdn/crdn06";
	// FormFields
 	var ${pageName}Fields = new FormFields("#frmEdit--${pageName}");
	// 단속 사진
	var ${pageName}UploadSet = uploadSupport("#inputUploadSet--${pageName}");

	var existFileArr${pageName} = [];
	var localUploadArr${pageName} = [];

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Control = new DatasetControl({
		  prefix : "totalInfoCrdnPayer"
		, prefixName : "단속 정보"
		, keymapper : info => info ? info.CRDN_ID : ""
		, dataGetter : obj => obj.crdnPayer
		, formats : {
			  CRDN_YMD_TM : datetimeFormat
			, CVLCPT_RCPT_YMD : datetimeFormat
			, FFNLG_CRDN_AMT : numberFormat										// 과태료 단속 금액
			, FFNLG_AMT : numberFormat											// 과태료 금액
			, ADVNTCE_AMT : numberFormat										// 사전통지 금액
			, LEVY_AMT : numberFormat											// 부과 금액
			, REDUC_AMT : numberFormat											// 감액 금액
			, RCVMT_AMT : numberFormat											// 수납 금액
			, SUM_AMT : numberFormat											// 합계 금액
			, CRDN_BGNG_TM : timeFormat
			, CRDN_END_TM : timeFormat
		}
	});

	/**************************************************************************
	 * DatasetControl 이벤트
	 **************************************************************************/
	// 현재 선택 자료 변경 이벤트
	${pageName}Control.onCurrentChange = item => {
		${pageName}Fields.set(item);											// Dataset 셋팅
	}

	// 단속 Dialog
	${pageName}Control.getInfo = (params) => {
		let dialogTitle = "";

		if (params.callPurpose == "create") {
			dialogTitle = ${pageName}Control.prefixName + " 등록";
		} else if (params.callPurpose == "update") {
			dialogTitle = ${pageName}Control.prefixName + " 수정";
		} else {
			return;
		}

		ajax.get({
			  url : wctx.url("/" + params.taskSeCd + ${pageName}PrefixUrl + "/020/info.do")
			, data : params || {}
			, success : resp => {
				dialog.open({
					  id : ${pageName}Control.prefixed("Dialog")
					, title : dialogTitle
					, content : resp
					, size : "lg"
					, init : () => { }
					, onClose : () => { refreshDataInfo${pageName}(); }			// callback 자료 재조회
				});
			}
		});
	}

	// 삭제 callback
	${pageName}Control.onRemove = (resp) => {
		let btnTitle = $("#btnRemoveCrdn--${pageName}").attr("title");
  		let showMessage = resp.retMessage.replace(/[S]|[F]/g, btnTitle);

		dialog.alert(showMessage);

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

	// 삭제
	${pageName}Control.remove = (params) => {
		ajax.post({
			  url : wctx.url("/" + params.taskSeCd + ${pageName}PrefixUrl + "/010/remove.do")
			, data : params || {}
			, success : resp => ${pageName}Control.onRemove(resp)				// 삭제 callback
		});
	}

	/**************************************************************************
	 * function 이미지 관련
	 **************************************************************************/
	// 사진 추가 datasetChange
	${pageName}UploadSet.onDatasetChange = () => {
		let files = ${pageName}UploadSet.getDataset();

		files.forEach(item => localUploadArr${pageName}.push(item));

		saveFile${pageName}(${pageName}Fields.get());
	};

	//
	${pageName}UploadSet.onRemove = () => {

	};

	// 이미지 파일만큼 html에 추가
	fnMakeImgForExistFile${pageName} = (fileArr) => {
		let tagsText = "";

		for (let index = 0, j = 0; index < fileArr.length; index++) {
			let 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='260' height='150' />";
			tagsText += "</label>";
			tagsText += "<br />";
			tagsText += "<p></p>";

			j++;
		}

		return tagsText;
	}

	// 화면에 이미지 표시
	fnImageDisplay${pageName} = (isExist) => {
		if (isExist) {
			let displayArea = document.querySelector("#displayForExist--${pageName}");
			let tagsText = fnMakeImgForExistFile${pageName}(existFileArr${pageName});

			if (tagsText == "") {
				displayArea.innerHTML = "등록된 사진이 없습니다.";
				$("#btnEditPhoto--${pageName}").hide();
			} else {
				displayArea.innerHTML = tagsText;
				$("#btnEditPhoto--${pageName}").show();
			}

			$("#atchFileCnt--${pageName}").val(existFileArr${pageName}.length);
		}
	};

	// 사진 콜백
	callbackFile${pageName} = (btnTitle, resp) => {
  		let showMessage = resp.retMessage.replace(/[S]|[F]/g, btnTitle);

		dialog.alert(showMessage);

		// 이미지(사진) 재조회
		if (resp.saved) {
			refreshImageInfo${pageName}();
		}
	};

	// 사진 저장
	saveFile${pageName} = (info) => {
		if (!info) return;

 		let btnTitle = $("#btnAddFile--${pageName}").attr("title");
		let formData = new FormData(document.getElementById("frmFile--${pageName}"));

		for (let key in info) {
			let value = info[key];

		    formData.append(key, value);
		}
		formData.append("atchFileCnt", existFileArr${pageName}.length);

		// 추가 파일 등록
		formData.delete("newFileList");

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

		ajax.post({
			  url : wctx.url("/sprt/sprt02/020/updateFile.do")
			, data : formData
			, contentType : false
			, processData : false
			, success : resp => { callbackFile${pageName}(btnTitle, resp); }
		});
	}

	// 선택 사진 삭제
	removeFile${pageName} = (target) => {
		if (!target) return;

		let btnTitle = $("#btnDeleteFile--${pageName}").attr("title");
		let fileId = "";
		let crdnId = $("#crdnId--${pageName}").val();

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

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

		let params = {
			  crdnId : crdnId
			, atchFileCnt : existFileArr${pageName}.length
			, fileIDs : fileId
		}

		ajax.post({
			  url : wctx.url("/sprt/sprt02/020/removeFile.do")
			, data : params || {}
			, success : resp => { callbackFile${pageName}(btnTitle, resp); }
		});
	}

	// 이미지(사진) 재조회
	refreshImageInfo${pageName} = () => {
		let crdnId = $("#crdnId--${pageName}").val();

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "view"
			, crdnId : crdnId
			, delYn : "N"
		};

		ajax.get({
			  url : wctx.url("/sprt/sprt02/020/crdnFileList.do")
			, headers: { Accept: "application/json; charset=utf-8" }			// json
			, data : params || {}
			, success : resp => {
				// 이미지 정보를 파일 배열에 셋팅
				existFileArr${pageName} = [];
				localUploadArr${pageName} = [];

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

				// 화면에 이미지 표시
				fnImageDisplay${pageName}(true);
			}
		});
	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	// 민원 원본 보기
	viewCvlcptOrgnl${pageName} = (params) => {
		if (!params) return;

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

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

	// 민원 답변 보기
	viewAnswerPreview${pageName} = (params) => {
		if (!params) return;

		let dialogId = "answerPreviewDialog--${pageName}";

		ajax.get({
			  url : wctx.url("/" + params.taskSeCd + "/cvlc/cvlc02/060/info.do")
			, data : params || {}
			, success : resp => {
				dialog.open({
					  id : dialogId
					, title : "답변내용 미리보기"
					, content : resp
					, size : "xl"
				});
			}
		});
	}

	// 단속 재등록
	createCrdnReReg${pageName} = (params) => {
		if (!params) return;

		ajax.post({
			  url : wctx.url("/" + params.taskSeCd + "/excl/excl03/010/create.do")
			, data : params || {}
			, success : resp => {
				if (resp.saved) {
					dialog.alert("저장됐습니다.");
					dialog.close(${pageName}Control.prefix + "Dialog");
				}
			}
		});
	}

	// 자료 재조회
	refreshDataInfo${pageName} = () => {

	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 화면 초기값 셋팅
	initForm${pageName} = () => {
		// jquery를 이용한 show/hide (style이 유지)
		$("#divBlank1--${pageName}").hide();									// 빈 칸1
		$("#divBlank2--${pageName}").hide();									// 빈 칸2
		$("#divCrdnSn--${pageName}").hide();									// 단속 일련번호
		$("#divDtlCrdnPlc--${pageName}").hide();								// 상세 단속 장소
		$("#lbDstrbncYn--${pageName}").hide();									// 1면 방해
		$("#divCrdnSpareaNm--${pageName}").hide();								// 단속 특별구역 코드
		$("#divTowngYnNm--${pageName}").hide();									// 견인 여부
		$("#divFfnlgCarmdlNm--${pageName}").hide();								// 과태료 차종
		$("#divOvtimeYnNm--${pageName}").hide();								// 시간외 여부
		$("#divParkngPsbltyRsltNm--${pageName}").hide();						// 주차 가능 결과 코드
		$("#divUseFuelNm--${pageName}").hide();									// 사용 연료 구분
		$("#divCrdnBgngTm--${pageName}").hide();								// 단속 시작 시각 ~ 단속 종료 시각

		// 업무에 따른 요소들 visible
		if (sprt02010Control.dataset.getValue("TASK_SE_CD") == "BPV") {			// 전용차로위반
			$("#divBlank1--${pageName}").show();								// 빈 칸1
			$("#divDtlCrdnPlc--${pageName}").show();							// 상세 단속 장소
		} else if (sprt02010Control.dataset.getValue("TASK_SE_CD") == "DPV") {	// 장애인전용
			$("#divBlank1--${pageName}").show();								// 빈 칸1
			$("#divBlank2--${pageName}").show();								// 빈 칸2
	 		$("#lbDstrbncYn--${pageName}").show();								// 1면 방해
			$("#divParkngPsbltyRsltNm--${pageName}").show();					// 주차 가능 결과 코드
		} else if (sprt02010Control.dataset.getValue("TASK_SE_CD") == "ECA") {	// 전기차주차
			$("#divBlank1--${pageName}").show();								// 빈 칸1
			$("#divBlank2--${pageName}").show();								// 빈 칸2
			$("#divUseFuelNm--${pageName}").show();								// 사용 연료 구분
		} else if (sprt02010Control.dataset.getValue("TASK_SE_CD") == "PVS") {	// 주정차위반
			$("#divCrdnBgngTm--${pageName}").show();							// 단속 시작 시각 ~ 단속 종료 시각
			$("#divCrdnSn--${pageName}").show();								// 단속 일련번호
			$("#divCrdnSpareaNm--${pageName}").show();							// 단속 특별구역 코드
			$("#divTowngYnNm--${pageName}").show();								// 견인 여부
			$("#divFfnlgCarmdlNm--${pageName}").show();							// 과태료 차종
			$("#divOvtimeYnNm--${pageName}").show();							// 시간외 여부
		} else if (sprt02010Control.dataset.getValue("TASK_SE_CD") == "TPV") {	// 밤샘주차위반
			$("#divBlank2--${pageName}").show();								// 빈칸
			$("#divCrdnBgngTm--${pageName}").show();							// 단속 시작 시각 ~ 단속 종료 시각
		}
	}

	// 이벤트 설정
	setEvent${pageName} = () => {
		// 선택 사진 편집
		$("#btnEditPhoto--${pageName}").on("click", () => {
			let checked = $("#displayForExist--${pageName}").find("[name='existPhoto']:checked");
			if (checked.length < 1) {
				dialog.alert("선택된 사진이 없습니다.");
				return;
			}

			let fileId = checked.val();

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

		// 사진 추가
		$("#btnAddFile--${pageName}").on("click", () => {
			$("#inputUploadSet--${pageName}").trigger("click");
		});

		// 선택 사진 삭제
		$("#btnDeleteFile--${pageName}").on('click', () => {
			let checked = $("#displayForExist--${pageName}").find("[name='existPhoto']:checked");

			if (checked.length < 1) {
				dialog.alert("선택된 사진이 없습니다.");
				return;
			}

			let target = checked[0].value;

			dialog.alert({
				  content : "선택한 파일을 삭제하시겠습니까?"
				, onOK : () => {
					removeFile${pageName}(target);
				}
			});
		});
	}

	/**************************************************************************
	 * 버튼 clickEvent
	 **************************************************************************/
	// 민원 원본 보기
	fnViewCvlcptOrgnl${pageName} = () => {
		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");
		let sggCd = ${pageName}Control.dataset.getValue("SGG_CD");
		let taskSeCd = ${pageName}Control.dataset.getValue("TASK_SE_CD");

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "view"
			, crdnId : crdnId
			, sggCd : sggCd
			, taskSeCd : taskSeCd
		};

		viewCvlcptOrgnl${pageName}(params);
	}

	// 민원 답변 보기
	fnViewAnswerPreview${pageName} = () => {
		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");
		let sggCd = ${pageName}Control.dataset.getValue("SGG_CD");
		let taskSeCd = ${pageName}Control.dataset.getValue("TASK_SE_CD");

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "view"
			, crdnId : crdnId
			, sggCd : sggCd
			, taskSeCd : taskSeCd
		};

		viewAnswerPreview${pageName}(params);
	}

	// 단속정보 수정
	fnUpdateCrdn${pageName} = () => {
		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");
		let sggCd = ${pageName}Control.dataset.getValue("SGG_CD");
		let taskSeCd = ${pageName}Control.dataset.getValue("TASK_SE_CD");

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "view"
			, crdnId : crdnId
			, sggCd : sggCd
			, taskSeCd : taskSeCd
		};

		${pageName}Control.getInfo(params);
	}

	// 자료 삭제
	fnRemoveCrdn${pageName} = () => {
		let crdnId = ${pageName}Control.dataset.getValue("CRDN_ID");
		let sggCd = ${pageName}Control.dataset.getValue("SGG_CD");
		let taskSeCd = ${pageName}Control.dataset.getValue("TASK_SE_CD");

		// 단속 ID 가 없다면.. return
		if (crdnId == null || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "remove"
			, crdnId : crdnId
			, sggCd : sggCd
			, taskSeCd : taskSeCd
		};

		dialog.alert({
			  content : "선택한 " + ${pageName}Control.prefixName + " 을(를) 삭제하시겠습니까?"
			, onOK : () => {
				${pageName}Control.remove(params);
			}
		});
	}

	// 단속 재등록
	fnCreateCrdnReReg${pageName} = () => {
		let crdnId = $("#crdnId--${pageNameMain}").val();
		let sggCd = $("#sggCd--${pageNameMain}").val();
		let taskSeCd = $("#taskSeCd--${pageNameMain}").val();

		// 단속 ID 가 없다면.. return
		if (crdnId == undefined || crdnId == "") {
			return;
		}

		let params = {
			  callPurpose : "create"
			, bfrCrdnId : crdnId
			, sggCd : sggCd
			, taskSeCd : taskSeCd

		};

 		dialog.alert({
			  content : "현재 단속 정보를 재등록 하겠습니까?"
			, onOK : () => {
				createCrdnReReg${pageName}(params);
			}
		});
	}

	// 고지서 출력
	fnPrintNotice${pageName} = () => {
		console.log("고지서 출력");
	}

	// 단속 상태 변경
	fnUpdateCrdnSttsCd${pageName} = () => {
		console.log("단속 상태 변경");
	}

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

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

		let crdnPayerInfo = ${crdnPayer};

		// Dataset 셋팅
		${pageName}Control.setData([crdnPayerInfo]);

		// 이미지 정보를 파일 배열에 셋팅
		existFileArr${pageName} = [];					// 파일 배열 초기화

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

		// 화면에 이미지 표시
		fnImageDisplay${pageName}(true);
	});

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