<%@ 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-12 mx-1">
			<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="btnSndngCreate--${pageName}" title="개별 발송 등록" onclick="fnBtnSndngCreate${pageName}();">
							개별 발송 등록
						</button>
						<button type="button" class="btn btn-primary" id="btnSndngRemove--${pageName}" title="개별 발송 삭제" onclick="fnBtnSndngRemove${pageName}();">
							개별 발송 삭제
						</button>
						<button type="button" class="btn btn-primary" id="btnSndbkCreate--${pageName}" title="개별 반송 등록" onclick="fnBtnSndbkCreate${pageName}();">
							개별 반송 등록
						</button>
						<button type="button" class="btn btn-primary" id="btnSndbkUpdate--${pageName}" title="개별 반송 수정" onclick="fnBtnSndbkUpdate${pageName}();">
							개별 반송 수정
						</button>
						<button type="button" class="btn btn-primary" id="btnSndbkRemove--${pageName}" title="개별 반송 삭제" onclick="fnBtnSndbkRemove${pageName}();">
							개별 반송 삭제
						</button>
						<button type="button" class="btn btn-primary" id="btnPostTraceView--${pageName}" title="우편 종적 보기" onclick="fnBtnPostTraceView${pageName}();">
							우편 종적 보기
						</button>
					</span>
				</div> <!-- <div class="container-page-btn"> -->

				<div class="row g-1">
					<!-- DataTables(그리드) -->
					<div class="card-datatable text-nowrap">
						<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer">
							<div id="table-responsive--${pageName}" class="table-responsive" style="overflow-x:scroll; height:336px; overflow-y:scroll;" >
								<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
									<thead>
										<tr id="theadTr--${pageName}">
											<th>수납</th>
											<th>발송구분</th>
											<th>발송일자</th>
											<th>납기일자</th>
											<th>등기번호</th>
											<th>성명</th>
											<th>주소</th>
											<th>상세주소</th>
											<th>우편번호</th>
											<th>회계연도</th>
											<th>부과번호</th>
											<th>금액</th>
											<th>배달일자</th>
											<th>배달시각</th>
											<th>미배달사유</th>
											<th>수령인</th>
											<th>수령인관계</th>
											<th>공시송달일자</th>
											<th>처리상태</th>
											<th>등록일시</th>
											<th>등록사용자</th>
											<th>수정일시</th>
											<th>수정사용자</th>
										</tr>
									</thead>
									<tbody id="tbody--${pageName}">
									</tbody>
									<template id="${infoPrefix}Row--${pageName}">
										<tr data-key="{SNDNG_DTL_ID}">
											<td class="text-center" onclick="{onclick}">{SNDNG_RCVMT_NM}</td>
											<td class="text-center" onclick="{onclick}">{SNDNG_SE_NM}</td>
											<td class="text-center" onclick="{onclick}">{SNDNG_YMD}</td>
											<td class="text-center" onclick="{onclick}">{DUDT_YMD}</td>
											<td class="text-center" onclick="{onclick}">{RG_NO}</td>
											<td class="text-start" onclick="{onclick}">{RTPYR_NM}</td>
											<td class="text-start" onclick="{onclick}">{RTPYR_ADDR}</td>
											<td class="text-start" onclick="{onclick}">{RTPYR_DTL_ADDR}</td>
											<td class="text-center" onclick="{onclick}">{RTPYR_ZIP}</td>
											<td class="text-center" onclick="{onclick}">{FYR}</td>
											<td class="text-center" onclick="{onclick}">{LEVY_NO}</td>
											<td class="text-end" onclick="{onclick}">{LEVY_SUM_AMT}</td>
											<td class="text-center" onclick="{onclick}">{DLVR_YMD}</td>
											<td class="text-center" onclick="{onclick}">{DLVR_TM}</td>
											<td class="text-start" onclick="{onclick}">{UNDLVR_RSN_NM}</td>
											<td class="text-start" onclick="{onclick}">{RCPN_NM}</td>
											<td class="text-center" onclick="{onclick}">{RCPN_REL_NM}</td>
											<td class="text-center" onclick="{onclick}">{SVBTC_YMD}</td>
											<td class="text-start" onclick="{onclick}">{SNDNG_DTL_STTS_NM}</td>
											<td class="text-center" onclick="{onclick}">{REG_DT}</td>
											<td class="text-center" onclick="{onclick}">{RGTR_NM}</td>
											<td class="text-center" onclick="{onclick}">{MDFCN_DT}</td>
											<td class="text-center" onclick="{onclick}">{MDFR_NM}</td>
										</tr>
									</template>
									<template id="${infoPrefix}NotFound--${pageName}">
										<tr class="odd">
											<td valign="top" colspan="23" class="dataTables_empty text-center">발송 정보를 찾지 못했습니다.</td>
										</tr>
									</template>
								</table>
							</div>
						</div>
					</div> <!-- / DataTables(그리드) -->
				</div> <!-- <div class="row g-1"> -->
			</div> <!-- <div class="card"> -->
		</div> <!-- 발송 정보 <div class="col-xl-12 mx-1"> -->
	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->

	<p></p>

	<div class="d-flex flex-row justify-content-evenly">
		<!-- 가상계좌 정보 -->
		<div class="col-xl-3 mx-1">
			<!-- 입력 영역 -->
			<form id="frmEdit--${pageName}" name="frmEdit">
				<!-- hidden -->
				<input type="hidden" id="sndngDtlId--${pageName}" name="sndngDtlId" data-map="SNDNG_DTL_ID" />
				<input type="hidden" id="sndngId--${pageName}" name="sndngId" data-map="SNDNG_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>
					</div> <!-- <div class="container-page-btn"> -->
					<div class="row g-1">
						<!-- 가상계좌 -->
						<div class="col-md-12">
							<textarea type="text" class="form-control w-100" id="vrActno--${pageName}" name="vrActno" cols="100%" rows="7" readonly>
							</textarea>
						</div>
						<!-- 전자납부번호 -->
						<div class="col-md-12">
							<label for="epayno--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">전자납부번호</label>
							<input type="text" class="form-control w-65" id="epayno--${pageName}" name="epayno" data-map="EPAYNO" readonly />
						</div>
					</div>
				</div> <!-- <div class="card"> -->
			</form>
		</div> <!-- 가상계좌 정보 <div class="col-xl-3 mx-1"> -->

		<!-- 공시송달 이력 -->
		<div class="col-xl-9 mx-1">
			<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>
				</div>
				<div class="row g-1">
					<!-- DataTables(그리드) -->
					<div class="card-datatable text-nowrap">
						<div id="DataTables_Table_0_wrapper--${pageName}${pageDataName2}" class="dataTables_wrapper dt-bootstrap5 no-footer">
							<div id="table-responsive--${pageName}${pageDataName2}" class="table-responsive" style="overflow-x:scroll; height:200px; overflow-y:scroll;" >
								<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}${pageDataName2}" aria-describedby="DataTables_Table_0_info">
									<thead>
										<tr id="theadTr--${pageName}${pageDataName2}">
											<th>공시송달일자</th>
											<th>제목</th>
											<th>문서번호</th>
											<th>기타내용</th>
											<th>등록일시</th>
											<th>등록사용자</th>
										</tr>
									</thead>
									<tbody id="tbody--${pageName}${pageDataName2}">
									</tbody>
									<template id="${infoPrefix}Row--${pageName}${pageDataName2}">
										<tr data-key="{SVBTC_ID}">
											<td class="text-center" onclick="{onclick}">{SVBTC_YMD}</td>
											<td class="text-center" onclick="{onclick}">{TTL_NM}</td>
											<td class="text-center" onclick="{onclick}">{DOC_NO}</td>
											<td class="text-center" onclick="{onclick}">{ETC_CN}</td>
											<td class="text-center" onclick="{onclick}">{REG_DT}</td>
											<td class="text-center" onclick="{onclick}">{RGTR_NM}</td>
										</tr>
									</template>
									<template id="${infoPrefix}NotFound--${pageName}${pageDataName2}">
										<tr class="odd">
											<td valign="top" colspan="6" class="dataTables_empty text-center">공시송달 정보를 찾지 못했습니다.</td>
										</tr>
									</template>
								</table>
							</div>
						</div>
					</div> <!-- / DataTables(그리드) -->
				</div> <!-- <div class="row g-1"> -->
			</div> <!-- <div class="card"> -->
		</div> <!-- 공시송달 이력 <div class="col-xl-12 mx-1"> -->
	</div> <!-- <div class="d-flex flex-row justify-content-evenly"> -->
