<%@ 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="pageKorName" scope="request">단속 파일 등록</c:set>
<div class="d-flex flex-column" data-doctx="${pageName}">
	<div class="d-flex flex-row justify-content-evenly">
		<div class="card h-px-80 w-px-1400 d-flex justify-content-center" style="padding: .8rem;">
			<form name="frmFirst" method="post" enctype="multipart/form-data">
			<input type="file" is="id-input" name="uploadFiles" multiple="multiple" class="form-control"/>
			<label is="name-label" for="doExempt" style="margin-left: .5rem;">
				<input type="checkbox" name="doExempt" checked class="form-check-input" />
				면제차량 부과제외
			</label>
			</form>
		</div>
	</div>
	<div class="d-flex flex-row justify-content-evenly">
		<div class="card my-4 px-4 h-px-600 w-px-700">
			<form name="frmGrid">
				<div>
					<span class="container-page-btn">
						<div class="d-flex flex-row justify-content-between">
							<span is="paging-info" name="parsedInfoPagingInfo" class="dataTables_info"></span>
			                <ul name="parsedInfoPaging" class="pagination pagination-primary"></ul>
						</div>
						<span class="container-window-btn-right">
						</span>
				     </span>
				</div>
				<div class="card-datatable text-nowrap">
			        <div class="dataTables_wrapper dt-bootstrap5 no-footer">
						<div name="table-responsive" class="table-responsive h-px-550">
							<table name="table" class="datatables-ajax table table-bordered dataTable no-footer">
								<thead class="sticky-thead">
									<tr><th style="width: 3rem;">NO.</th>
										<th href="#">파일이름</th>
									</tr>
			                    </thead>
			                    <tbody></tbody>
								<template is="curly-brackets" class="found">
		                    		<tr data-index="{id}">
		                    			<td onclick class="text-center">data-no</td>
		                    			<td onclick title="{name}" class="text-start text-truncate max-w-th">name</td>
			                    	</tr>
		                    	</template>
		                    	<template class="notFound"><tr><td valign="top" colspan="2" class="dataTables_empty text-center">등록할 파일을 추가하십시오.</td></tr></template>
							</table>
						</div>
					</div>
			    </div>
			</form>
		</div>
		<div name="imageArea" class="card my-4 px-4 w-px-600 h-px-600 justify-content-center">
		</div>

		<div class="card my-4 px-2 w-px-120 h-px-600">
			<div class="d-flex my-2 flex-column">
				<button type="button" name="btnInsertCrdn" class="btn btn-primary my-2">단속등록</button>
				<button type="button" name="btnDelete" class="btn btn-primary my-2">삭제</button>
			</div>
		</div>
	</div>

	<form name="frmMultipart" method="post" enctype="multipart/form-data"></form>
</div>


<script>
LoadScript("crdn05020Script",wctx.url("/resources/js/fims/crdn/crdn05020.js?ver=${ver}"));

pageObject["${pageName}"] = newDoctxFinder("${pageName}");

var uploadSet = uploadSupport("input[name='uploadFiles']");

