<%@ 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-xxl flex-grow-1 px-0">
		<div class="card wrapper-list">
			<!-- 상단 버튼 -->
			<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="btnSearch--${pageName}" title="검색">
						검색
					</button>
					<button type="button" class="btn btn-excel w-px-120" id="btnExcel--${pageName}" title="엑셀">
						엑셀
					</button>
				</span>
			</div>
			<!-- 상단 버튼 -->

			<!-- 검색 조건 영역 -->
			<form id="frmSearch--${pageName}" name="frmSearch">
				<!-- hidden -->
				<input type="hidden" id="sggCd--${pageName}" name="sggCd" />

				<!-- 메인 조건 -->
				<div class="container-search">
					<div class="row g-1">
						<!-- 업무 구분 -->
						<div class="col-12">
							<span class="form-label fw-bold form-search-title w-px-120 text-end">업무구분</span>
							<span class="form-search-linebox">
								<c:forEach items="${taskListForSgg}" var="item">
									<label>
										<input type="radio" class="form-check-input" name="taskSeCd" alt="업무구분"
											value="${item.code}" onchange="fnResetAndChangeBiz${pageName}(this.value);">
										${item.value}
									</label>
								</c:forEach>
							</span>
						</div>
						<!-- 발송 일자 -->
						<div class="col-6">
							<label class="form-label fw-bold form-search-title w-px-120 text-end" for="schSndngYmdFrom--${pageName}">발송일자</label>
							<span class="form-search-linebox">
								<input type="text" class="form-control form-date" id="schSndngYmdFrom--${pageName}" name="schSndngYmdFrom"
									data-fmt-type="day" title="시작 날짜 선택" />
								<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
								~
								<input type="text" class="form-control form-date" id="schSndngYmdTo--${pageName}" name="schSndngYmdTo"
									data-fmt-type="day" title="종료 날짜 선택" />
								<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
							</span>
						</div>
						<!-- 동적 검색 -->
						<div class="col-6">
                        	<input type="hidden" id="by--${pageName}" name="by" />
							<input type="text" class="form-control" id="byOutput--${pageName}" value="동적 검색" readonly />
							<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
							<input type="hidden" id="subOption--${pageName}" name="subOption" />
							<input type="text" class="form-control w-px-300" id="term--${pageName}" name="term" />
							<!-- 상세 검색조건 버튼 -->
							<span class="flr">
								<button type="button" class="btn btn-open-detail" data-bs-toggle="collapse" data-bs-target="#searchDetail--${pageName}">
									<i class="bx bx-chevron-down"></i>
									상세검색
								</button>
							</span>
						</div>
					</div>
				</div> <!-- 메인 조건 -->

				<!-- 상세 조건 -->
				<div id="searchDetail--${pageName}" class="container-search container-search-detail collapse">
					<div class="row g-1">
						<!-- 등록일자, 수정일자 -->
						<div class="col-6">
							<select class="form-select w-px-120 text-center" id="schRegDateOpt--${pageName}" name="schRegDateOpt">
								<option value="regDt">등록일자</option>
								<option value="mdfcnDt">수정일자</option>
							</select>
							<span class="form-search-linebox">
								<input type="text" class="form-control form-date" id="schRegDateFrom--${pageName}" name="schRegDateFrom"
                                	data-fmt-type="day" title="시작 날짜 선택" />
								<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
                                ~
								<input type="text" class="form-control form-date" id="schRegDateTo--${pageName}" name="schRegDateTo"
                                	data-fmt-type="day" title="종료 날짜 선택">
								<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
							</span>
						</div>
						<!-- 등록자명, 수정자명 -->
						<div class="col-6">
							<select class="form-select w-px-120 text-center" id="schRgtrOpt--${pageName}" name="schRgtrOpt">
								<option value="rgtr">등록자</option>
								<option value="mdfr">수정자</option>
							</select>
							<input type="hidden" id="schRgtrCd--${pageName}" name="schRgtrCd" />
							<input type="text" class="form-control w-px-160" id="schRgtrNm--${pageName}" name="schRgtrNm" />
							<button type="button" class="btn btn-sm btn-outline-dark" id="btnFindUser--${pageName}" title="사용자 검색">검색</button>
						</div>
					</div>
				</div> <!-- 상세 조건 -->
		    </form>
		    <!-- 검색 조건 영역 -->

			<!-- 업무 버튼 및 건수 표시 -->
			<div>
				<span class="container-page-btn">
	            	<!-- 건수, 페이지 표시 -->
					<div class="d-flex flex-row justify-content-between">
						<span class="dataTables_info" id="paging--${pageName}PagingInfo" role="status" aria-live="polite"></span>
						<ul class="pagination pagination-primary" id="paging--${pageName}">
						</ul>
					</div>
					<!-- 업무 버튼 -->
		            <span class="container-window-btn-right">
						<button type="button" class="btn btn-primary w-px-120" id="btnCreateNhtSndng--${pageName}" title="고지서 발송 등록">
							발송 등록
						</button>
						<button type="button" class="btn btn-primary w-px-120" id="btnRemoveNhtSndng--${pageName}" title="고지서 발송 삭제">
							발송 삭제
						</button>
		            </span>
				</span>
			</div>
			<!-- 업무 버튼 및 건수 표시 -->

			<!-- DataTables(그리드) -->
			<div class="card-datatable text-nowrap">
				<div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
					<div class="table-responsive ox-scroll oy-scroll h-px-500" id="table-responsive--${pageName}">
						<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
							<thead class="sticky-thead">
								<tr id="theadTr--${pageName}"
									data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
								</tr>
							</thead>
							<tbody id="tbody--${pageName}">
							</tbody>

							<template id="${infoPrefix}Col--${pageName}">
								<th class="cmn" style="width: 72px;">No.</th>
								<th class="cmn" style="width: 56px;"><input type="checkbox" class="form-check-input" id="gridAllCheckbox--${pageName}" onchange="pageObject['${pageName}'].control.select(this.checked);" /></th>
								<th class="cmn" style="width: 160px;" onclick="FimsSupport.searchFromGridTitle('TASK_SE_CD', this.innerText, 'codeValue', 'FIM054');">업무구분</th>
								<th class="cmn" style="width: 100px;" onclick="FimsSupport.searchFromGridTitle('SNDNG_REG_SE_CD', this.innerText, 'codeValue', 'FIM067');">등록구분</th>
								<th class="cmn" style="width: 160px;" onclick="FimsSupport.searchFromGridTitle('VLTN_ARTCL', this.innerText, 'match', 'part');">위반항목</th>
								<th class="cmn" style="width: 120px;" onclick="FimsSupport.searchFromGridTitle('SNDNG_YMD', this.innerText, 'ymd', '');">발송일자</th>
								<th class="cmn" style="width: 120px;" onclick="FimsSupport.searchFromGridTitle('SNDNG_END_YMD', this.innerText, 'ymd', '');">납기일자</th>
								<th class="cmn" style="width: 100px;" onclick="FimsSupport.searchFromGridTitle('TNOCS', this.innerText, 'match', 'part');">총건수</th>
								<th class="cmn" style="width: 140px;" onclick="FimsSupport.searchFromGridTitle('GRAMT', this.innerText, 'match', 'part');">총금액</th>
								<th class="cmn" style="width: 200px;" onclick="FimsSupport.searchFromGridTitle('DOC_NO', this.innerText, 'match', 'part');">문서번호</th>
								<th class="cmn" style="width: 320px;" onclick="FimsSupport.searchFromGridTitle('TTL_NM', this.innerText, 'match', 'part');">제목</th>
								<th class="cmn" style="width: 180px;">등록일시</th>
								<th class="cmn" style="width: 140px;">등록사용자</th>
								<th class="cmn" style="width: 180px;">수정일시</th>
								<th class="cmn" style="width: 140px;">수정사용자</th>
								<th class="cmn dummy-th"></th>
							</template>
							<template id="${infoPrefix}Row--${pageName}">
								<tr data-key="{SNDNG_ID}">
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
									<td class="cmn text-center"><input type="checkbox" class="form-check-input" name="gridCheckbox" value="{SNDNG_ID}" onchange="pageObject['${pageName}'].control.select('{SNDNG_ID}', this.checked);" /></td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{TASK_SE_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{SNDNG_REG_SE_NM}</td>
									<td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{VLTN_ARTCL}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{SNDNG_YMD}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{SNDNG_END_YMD}</td>
									<td class="cmn text-end"    onclick="{onclick}" ondblclick="{ondblclick}">{TNOCS}</td>
									<td class="cmn text-end"    onclick="{onclick}" ondblclick="{ondblclick}">{GRAMT}</td>
									<td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{DOC_NO}</td>
									<td class="cmn text-start"  onclick="{onclick}" ondblclick="{ondblclick}">{TTL_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td>
									<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td>
									<td class="cmn dummy-td"></td>
								</tr>
							</template>
							<template id="${infoPrefix}NotFound--${pageName}">
								<tr class="bpv">
									<td valign="top" colspan="16" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
								<tr class="dpv">
									<td valign="top" colspan="16" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
								<tr class="eca">
									<td valign="top" colspan="16" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
								<tr class="pvs">
									<td valign="top" colspan="16" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
								<tr class="pes">
									<td valign="top" colspan="16" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
								</tr>
							</template>
						</table>
					</div>
				</div>
			</div>
			<!-- DataTables(그리드) -->
		</div> <!-- <div class="card wrapper-list"> -->
	</div> <!-- <div class="container-xxl flex-grow-1 px-0"> -->
	<!-- Content -->

  	<div class="content-backdrop fade"></div>
</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);		// 화물자동차 밤샘주차 위반 코드

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

		// URL
		$P.PrefixUrl = "/sndb/sndb01";
		// FormFields
		$P.formFields = new FimsFormFields("#frmSearch--${pageName}");

		/**************************************************************************
		 * DatasetControl
		 **************************************************************************/
			$P.control = new DatasetControl({
			  prefix : "nhtTrgt"
			, prefixName : "고지서 발송 대상"
			, infoSize : "xl"
			, keymapper : info => info ? info.CRDN_ID : ""
			, dataGetter : obj => obj.${infoPrefix}List
			, appendData : true
			, formats : {
				  CVLCPT_RCPT_YMD : dateFormat
		    	, CRDN_YMD_TM : datetimeFormat
		    	, FFNLG_AMT : numberFormat
		    	, ADVNTCE_AMT : numberFormat
		    	, REG_DT : datetimeFormat
		    	, MDFCN_DT : datetimeFormat
			}
		});
		// $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 이벤트
		 **************************************************************************/
		// Dataset 변경 이벤트
		$P.control.onDatasetChange = (obj, option) => {
			$P.renderList(obj.${infoPrefix}Total, option);

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


		};

		// 현재 선택 자료 변경 이벤트
		$P.control.onCurrentChange = item => {
			if (!item) return;

			let key = item.data.SNDNG_ID;

			$("#tbody--${pageName}").setCurrentRow(key);
		};

		// 선택(체크) 변경 이벤트
		$P.control.onSelectionChange = (selected) => {
			let ${infoPrefix}List = $P.control.dataset;
			let keys = selected.map(e => ${infoPrefix}List.getKey(e));

			$("#tbody--${pageName} input[type='checkbox']").each(function() {
				let checkbox = $(this);

				checkbox.prop("checked", keys.includes(checkbox.val()));
			});

			// 선택 대상 등록 버튼
			$("#btnCreateSlctnTrgt--${pageName}").prop("disabled", keys.length < 1);

			// DataTables(그리드) 전체 선택(checkbox)
			if (keys.length < 1) {
				$("#DataTables_Table_0--${pageName} th input[type='checkbox']").prop("checked", false);		// 체크 해제
			} else if (keys.length == ${infoPrefix}List.length) {
				$("#DataTables_Table_0--${pageName} th input[type='checkbox']").prop("checked", true);		// 체크 설정
			} else {
				$("#DataTables_Table_0--${pageName} th input[type='checkbox']").prop("checked", false);		// 체크 해제
			}
		};

		// 고지서 발송 등록 dialog
		$P.control.getInfo = (params) => {
			if (!params) return;

			let dialogTitle = "";

			if (params.callPurpose == "create") {
				dialogTitle = $P.control.prefixName + " 등록";
			} else if (params.callPurpose == "update") {
				dialogTitle = $P.control.prefixName + " 수정";
			} else {
				dialogTitle = $P.control.prefixName + " 정보";
			}


			ajax.get({
				  url : $P.control.urls.getInfo
				, data : params || {}
				, success : resp => {
					dialog.open({
						  id : $P.control.prefixed("Dialog")
						, title : dialogTitle
						, content : resp
						, size : $P.control.infoSize
						, onClose : () => {	$P.fnRefreshList(); }
					});
				}
			});
		}

		/**************************************************************************
		 * DataTables 이벤트
		 **************************************************************************/
		// DataTables에 click, dbclick 이벤트
		$P.renderList = (totalSize, option) => {
			let ${infoPrefix}List = $P.control.dataset;
			let empty = ${infoPrefix}List.empty;
			let clsForTask = $("#frmSearch--${pageName} input[name='taskSeCd']:checked").val().toLowerCase();	// 소문자

			// 업무별 그리드 td
			let foundContent = document.getElementById("${infoPrefix}Row--${pageName}").content;
			let foundTr = $(foundContent).find("tr")[0].cloneNode(false);
			let foundTds = $(foundContent).find("." + clsForTask + ",.cmn");

			foundTds.each(function() {
				foundTr.appendChild(this.cloneNode(true));
			});

			//
			let replacer = (str, dataItem) => str
				.replace(/{onclick}/gi, "pageObject['${pageName}'].control.setCurrent('" + dataItem.getValue("SNDNG_ID") + "');")
				.replace(/{ondblclick}/gi, "pageObject['${pageName}'].control.getInfo('" + dataItem.getValue("SNDNG_ID") + "');");

			let trs = empty ? [document.getElementById("${infoPrefix}NotFound--${pageName}").content.querySelector("." + clsForTask + ",.cmn").outerHTML]
							: ${infoPrefix}List.inStrings(foundTr.outerHTML, replacer);

			let noMore = (${infoPrefix}List.length >= totalSize);
			let initScroll = ($P.control.query.pageNum < 2);
			if(option != null && option.reloaded){
				initScroll = false;
			}
			$("#table-responsive--${pageName}")[0].changeContent(trs.join(), initScroll, noMore);


		    // checkbox 체크 해제
			$("#DataTables_Table_0--${pageName} th input[type='checkbox']").prop("checked", false);

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

		// DataTables에 스크롤이 맨 밑으로 이동했을 때 이벤트
		$P.scrollDataList = () => {
			$P.control.load($P.control.query.pageNum + 1);
		}

		/**************************************************************************
		 * 사용자 함수(function)
		 **************************************************************************/
		// 검색 자료 재조회
		$P.fnRefreshList = () => {
			$P.control.query.crdnIds = null;

			$P.control.reload({all : true});
		}

		// 사용자검색 callback
		$P.callbackFindUser = (userId, userNm) => {
			$("#schRgtrCd--${pageName}").val(userId);							// 사용자 ID
			$("#schRgtrNm--${pageName}").val(userNm);							// 사용자 명
		}

		// 개별총정보 dialog
		$P.getTotalInfo = (crdnId) => {
			crdnTotalInfo({
				  callControlName : "pageObject['${pageName}'].control"
				, sggCd : $("#sggCd--${pageName}").val()
				, taskSeCd : $("#frmSearch--${pageName} input[name='taskSeCd']:checked").val()
				, crdnId : crdnId
			});
		}

		/**************************************************************************
		 * 버튼 clickEvent
		 **************************************************************************/
		// 업무 구분 변경
		$P.fnResetAndChangeBiz = (taskSeCd) => {
			// 업무 구분 코드
			if (typeof taskSeCd == "undefined" || taskSeCd == null || taskSeCd == "") {
				taskSeCd = $("#layout-navbar input[name='taskSeCd']:checked").val();
			}

			// 초기 기본 설정
			$P.initForm();
			// 기본 데이터 설정
			$P.initData(taskSeCd);
			// 업무 구분별 설정
			$P.setTask(taskSeCd);

			// dataset 초기화
	 		$P.control.dataset.clear();
		}

		// 검색 버튼 이벤트
		$P.fnSearchList = () => {
			// 검색조건
			// 검색조건
			$P.control.query = $P.formFields.get();
			$P.control.query.fetchSize = $P.control.defaultFetchSize;	// 한번에 조회되는 자료 건수

			$P.control.query.sndngSeCdFrom = "03";		// 발송 구분 코드 - 03 부과고지서
			$P.control.query.sndngSeCdTo = "08";		// 발송 구분 코드 - 08 체납고지서
	 		$P.control.query.delYn = "N";				// 삭제 여부

	 		$P.control.load(1);
		}

		// 엑셀 버튼 이벤트
		$P.fnExcel = () => {
			if ($P.control.dataset.empty) {
				dialog.alert({
					  content : "검색된 자료가 없습니다."
					, onOK : () => { }
				});
				return;
			}

			// DataTables(그리드)
			let cellDefs = AppSupport.getCellDefs($("#theadTr--${pageName} th").not(".dummy-th").not(":eq(0)")
					, $($("#${infoPrefix}Row--${pageName}")[0].content).find("td").not(".dummy-td").not(":eq(0)")
					, FimsSupport.getCellDefsForPrivacyCell);

			$P.control.query.cellDefs = cellDefs;

			$P.control.download();
		}

		// 사용자검색 버튼 클릭 이벤트
		$P.fnGetFindUser = () => {
			let params = {
				  openerPageName: "${pageName}"
				, callbackFuncName: "pageObject['${pageName}']['callbackFindUser']"
			}

			ajax.get({
				  url: wctx.url("/user/user02/010/main.do") + "?openerPageName=${pageName}"
				, data: params || {}
				, success: resp => {
					dialog.open({
						  id: "userDialog--${pageName}"
						, title: "사용자 검색"
						, content: resp
						, size: "lg"
						, init: () => { AppSupport.setDialogZindex(); }
					});
				}
			});
		}

		// 선택 발송대상 등록 버튼 이벤트
		$P.fnCreateSlctnTrgt = (title) => {
			// 선택 자료
			let selected = $P.control.dataset.getKeys("selected");

			if (selected.length < 1) return;

			// 파라미터 설정
			let params = $P.control.query;				// 검색 조건
			params.callPurpose = "create";				// 호출 용도 (등록)
			params.title = title;						// 타이틀
			params.crdnIds = selected.join(",");		// Ids
			params.sndngSeCd = "03";					// 발송 구분 코드(FIM047) - 03 부과고지서
			params.rsndYn = "N";						// 재발송 여부
			params.delYn = "N";							// 삭제 여부

			$P.control.getInfo(params);
		}

		// 전체 발송대상 등록 버튼 이벤트
		$P.fnCreateWholTrgt = (title) => {
			if ($P.control.dataset.empty) {
				dialog.alert({
					  content : "검색된 자료가 없습니다."
					, onOK : () => { }
				});
				return;
			}

			// 파라미터 설정
			let params = $P.control.query;				// 검색 조건
			params.callPurpose = "create";				// 호출 용도 (등록)
			params.title = title;						// 타이틀
			params.sndngSeCd = "03";					// 발송 구분 코드 - 03 부과고지서
			params.rsndYn = "N";						// 재발송 여부
			params.delYn = "N";							// 삭제 여부

			$P.control.getInfo(params);
		}

		/**************************************************************************
		 * 초기 셋팅
		 **************************************************************************/
		// 이벤트 설정
		$P.setEvent = () => {
			// 기본 버튼 이벤트
			$("#btnReset--${pageName}").on("click", () => $P.fnResetAndChangeBiz());	// 초기화
			$("#btnSearch--${pageName}").on("click", () => $P.fnSearchList());			// 검색
			$("#btnExcel--${pageName}").on("click", () => $P.fnExcel());				// 엑셀
			$("#btnFindUser--${pageName}").on("click", () => $P.fnGetFindUser());		// 사용자 검색

			// 동적검색에서 엔터(Enter) 키를 누르면 검색한다.
			$("#term--${pageName}").onEnterPress(function() {
				$P.fnSearchList();
			});

			// form-date 항목에서 키보드로 입력시 날짜 포맷팅 적용
			$("#frmSearch--${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);
					}
				});
			});

			// 선택 대상 등록 버튼 이벤트
			$("#btnCreateSlctnTrgt--${pageName}").on("click", function() {
				$P.fnCreateSlctnTrgt($(this).attr("title"));
			});
			// 전체 대상 등록 버튼 이벤트
			$("#btnCreateWholTrgt--${pageName}").on("click", function() {
				$P.fnCreateWholTrgt($(this).attr("title"));
			});

			// DataTables width 변경 조정
			Componentization.fnMakeResizableTable($("#table-responsive--${pageName}")[0]);

			// DataTables 스크롤 이벤트 생성
			Componentization.fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
		}

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

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

			// 최고 관리자 경우 업무구분을 선택할 수 있도록 하자.
			$("#frmSearch--${pageName} input[name='taskSeCd']").each(function(i) {
				$(this).prop("disabled", "true");
			});

			// 달력 초기화
			AppSupport.initDatepicker("frmSearch--${pageName}");
			$("#schSndngYmdFrom--${pageName}").datepicker("setDate", new Date());
			$("#schSndngYmdTo--${pageName}").datepicker("setDate", new Date());

			// 동적 검색
			$("#byOutput--${pageName}").val("동적 검색");
			// 사용자 이름
			$("#schRgtrNm--${pageName}").prop("readonly", true);
		}

		// 기본 데이터 설정
		$P.initData = (taskSeCd) => {
			// 시군구 코드
			$("#sggCd--${pageName}").val("${sggCd}");
			// 업무 구분 코드
			$("#frmSearch--${pageName} input[name='taskSeCd'][value='" + taskSeCd + "']").prop("checked", true);

			// 일자
			$("#schSndngYmdFrom--${pageName}").datepicker("setDate", DateSupport.getAddDay(-7));
			$("#schSndngYmdTo--${pageName}").datepicker("setDate", new Date());
		}

		// 업무 구분별 설정
		$P.setTask = (taskSeCd) => {
			let clsForTask = taskSeCd.toLowerCase();

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

			// 업무별 그리드 th
			let colContent = document.getElementById("${infoPrefix}Col--${pageName}").content;
			let cols = $(colContent).find("." + clsForTask + ",.cmn");
			let colsOuterHTML = "";

			cols.each(function() {
				colsOuterHTML += this.outerHTML;
			});
			$("#table-responsive--${pageName}")[0].changeColumn(colsOuterHTML);

			// URL 설정
			$P.setURL(taskSeCd);
		}

		// 업무구분에 따른 URL 설정
		$P.setURL = (taskSeCd) => {
			$P.control.urls.load = wctx.url($P.PrefixUrl + "/090/list.do");		// 검색
			$P.control.urls.remove = wctx.url($P.PrefixUrl + "/090/remove.do");	// 삭제
			$P.control.urls.getInfo = wctx.url($P.PrefixUrl + "/100/info.do");		// 고지서 세부 내용
		}

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

		// 2. 초기 설정 및 업무 구분 변경
		$P.fnResetAndChangeBiz($("#layout-navbar input[name='taskSeCd']:checked").val());

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

</script>
