<%@ 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="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" />
		<input type="hidden" id="opnnId--${pageName}" name="opnnId" data-map="OPNN_ID" />

		<div class="row g-1">
			<!-- 차량번호 -->
			<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-30" id="vhrno--${pageName}" name="vhrno" data-map="VHRNO" readonly />
			</div>
			<!-- 단속일시 -->
			<div class="col-md-4">
				<label for="crdnYmd--${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="crdnYmd--${pageName}" name="crdnYmd" data-map="CRDN_YMD" readonly />
			</div>
			<!-- 납부자 명 -->
			<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-60" id="rtpyrNm--${pageName}" name="rtpyrNm" data-map="RTPYR_NM" readonly />
			</div>
			<!-- 접수 번호 -->
			<div class="col-md-4">
				<label for="rcptNo--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">접수 번호</label>
				<input type="text" class="form-control w-30" id="rcptNo--${pageName}" name="rcptNo" data-map="RCPT_NO" required />
			</div>
			<!-- 접수 일자 -->
			<div class="col-md-4">
				<label for="rcptYmd--${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="rcptYmd--${pageName}" name="rcptYmd" data-map="RCPT_YMD"
					data-fmt-type="day" title="날짜 선택" maxlength="10" required />
				<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
			</div>
			<!-- 접수 구분 -->
			<div class="col-md-4">
				<label for="rcptSeCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">접수 구분</label>
				<select class="form-select" id="rcptSeCd--${pageName}" name="rcptSeCd" data-map="RCPT_SE_CD" required>
					<option value="">선택하세요</option>
					<c:forEach items="${FIM029List}" var="item">
						<option value="${item.code}">${item.value}</option>
					</c:forEach>
				</select>
			</div>
			<!-- 진술자 이름 -->
			<div class="col-md-4">
				<label for="sttrNm--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">성명</label>
				<input type="text" class="form-control w-40" id="sttrNm--${pageName}" name="sttrNm" data-map="STTR_NM" required />
				<button type="button" class="btn btn-sm btn-outline-dark" id="btnPayer--${pageName}" title="납부자 정보 적용" onclick="fnBtnPayer${pageName}();">
					납부자
				</button>
			</div>
			<!-- 진술자 생년월일 -->
			<div class="col-md-4">
				<label for="sttrBrdt--${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="sttrBrdt--${pageName}" name="sttrBrdt" data-map="STTR_BRDT" placeholder="YY-MM-DD" />
			</div>
			<!-- 소유주 관계 구분 코드 -->
			<div class="col-md-4">
				<label for="ownrRelCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">소유주 관계 구분</label>
				<select class="form-select" id="ownrRelCd--${pageName}" name="ownrRelCd" data-map="OWNR_REL_CD">
					<option value="">선택하세요</option>
					<c:forEach items="${FIM032List}" var="item">
						<option value="${item.code}">${item.value}</option>
					</c:forEach>
				</select>
			</div>
			<!-- 진술자 주소 --><!-- 진술자 우편번호 -->
			<div class="col-md-12">
				<label for="sttrAddr--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">주소</label>
				<input type="text" class="form-control w-75" id="sttrAddr--${pageName}" name="sttrAddr" data-map="STTR_ADDR" />
				<input type="text" class="form-control w-px-75" id="sttrZip--${pageName}" name="sttrZip" data-map="STTR_ZIP" />
				<button type="button" class="btn btn-sm btn-outline-dark" id="btnZip--${pageName}" title="우편번호 검색" onclick="fnBtnZip${pageName}();">
					검색
				</button>
			</div>
			<!-- 진술자 상세주소 -->
			<div class="col-md-12">
				<label for="sttrDaddr--${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="sttrDaddr--${pageName}" name="sttrDaddr" data-map="STTR_DADDR" />
			</div>
			<!-- 진술자 연락처 -->
			<div class="col-md-4">
				<label for="sttrCttpc--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">연락처</label>
				<input type="text" class="form-control w-35" id="sttrCttpc--${pageName}" name="sttrCttpc" data-map="STTR_CTTPC" />
			</div>
			<!-- 진술자 이메일 -->
			<div class="col-md-8">
				<label for="sttrEml--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">이메일</label>
				<input type="text" class="form-control w-35" id="sttrEml--${pageName}" name="sttrEml" data-map="STTR_EML" />
			</div>
			<!-- 의견 제출 내용 -->
			<div class="col-md-12">
				<label for="opnnSbmsnCn--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">의견제출 내용</label>
				<textarea type="text" class="form-control w-87" id="opnnSbmsnCn--${pageName}" name="opnnSbmsnCn" data-map="OPNN_SBMSN_CN" rows="5" data-maxlengthb="4000">
				</textarea>
			</div>
			<!-- 의견 제출 구분 코드 -->
			<div class="col-md-4">
				<label for="opnnSbmsnSeCd--${pageName}" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end required">의견제출 구분</label>
				<select class="form-select" id="opnnSbmsnSeCd--${pageName}" name="opnnSbmsnSeCd" data-map="OPNN_SBMSN_SE_CD" required>
					<option value="">선택하세요</option>
					<c:forEach items="${FIM033List}" var="item">
						<option value="${item.code}">${item.value}</option>
					</c:forEach>
				</select>
			</div>
			<!-- 의견 제출 요지 -->
			<div class="col-md-8">
				<label for="opnnSbmsnGist--${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="opnnSbmsnGist--${pageName}" name="opnnSbmsnGist" data-map="OPNN_SBMSN_GIST" data-maxlengthb="300" />
			</div>
			<!-- 담당자 검토 의견 -->
			<div class="col-md-12">
				<label for="picRvwOpnn--${pageName}" class="w-px-120  bg-lighter pe-2 col-form-label text-sm-end">검토 의견</label>
				<textarea class="form-control w-87" id="picRvwOpnn--${pageName}" name="picRvwOpnn" data-map="PIC_RVW_OPNN" rows="3" data-maxlengthb="1000">
				</textarea>
			</div>
		</div>
	</form>
	<!-- /입력 영역 -->

	<!-- 첨부 파일 -->
	<div class="card">
		<form id="frmFile--${pageName}" method="post" enctype="multipart/form-data" >
			<input type="file" id="uploadFiles--${pageName}" name="uploadFiles" multiple="multiple" onchange="fnAddFiles(this);" hidden />
		</form>
		<div class="row g-1">
			<div class="col-md-12">
				<button type="button" class="btn btn-blue" id="btnAddFile--${pageName}" title="첨부파일 추가">파일 추가</button>
			</div>
		</div>
		<!-- 첨부 파일 테이블 -->
		<div class="table-responsive">
			<table class="table table-bordered table-hover table-striped" id="fileList--${pageName}">
				<thead>
					<th class="text-center" style="width: 24px">NO.</th>
					<th class="text-center" style="width: 200px">파일 번호</th>
					<th class="text-center">파일 이름</th>
					<th class="text-center" style="width: 200px">파일 크기</th>
					<th class="text-center" style="width: 120px">다운로드</th>
					<th class="text-center" style="width: 120px">삭제</th>
				</thead>
				<tbody></tbody>
			</table>
		</div> <!-- 첨부 파일 테이블 <div class="table-responsive"> -->
	</div> <!-- 첨부 파일 <div class="card"> -->