$(document).ready(function(){

	var $P = pageObject["${pageName}"];
	uploadSet.onDatasetChange = uploadSet.onRemove = obj => {
		var t = $P.getGridTemplate();
		var trs = Apply.fromDataset.getTbody(uploadSet, t.found, t.notFound, t.replacer);
		$P.renderParsedInfoList(uploadSet.length, uploadSet.length, trs);
	};
	uploadSet.onCurrentChange = (dataItem) => {
		$P.$findn("imageArea").html("");
		let file = dataItem ? dataItem.data : null;
		if (!file || Object.keys(file).length < 1) return;

		var dataIndex = file.id;
		$P.$findn("table-responsive").find("tbody").setCurrentRow(dataIndex);

		if(dataItem.data.FILE_GROUP_TYPE == "BIN"){
			var srcArr = [];

			for(var i=1; i <= dataItem.data.PHOTO_CNT; i++){
				srcArr.push("data:image/jpg;base64," + dataItem.data["B64IMAGE"+i])
			}

			$P.renderImage(srcArr);
		} else {
			var dataKey = file.name;
			if(!dataKey.endsWith(".txt") && !dataKey.endsWith(".TXT")){
				var src = file.url;
				$P.renderImage(src);
			}
		}
	};

	$P.tempGroup = {};

	/**************************************************************************
	* DatasetControl, DatasetSupport, FormFields
	**************************************************************************/
	var ctrl = newCrdn05020Control($P);

	/**************************************************************************
	* pageObject.function
	**************************************************************************/

	$P.getGridTemplate = () => {
		var notFound = [$P.$findn("table-responsive").find("template.notFound")[0].innerHTML];
		var found = $P.$findn("table-responsive").find("template.found")[0].innerHTML;
		var replacer = (str, dataItem) => str
			.replace(/{onclick}/gi, "pageObject['${pageName}'].clickParsedInfoList('{id}');");

		return {
			found : found,
			notFound : notFound,
			replacer : replacer
		};
	}

	//테이블 렌더링
	$P.renderParsedInfoList = (total, listLength, trs) => {
		$P.$findn("table-responsive").find("tbody").html(trs);
		if(listLength != 0)
			FimsSupport.fnDownsizeCheck($P.$findn("table-responsive").find("table")[0]);
	}

	//사진 표시
	$P.renderImage = (src) => {
		if(Array.isArray(src)){
			var div = document.createElement("div");
			div.style["margin-top"] = "20px";
			div.style["margin-bottom"] = "20px";
			div.style["overflow-y"] = "scroll";
			for(var i=0; i < src.length; i++){
				var span = document.createElement("span");
				span.style["max-width"] = "260px";
				span.style["max-height"] = "260px";
				var img = document.createElement("img");
				img.style["object-fit"] = "contain";
				img.style["max-width"] = "inherit";
				img.style["max-height"] = "inherit";
				img.src = src[i];
				span.appendChild(img);
				div.appendChild(span);
			}
			$P.$findn("imageArea").append(div);
		} else {
			var img = document.createElement("img");
			img.style["object-fit"] = "contain";
			img.src = src;
			$P.$findn("imageArea").append(img);
		}

	}

	$P.clickParsedInfoList = (dataIndex) => {
		if (!dataIndex) return;

		uploadSet.setCurrent(dataIndex);
	};

	$P.createCrdn = () => 
		upload({
			url : wctx.url("/crdn/crdn05/020/upload.do"),
			data : {
				taskSeCd: "${taskSeCd}",
				doExempt: document.querySelector('div[data-doctx="crdn05020"] input[name="doExempt"]').checked,
				uploadFiles: uploadSet.getDataset()
			},
			success : (resp) => {
				if (resp.saved) {
					uploadSet.setData([]);
		        	if(resp.alertMessage)
		        		dialog.alert(resp.alertMessage);
		        	else
		        		dialog.alert("등록이 완료됐습니다.");
				} else {
					dialog.alert(resp.failReason);
				}
			}
		});

	$P.deleteFile = () => {
		var current = uploadSet.getCurrent();
		if (!current) return;
		
		uploadSet.erase(current.id);
	}

	$P.removeCallback = (removedFileNameArr) => {
		let removedDataIndexArr = [];
		for(var i = 0; i < removedFileNameArr.length; i++){
			let dii = ctrl.dataset.getDataset("item").filter(item=>item.data.FILE_NAME == removedFileNameArr[i])[0].index;
			removedDataIndexArr.push(dii);
		}

		ctrl.dataset.remove(removedDataIndexArr);
		$P.removeTableRow(removedDataIndexArr);
	}

	$P.removeTableRow = (removedDataIndexArr) => {

		var fileListTable = $P.$findn("table-responsive").find("table")[0];

		for(var i = 0; i < removedDataIndexArr.length; i++){
			var target = removedDataIndexArr[i];
			var tr = $(fileListTable).find("tbody").find("tr[data-index='"+target+"']");
			var trIndex = $(fileListTable).find("tbody tr").index(tr);
			fileListTable.deleteRow(trIndex+1);
		}

	}

	/**************************************************************************
	* element.on
	**************************************************************************/
	$P.$findn("btnInsertCrdn").on("click", function(){
		$P.createCrdn();
	});

	$P.$findn("btnDelete").on("click", function(){ $P.deleteFile(); });

	$P.$findn("direct").on("click", function(){
		if($(this).is(":checked")){
			$("#uploadFilesArea").removeAttr("hidden");
		} else {
			$("#uploadFilesArea").attr("hidden","hidden");
			$P.$findn("uploadFiles").val("");
		}
	});

	uploadSet.setData([]);
});
//# sourceURL=crdn05020-info.jsp
</script>