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

<c:set var="prefixName" scope="request">고지서 발송 대상 등록</c:set>

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

		<!-- Page Body -->
		<div class="card">
			<!-- 상단 버튼 -->
			<div class="container-page-btn">
				<button type="button" class="btn btn-outline-dark w-px-120" id="btnReset--${pageName}" title="초기화">
					초기화
				</button>
				<span class="container-window-btn-right">
					<button type="button" class="btn btn-search w-px-120" id="btnLinkNxrpSpclB01--${pageName}" title="세외수입 체납상세 조회">
						세외수입 조회
					</button>
				</span>
			</div> <!-- 상단 버튼 -->

			<!-- 검색 조건 영역 -->
			<form id="frmSearch--${pageName}" name="frmSearch">
				<!-- hidden -->
				<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="container-search">
					<div class="row g-1">
						<!-- 총건수 / 총금액 -->
						<div class="col-md-12 text-end">
							<label class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">총건수 / 총금액</label>
							<input type="text" class="form-control w-px-80" id="tnocs--${pageName}" name="tnocs" autocomplete="off" readonly />
							<input type="text" class="form-control w-px-140" id="gramt--${pageName}" name="gramt" autocomplete="off" readonly />
						</div>
						<!-- 부과 일자 -->
						<div class="col-md-6">
							<label for="schLevyYmd--${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="schLevyYmd--${pageName}" name="schLevyYmd"
								data-fmt-type="day" autocomplete="off" title="날짜 선택" maxlength="10" required />
							<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
						</div>
						<!-- 최초 납기 일자 -->
						<div class="col-md-6">
							<label for="schFrstDudtYmd--${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="schFrstDudtYmd--${pageName}" name="schFrstDudtYmd"
								data-fmt-type="day" autocomplete="off" title="날짜 선택" maxlength="10" required />
							<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
						</div>
						<!-- 회계연도 -->
						<div class="col-md-6">
							<label for="schFyr--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">회계연도</label>
							<input type="text" class="form-control w-px-80" id="schFyr--${pageName}" name="schFyr" maxlength="4" autocomplete="off" required />
						</div>
						<!-- 부과 번호 -->
						<div class="col-md-6">
							<label for="schLevyNoFrom--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">부과번호</label>
							<input type="text" class="form-control w-px-80" id="schLevyNoFrom--${pageName}" name="schLevyNoFrom" maxlength="6" value="000000" autocomplete="off" required /> ~
							<input type="text" class="form-control w-px-80" id="schLevyNoTo--${pageName}" name="schLevyNoTo" maxlength="6" value="999999" autocomplete="off" required />
						</div>
						<!-- 위반항목 -->
						<div class="col-12">
							<label for="schVltnId--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">위반항목</label>
							<select class="form-select w-px-160" id="schVltnId--${pageName}" name="schVltnId">
								<option value="">전체</option>
								<c:forEach items="${FIM004List}" var="item">
									<option value="${item.code}">${item.value}</option>
								</c:forEach>
							</select>
						</div>
					</div> <!-- <div class="row g-1"> -->
				</div> <!-- <div class="container-search"> -->
			</form>
			<!-- 검색 조건 영역 -->
		</div> <!-- <div class="card"> -->

		<p></p>

		<div class="card">
			<!-- 입력 영역 -->
			<form id="frmEdit--${pageName}" name="frmEdit">
				<div class="row g-1">
					<!-- 발송 구분 -->
					<div class="col-4">
						<label for="sndngSeCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">발송구분</label>
						<select class="form-select w-px-160" id="sndngSeCd--${pageName}" name="sndngSeCd">
							<c:forEach items="${FIM047List}" var="item">
								<option value="${item.code}">${item.value}</option>
							</c:forEach>
						</select>
					</div>
					<!-- 발송 일자 -->
					<div class="col-md-4">
						<label for="sndngYmd--${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="sndngYmd--${pageName}" name="sndngYmd"
							data-fmt-type="day" autocomplete="off" title="날짜 선택" maxlength="10" required />
						<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
					</div>
					<!-- 발송 종료 일자 -->
					<div class="col-md-4">
						<label for="sndngEndYmd--${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="sndngEndYmd--${pageName}" name="sndngEndYmd"
							data-fmt-type="day" autocomplete="off" title="날짜 선택" maxlength="10" required />
						<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
					</div>
					<!-- 문서 번호 -->
					<div class="col-md-12">
						<label for="docNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">문서번호</label>
						<input type="text" class="form-control w-30" id="docNo--${pageName}" name="docNo" />
					</div>
					<!-- 제목 명 -->
					<div class="col-md-12">
						<label for="ttlNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">제목</label>
						<input type="text" class="form-control w-85" id="ttlNm--${pageName}" name="ttlNm" />
					</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>
						<textarea type="text" class="form-control w-85" id="etcCn--${pageName}" name="etcCn" rows="2" data-maxlengthb="1000"></textarea>
					</div>
				</div>
			</form>
			<!-- 입력 영역 -->

			<!-- 업무 버튼 및 건수 표시 -->
			<div>
				<span class="container-page-btn">
					<!-- 업무 버튼 -->
					<span class="container-window-btn-right">
						<button type="button" class="btn btn-primary w-px-120" id="btnSave--${pageName}" title="저장">
							저장
						</button>
					</span>
				</span>
			</div> <!-- 업무 버튼 및 건수 표시 -->
		</div> <!-- <div class="card"> -->
		<!-- Page Body -->

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

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	pageObject["${pageName}"] = {};

 	// 공통 코드
 	var FIM004 = new CommonCodes(${FIM004}, true);								// 주정차위반 내역 코드
 	var FIM005 = new CommonCodes(${FIM005}, true);								// 전용차로위반 내역 코드
 	var FIM006 = new CommonCodes(${FIM006}, true);								// 장애인주차위반 내역 코드
 	var FIM061 = new CommonCodes(${FIM061}, true);								// 전기차 충전구역 및 충전방해 위반 코드
 	var FIM064 = new CommonCodes(${FIM064}, true);								// 화물자동차 밤샘주차 위반 코드
 	var FIM090 = new CommonCodes(${FIM090}, true);								// 통행제한 위반 코드

	/**************************************************************************
	 * script 진입
	 **************************************************************************/
	$(document).ready(function() {
		// pageObject
		let $P = pageObject["${pageName}"];

	 	// infoDialog 호출 용도(view 조회(편집불가), create 등록, update 수정)
		$P.callPurpose = "${callPurpose}";
		// FormFields
		$P.formFields = new FimsFormFields("#frmSearch--${pageName}");
		$P.formEditFields = new FimsFormFields("#frmEdit--${pageName}");

		/**************************************************************************
		 * DatasetControl
		 **************************************************************************/
		$P.control = new DatasetControl({
			  prefix: "nhtTrgt"
			, prefixName: "고지서 발송 대상"
			, infoSize: "xxl"
			, keymapper: info => info ? info.CRDN_ID : ""
			, dataGetter: obj => obj.${infoPrefix}List
			, appendData: true
		});
		// $P.control 설정
		$P.control.defaultFetchSize = FETCH_XS;									// 1 페이지당 조회되는 자료 건수 index.jsp에서 확인 FETCH_XS = 30
		$P.control.query = { pageNum : 1, fetchSize : $P.control.defaultFetchSize };
		$P.control.beforeCurrent = null;


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

			// 메시지 출력
			dialog.alert({
				  content: showMessage
				, init: () => { AppSupport.setDialogZindex(); }
				, onOK: () => { }
			});

			if (resp.saved) {
				dialog.close($P.control.prefix + "Dialog--${openerPageName}");
			}
		}

		// 저장
		$P.control.save = (info) => {
			if (!info) return;

	  		let create = ($P.callPurpose == "create");

			ajax.post({
				  url: !create ? $P.control.urls.update : $P.control.urls.create
				, data: info || {}
				, success: resp => $P.control.onSave(resp)
			});
		}

		/**************************************************************************
		 * 사용자 함수(function)
		 **************************************************************************/
		// 세외수입 과태료 대장 상세 조회
		$P.linkNxrpSpclB01 = (params) => {
			if (!params) return;

			ajax.post({
				  url: wctx.url("${infoPrefixUrl}" + "/991/nxrpB01List.do")
				, data: params || {}
				, success: resp => {
					// 연계 성공이면 저장 버튼 활성화
					if (resp.saved) {
						$("#schLevyYmd--${pageName}").prop("disabled", true);			// 부과일자
						$("#schFrstDudtYmd--${pageName}").prop("disabled", true);		// 최초납기일자
						$("#schFyr--${pageName}").prop("disabled", true);				// 회계연도
						$("#schLevyNoFrom--${pageName}").prop("disabled", true);		// 시작 부과번호
						$("#schLevyNoTo--${pageName}").prop("disabled", true);			// 종료 부과번호
						$("#schVltnId--${pageName}").prop("disabled", true);			// 위반항목

						// enabled
						$("#btnSave--${pageName}").prop("disabled", false);				// 저장 버튼
					}

					// S 또는 F 를 버튼 title 로 변경하여 메시지 출력
			  		let showMessage = resp.rtnMsg.replace(/[S]|[F]/g, params.title);

					dialog.alert({
						  content: showMessage
						, init: () => { AppSupport.setDialogZindex(); }
						, onOK: () => { }
					});
				}
			});
		}

		/**************************************************************************
		 * 버튼 clickEvent
		 **************************************************************************/
		// 제목 변경
		$P.fnChangeTitle = () => {
			let title = "";
			let sndngYmd = $("#sndngYmd--${pageName}").val();

			sndngYmd = sndngYmd.replace(/-/g, "");
			title = sndngYmd.substring(0, 4) + "년";
			title = title + " " + sndngYmd.substring(4, 6) + "월";
			title = title + " " + $("#sndngSeCd--${pageName} :selected").text();

			$("#ttlNm--${pageName}").val(title);
		}

		// 세외수입 과태료 대장 등록 자료 상세 조회 버튼 이벤트
		$P.fnLinkNxrpSpclB01 = (title) => {
			// validate 확인
			if (!AppSupport.customValidate($("#frmEdit--${pageName}").find("input, select, textarea"))) return;

			dialog.alert({
				  content: title + "를 조회하시겠습니까?"
				, onOK: () => {
					// 파라미터(params) 설정
					let params = $P.formFields.get();
					params.callPurpose = "update";
					params.title = title;										// 타이틀
					params.sggCd = $("#sggCd--${pageName}").val();				// 시군구 코드
					params.taskSeCd = $("#taskSeCd--${pageName}").val();		// 업무 구분 코드

					$P.linkNxrpSpclB01(params);
				}
			});
		}

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

			dialog.alert({
				  content : $P.control.prefixName + " 정보를 저장하시겠습니까?"
				, init: () => { AppSupport.setDialogZindex(); }
				, onOK : () => {
					// 검색조건과 저장 파라미터 객체를 합친다.
					let params = $.extend({}, $P.formEditFields.get(), $P.formFields.get());
					params.sndngRegSeCd = "01";									// 발송 등록 구분 코드(SNDNG_REG_SE_CD) - 01: 일괄
					params.rsndYn = "N";										// 재발송 여부
					params.delYn = "N";											// 삭제 여부

					$P.control.save(params);
				}
			});
		}

		/**************************************************************************
		 * 초기 셋팅
		 **************************************************************************/
		// 이벤트 설정
		$P.setEvent = () => {
			// 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);
					}
				});
			});

			// 발송일자 변경 이벤트
			$("#sndngYmd--${pageName}").on("change", function() {
				$P.fnChangeTitle();

				// 납기일자 변경
				let sndngYmd = $("#sndngYmd--${pageName}").val();
				sndngYmd = sndngYmd.replace(/-/g, "");
				$("#sndngEndYmd--${pageName}").datepicker("setDate", new Date(sndngYmd.substring(0, 4), sndngYmd.substring(4, 6), 0));	// 납기일자
			});
			// 발송구분 변경 이벤트
			$("#sndngSeCd--${pageName}").on("change", function() {
				$P.fnChangeTitle();
			});

			// 업무 버튼 이벤트
			$("#btnLinkNxrpSpclB01--${pageName}").on("click", function() {
				$P.fnLinkNxrpSpclB01($(this).attr("title"));					// 세외수입 체납상세정보 조회
			});
			$("#btnSave--${pageName}").on("click", () => $P.fnSave());			// 저장 버튼
		}

		// 초기 화면 설정
		$P.initForm = () => {
			// 화면 초기화
			$("#frmSearch--${pageName}")[0].reset();

			// 기본 데이터 설정
			$("#sggCd--${pageName}").val("${sggCd}");								// 시군구 코드
			$("#taskSeCd--${pageName}").val("${taskSeCd}");							// 업무 구분 코드
			AppSupport.initDatepicker("frmSearch--${pageName}");								// 달력 초기화
			$("#schLevyYmd--${pageName}").datepicker("setDate", new Date());		// 부과일자
			$("#schFrstDudtYmd--${pageName}").datepicker("setDate", new Date());	// 최초납기일자
			$("#schFyr--${pageName}").val(new Date().getFullYear());				// 회계연도
			$("#schLevyNoFrom--${pageName}").val("000001");							// 시작 부과번호
			$("#schLevyNoTo--${pageName}").val("999999");							// 종료 부과번호
			AppSupport.initDatepicker("frmEdit--${pageName}");									// 달력 초기화
			$("#sndngYmd--${pageName}").datepicker("setDate", new Date());			// 발송 일자
			$("#sndngEndYmd--${pageName}").datepicker("setDate", new Date());		// 발송 종료 일자
			$("#sndngSeCd--${pageName}").val("03").prop("selected", true);			// 발송구분
			$("#sndngYmd--${pageName}").datepicker("setDate", new Date());			// 발송일자

			$("#btnSave--${pageName}").prop("disabled", true);						// 저장

			// 업무 구분별 설정
			$P.setTask("${taskSeCd}");
		}

		// 업무 구분별 설정
		$P.setTask = (taskSeCd) => {
			// 업무구분에 따른 URL 설정
			$P.control.urls.create = wctx.url("${infoPrefixUrl}" + "/100/createList.do");	// 등록

			// 업무별 조회조건
			FimsSupport.renderForTask("frmSearch--${pageName}", taskSeCd.toLowerCase());

			// 업무에 따른 위반 내용
			let vltnIdCode = [];
			if (taskSeCd == "PVS") {											// 주정차 위반
				vltnIdCode = FIM004.list();
			} else if (taskSeCd == "BPV") {										// 전용차로 위반
				vltnIdCode = FIM005.list();
			} else if (taskSeCd == "DPV") {										// 장애인 전용
				vltnIdCode = FIM006.list();
			} else if (taskSeCd == "ECA") {										// 전기차 주차 위반
				vltnIdCode = FIM061.list();
			} else if (taskSeCd == "PES") {										// 밤샘 주차 위반
				vltnIdCode = FIM064.list();
			} else if (taskSeCd == "RVS") {										// 
				vltnIdCode = FIM090.list();
			} else {
				return;
			}

			// 위반 항목
			$("#schVltnId--${pageName}").empty();
			$("#schVltnId--${pageName}").append("<option value=''>" + "전체" + "</option>");
			$(vltnIdCode).each(function(index, item) {
				$("#schVltnId--${pageName}").append("<option value='" + vltnIdCode[index].code +"'>" + vltnIdCode[index].value + "</option>");
			});
		}

		/**************************************************************************
		 * 최초 실행 함수
		 **************************************************************************/
		// 1. 이벤트 설정
		$P.setEvent();

		// 2. 초기 화면 설정
		$P.initForm();

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

</script>