</div> <!-- <div class="content-wrapper"> -->

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

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Dataset = new Dataset({
		  prefix : "sndng"
		, prefixName : "발송 정보"
		, keymapper : info => info ? info.SNDNG_DTL_ID : ""
		, dataGetter : obj => obj.sndngDtlList
		, appendData : true
		, formats : {
			  SNDNG_YMD : dateFormat
			, DUDT_YMD : dateFormat
			, LEVY_SUM_AMT : numberFormat
			, DLVR_YMD : dateFormat
			, DLVR_TM : timeFormat
	    	, REG_DT : datetimeFormat
	    	, MDFCN_DT : datetimeFormat
		}
		, onDatasetChange : obj => {
			renderList${pageName}();
		}
 		, onCurrentChange : item => {
 			if (!item) return;

 			let key = item.data.SNDNG_DTL_ID;

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

 			// 가상계좌번호
 			let vrActno = "";

 			if (item.data.BANK_NM != null)    vrActno += item.data.BANK_NM    + " " + item.data.VR_ACTNO    + "\n";	// 가상 계좌번호
 			if (item.data.BANK_NM_2 != null)  vrActno += item.data.BANK_NM_2  + " " + item.data.VR_ACTNO_2  + "\n";	// 가상 계좌번호2
 			if (item.data.BANK_NM_3 != null)  vrActno += item.data.BANK_NM_3  + " " + item.data.VR_ACTNO_3  + "\n";	// 가상 계좌번호3
 			if (item.data.BANK_NM_4 != null)  vrActno += item.data.BANK_NM_4  + " " + item.data.VR_ACTNO_4  + "\n";	// 가상 계좌번호4
 			if (item.data.BANK_NM_5 != null)  vrActno += item.data.BANK_NM_5  + " " + item.data.VR_ACTNO_5  + "\n";	// 가상 계좌번호5
 			if (item.data.BANK_NM_6 != null)  vrActno += item.data.BANK_NM_6  + " " + item.data.VR_ACTNO_6  + "\n";	// 가상 계좌번호6
 			if (item.data.BANK_NM_7 != null)  vrActno += item.data.BANK_NM_7  + " " + item.data.VR_ACTNO_7  + "\n";	// 가상 계좌번호7
 			if (item.data.BANK_NM_8 != null)  vrActno += item.data.BANK_NM_8  + " " + item.data.VR_ACTNO_8  + "\n";	// 가상 계좌번호8
 			if (item.data.BANK_NM_9 != null)  vrActno += item.data.BANK_NM_9  + " " + item.data.VR_ACTNO_9  + "\n";	// 가상 계좌번호9
 			if (item.data.BANK_NM_10 != null) vrActno += item.data.BANK_NM_10 + " " + item.data.VR_ACTNO_10 + "\n";	// 가상 계좌번호10
 			if (item.data.BANK_NM_11 != null) vrActno += item.data.BANK_NM_11 + " " + item.data.VR_ACTNO_11;		// 가상 계좌번호11

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

 			// 전자납부번호
 			$("#epayno--${pageName}").val(item.data.EPAYNO);
 		}
	});

	// 공시송달 정보 Dataset
	var ${pageName}${pageDataName2}Dataset = new Dataset({
		  prefix : "svbtc"
		, prefixName : "공시송달 정보"
		, keymapper : info => info ? info.SVBTC_ID : ""
		, dataGetter : obj => obj.svbtcList
		, appendData : true
		, formats : {
			  SVBTC_YMD : dateFormat
			, REG_DT : datetimeFormat
		}
		, onDatasetChange : obj => {
			renderList${pageName}${pageDataName2}();
		}
 		, onCurrentChange : item => {
 			if (!item) return;

 			let key = item.data.SVBTC_ID;

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

	/**************************************************************************
	 *
	 **************************************************************************/
	// DataTables에 click, dbclick 이벤트
	renderList${pageName} = () => {
		let ${infoPrefix}List = ${pageName}Dataset;
		let empty = ${infoPrefix}List.empty;

		let trs = empty ?
			[document.getElementById("${infoPrefix}NotFound--${pageName}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
			${infoPrefix}List.inStrings(
				document.getElementById("${infoPrefix}Row--${pageName}").innerHTML, <%-- from template#${infoPrefix}Row --%>
				(str, dataItem) => str
					.replace(/{onclick}/gi, "${pageName}Dataset.setCurrent('" + dataItem.getValue("SNDNG_DTL_ID") + "');")
			);

		$("#tbody--${pageName}").html(trs.join());
	}

	// 공시송달 정보 DataTables에 click 이벤트
	renderList${pageName}${pageDataName2} = () => {
		let ${infoPrefix}List = ${pageName}${pageDataName2}Dataset;
		let empty = ${infoPrefix}List.empty;

		let trs = empty ?
			[document.getElementById("${infoPrefix}NotFound--${pageName}${pageDataName2}").innerHTML] : <%-- from template#${infoPrefix}NotFound --%>
			${infoPrefix}List.inStrings(
				document.getElementById("${infoPrefix}Row--${pageName}${pageDataName2}").innerHTML, <%-- from template#${infoPrefix}Row --%>
				(str, dataItem) => str
					.replace(/{onclick}/gi, "${pageName}${pageDataName2}Dataset.setCurrent('" + dataItem.getValue("SVBTC_ID") + "');")
			);

		$("#tbody--${pageName}${pageDataName2}").html(trs.join());
	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 검색조건 초기값 셋팅
	initForm${pageName} = () => {

	}

	// 이벤트 설정
	setEvent${pageName} = () => {

	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	// 개별 발송 등록
	fnBtnSndngCreate${pageName} = () => {
		alert("개별 발송 등록");
	}

	// 개별 발송 삭제
	fnBtnSndngRemove${pageName} = () => {
		alert("개별 발송 삭제");
	}

	// 개별 반송 등록
	fnBtnSndbkCreate${pageName} = () => {
		alert("개별 반송 등록");
	}

	// 개별 반송 수정
	fnBtnSndbkUpdate${pageName} = () => {
		alert("개별 반송 수정");
	}

	// 개별 반송 삭제
	fnBtnSndbkRemove${pageName} = () => {
		alert("개별 반송 삭제");
	}

	// 우편 종적 보기 참고 https://www.data.go.kr/dataset/15000390/openapi.do
	fnBtnPostTraceView${pageName} = () => {
		let rgNo = ${pageName}Dataset.getValue("RG_NO");

		alert("우편 종적 보기");
	}

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

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

		// Dataset 셋팅
		${pageName}Dataset.setData(${sndngDtlList});
		${pageName}${pageDataName2}Dataset.setData(${svbtcList});
	});

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