</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>
<!-- / 업무 버튼 표시 -->

<script>
	/**************************************************************************
	 * Global Variable
	 **************************************************************************/
	// URL
	var ${pageName}PrefixUrl = "/excl/excl02";
	// FormFields
 	var ${pageName}Fields = new FormFields("#frmEdit--${pageName}");
 	// 파일 리스트
 	var $fileListArr = new Array();

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	var ${pageName}Control = new DatasetControl({
		  prefix : "opnn"
		, prefixName : "의견제출"
		, keymapper : info => info ? info.OPNN_ID : ""
		, dataGetter : obj => obj.opnnSbmsnInfo
		, urls : {
			  create : wctx.url(${pageName}PrefixUrl + "/020/create.do")		// 등록
			, update : wctx.url(${pageName}PrefixUrl + "/020/update.do")		// 수정
		}
		, formats : {
			  CRDN_YMD : dateFormat
			, RCPT_YMD : dateFormat
		}
	});

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

		// 첨부파일 조회
		fnSearchFileList${pageName}(item.data.OPNN_ID);
	}

	/**************************************************************************
	 * 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) {
			// 폼을 리셋해서 uploadFiles에 출력된 선택 파일을 초기화시킨다.
			document.getElementById("frmFile--${pageName}").reset();

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

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

  		let formData = new FormData();
  		let create = isEmpty(info.opnnId);

  		// 첨부파일 배열에 있는 내용을 등록
  		for (let iLoop = 0; iLoop < $fileListArr.length; iLoop++) {
			formData.append("uploadFiles" , $fileListArr[iLoop]);
		}

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

		    formData.append(key, value);
		}

		ajax.post({
			  url : !create ? ${pageName}Control.urls.update : ${pageName}Control.urls.create
			, data : formData
			, contentType : false
			, processData : false
			, success : resp => ${pageName}Control.onSave(resp)
		});
	}

	/**************************************************************************
	 * 초기 셋팅
	 **************************************************************************/
	// 검색조건 초기값 셋팅
	function initForm${pageName}() {
		// 달력 초기화
	    initDatepicker("frmEdit--${pageName}");
	    $("#rcptYmd--${pageName}").datepicker("setDate", new Date());
	}

	// 이벤트 설정
	function 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);
				}
			});
		});

		$("#btnAddFile--${pageName}").on('click', () => { $("#uploadFiles--${pageName}").trigger("click"); });
	}

	/**************************************************************************
	 * function
	 **************************************************************************/
	// 납부자 정보
	function fnBtnPayer${pageName}() {
		// 수정이라면 동작하지 않게 한다.
		if (${pageName}Control.getValue("OPNN_ID") != "") {
			return;
		}

		$("select[name='ownrRelCd'] option:contains('본인')").attr("selected", "selected");
		$("#sttrNm--${pageName}").val(${pageName}Control.getValue("RTPYR_NM"));
		$("#sttrBrdt--${pageName}").val(${pageName}Control.getValue("RTPYR_BRDT"));
		$("#sttrAddr--${pageName}").val(${pageName}Control.getValue("ADDR"));
		$("#sttrZip--${pageName}").val(${pageName}Control.getValue("ZIP"));
		$("#sttrDaddr--${pageName}").val(${pageName}Control.getValue("DTL_ADDR"));

		if (${pageName}Control.getValue("RTPYR_MBL_TELNO") != "")
			$("#sttrCttpc--${pageName}").val(${pageName}Control.getValue("RTPYR_MBL_TELNO"));
		else
			$("#sttrCttpc--${pageName}").val(${pageName}Control.getValue("RTPYR_TELNO"));

		$("#sttrEml--${pageName}").val(${pageName}Control.getValue("RTPYR_EML"));
	}

	// 우편번호 검색
	function fnBtnZip${pageName}() {

	}

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

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

	// 첨부파일 조회
	function fnSearchFileList${pageName}(opnnId) {
		// 의견제출 등록일 경우에는 첨부파일을 조회하지 안는다..
		if (opnnId == null || opnnId == "") {
			return;
		}

	    // 첨부파일 리스트
	    ajax.get({
			  url : "file/list.do"
			, data : {
				  infoType : "110"
				, infoKeys : opnnId
				, fetchSize : 0
			}
			, success : resp => {
				let fileNo = 0;
				let fileList = resp.fileList;

				fileList.forEach(function (item, index, array) {
					fileNo = index + 1;

					let innerHtml = "";

					innerHtml += "<tr>";
					innerHtml += "<td class='text-center'>" + fileNo + "</td>";
					innerHtml += "<td class='text-center'>" + item.FILE_ID + "</td>";
					innerHtml += "<td class='text-center'>" + item.FILE_NM + "</td>";
					innerHtml += "<td class='text-center'>" + item.FILE_SIZE + " byte</td>";
					innerHtml += "<td class='text-center'>" + "<button type='button' class='btn' onclick='fnFileDownload${pageName}(" + item.FILE_ID + ");'><i class='bx bx-download me-1'></i></button>" + "</td>";
					innerHtml += "<td class='text-center'>" + "<button type='button' class='btn' onclick='fnFileRemove${pageName}(this);'><i class='bx bx-trash me-1'></i></button>" + "</td>";
					innerHtml += "</tr>";

					$("#fileList--${pageName} > tbody:last").append(innerHtml);
				});
			}
		});
	}

	// 첨부파일 등록
	function fnAddFiles(obj) {
		let fileNo = $("#fileList--${pageName} > tbody tr").length;				// table의 tr 개수

		let maxFileCnt = 3;   													// 첨부파일 최대 개수
		let attFileCnt = obj.files.length;										// 선택한 파일 개수 + 기존 파일 개수
		let fileArr = new Array();												// 파일 배열

		fileArr = $fileListArr;

	    // 등록할 파일 개수 확인
		if (attFileCnt + fileNo > maxFileCnt) {
			dialog.alert({
				content : "첨부파일은 최대 " + maxFileCnt + "개 까지 첨부 가능합니다."
			});

			return;
		}

	    // 첨부파일을 table에 추가.
		for (let iLoop = 0; iLoop < attFileCnt; iLoop++) {
			let selectedFile = obj.files[iLoop];
			let innerHtml = "";

			fileNo += 1;

			innerHtml += "<tr>";
			innerHtml += "<td class='text-center'>" + fileNo + "</td>";
			innerHtml += "<td class='text-center'>" + "</td>";
			innerHtml += "<td class='text-center'>" + selectedFile.name + "</td>";
			innerHtml += "<td class='text-center'>" + selectedFile.size + " byte</td>";
			innerHtml += "<td class='text-center'>" + "</td>";
			innerHtml += "<td class='text-center'>" + "<button type='button' class='btn' onclick='fnFileRemove${pageName}(this);'><i class='bx bx-trash me-1'></i></button>" + "</td>";
			innerHtml += "</tr>";

			$("#fileList--${pageName} > tbody:last").append(innerHtml);

			fileArr.push(obj.files[iLoop]);
		}
	}

	// 파일 삭제
	function fnFileRemove${pageName}(obj) {
		let tr = $(obj).parent().parent();										// 클릭한 버튼이 속한 tr 요소
		let td = tr.children();

		let fileNo = td.eq(0).text();											// 삭제할 파일 번호
		let fileId = td.eq(1).text();

		if (fileId != null && fileId != "") {
			ajax.post({
				  url : "file/remove.do"
				, data : { fileIDs : fileId }
				, success : resp => {
					// 성공
				}
			});
		} else {
			// 배열에서 삭제한다. 배열은 0부터 시작하기 때문에 -1 해준다.
			$fileListArr.splice(fileNo - 1);
		}

		$(obj).closest("tr").remove();											// table 에서 제거
	}

	// 첨부파일 삭제 버튼 클릭
	function fnFileRemove${pageName}(obj) {
		dialog.alert({
			  content : "선택한 파일을 삭제하시겠습니까?"
			, onOK : () => {
				fnFileRemove${pageName}(obj);
			}
		});
	}

	// 첨부파일 다운로드
	function fnFileDownload${pageName}(fileID) {
		top.location.href = "/file/download.do?fileID=" + fileID;
	}

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

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

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

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