<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<div class="d-flex flex-column" data-doctx="${pageName}-cctv">
	<div class="d-flex justify-content-evenly">
		<div class="card w-95" style="padding: .8rem;">
			<form name="frmFirst" class="d-flex flex-row justify-content-end">
				<div>
					<label is="name-label" for="doExempt" style="margin-right: .5rem;">
						<input type="checkbox" name="doExempt" checked class="form-check-input" />면제차량 부과제외
					</label>
					<button type="button" name="btnInsertCrdn" class="btn btn-primary my-2 enableon-found" style="margin-left: .5rem;">단속등록</button>
				</div>
			</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>
				<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="dir-list" class="table-responsive h-px-550">
							<table name="dirList" 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="{data-index}">
		                    			<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 class="card my-4 px-4 h-px-600 w-px-700">
			<form>
				<div>
					<span class="container-page-btn">
						<div class="d-flex flex-row justify-content-between">
							<span is="paging-info" name="filePagingInfo" class="dataTables_info"></span>
						</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="file-list" 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="{data-index}">
		                    			<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>
</div>
<c:set var="scriptCctv" scope="request">
pageName = "${pageName}-cctv";
var $C = pageObject[pageName] = newDoctxFinder(pageName);
dirSet.onDatasetChange = () => {
	var t = $C.getGridTemplate("dir-list");
	var trs = Apply.fromDataset.getTbody(dirSet, t.found, t.notFound, t.replacer);
	$C.renderDirList("dir-list", dirSet.length, dirSet.length, trs);
};
dirSet.onCurrentChange = (dataItem) => {
	let dir = dataItem ? dataItem.data : null,
		empty = !dir || Object.keys(dir).length < 1;
	
	$C.getFiles(!empty ? dir.name : null);
	if (empty) return;

	var dataIndex = dataItem.index;
	$C.$findn("dir-list").find("tbody").setCurrentRow(dataIndex);
	
};
fileSet.onDatasetChange = () => {
	var t = $C.getGridTemplate("file-list"),
		trs = Apply.fromDataset.getTbody(fileSet, t.found, t.notFound, t.replacer),
		length = fileSet.length;
	$C.renderDirList("file-list", length, length, trs);
	$C.findn("btnInsertCrdn").disabled = length < 1;
	$C.findn("filePagingInfo").innerHTML = "찾은 파일: " + length;
};
fileSet.onCurrentChange = (dataItem) => {
	let dir = dataItem ? dataItem.data : null;
	if (!dir || Object.keys(dir).length < 1) return;

	var dataIndex = dataItem.index;
	$C.$findn("file-list").find("tbody").setCurrentRow(dataIndex);
};

$C.getFiles = dir => {
	if (dir)
		ajax.get({
			url: wctx.url("/crdn/crdn05/020/files.do"),
			data: {dir: dir},
			success: resp => fileSet.setData(resp.fileList, {pagination: {}})
		});
	else
		fileSet.setData([]);
};

$C.createCrdn = () => {
	let current = dirSet.getCurrent("item"),
		dir = current.data.name;
	dialog.alert({
		content: current.getValue("name") + " 디렉토리의 파일로 단속을 등록하시겠습니까?",
		onOK: () => {
			ajax.post({
				url : wctx.url("/crdn/crdn05/020/upload.do"),
				data : {
					taskSeCd: "${taskSeCd}",
					doExempt: $C.findn('doExempt').checked,
					dirs: dir
				},
				success : (resp) => {
					let content = "<ul>" + [
						"업로드 파일수: " + resp.received,
						"분류 건수: " + resp.divided,
						"정상: " + resp.normal,
						"메타파일 누락: " + resp.malformed,
						"",
						"등록 단속건수: " + resp.success,
						"중복 단속건수: " + resp.duplicates
					]
					.map(str => "<li>" + str + "</li>")
					.join("") + "</ul>";
					dialog.alert({
						content: content,
						onOK: () => {},
						onClose: () => $C.getFiles(dir)
					});
					
					return;
					if (resp.saved) {
						$C.getFiles(dir);
			        	if(resp.alertMessage)
			        		dialog.alert(resp.alertMessage);
			        	else
			        		dialog.alert("등록이 완료됐습니다.");
					} else {
						dialog.alert(resp.failReason);
					}
				}
			});
		}
	});
}

$C.getGridTemplate = (name) => {
	var notFound = [$C.$findn(name).find("template.notFound")[0].innerHTML];
	var found = $C.$findn(name).find("template.found")[0].innerHTML;
	var replacer = (str, dataItem) => str
		.replace(/{onclick}/gi, "pageObject['" + pageName + "'].clickDirList('{data-index}');");

	return {
		found : found,
		notFound : notFound,
		replacer : replacer
	};
}
$C.clickDirList = (dataIndex) => {
	if (!dataIndex) return;

	dirSet.setCurrent(dataIndex);
};
$C.renderDirList = (name, total, listLength, trs) => {
	$C.$findn(name).find("tbody").html(trs);
	let empty = listLength < 1;
	if (!empty)
		FimsSupport.fnDownsizeCheck($C.$findn(name).find("table")[0]);
}

$C.$findn("btnInsertCrdn").on("click", function(){
	$C.createCrdn();
});

dirSet.setData(${dirList});
</c:set>