<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<!-- inner page html -->
<div class="content-wrapper">
	<div class="container-xxl flex-grow-1 px-0">
		<c:set var="pageKorName" scope="request">과태료 감경 자료</c:set>
		<div class="card">
			<div class="wrapper-list">
				<div>
				    <div class="container-page-btn">
				        <button type="button" id="btnReset--${pageName}" class="btn btn-outline-dark" title="초기화">초기화</button>
				        <span class="container-window-btn-right">
				            <button type="button" id="btnSearch--${pageName}" class="btn btn-search" title="검색">검색</button>
				        </span>
				    </div>

				    <form id="frmSearch--${pageName}" name="frmSearch">
				        <div class="container-search">
		                    <div class="row g-1">
		                        <div class="col-6">
		                            <label class="form-label fw-bold form-search-title">업무구분</label>
		                            <span class="form-search-linebox">
										<c:forEach items="${FIM054List}" var="item">
											<label>
												<input name="taskSeCd" type="radio" value="${item.code}"
												class="form-check-input" alt="업무구분"
												onchange="pageObject['${pageName}'].fnResetAndChangeBiz(this.value);">
												${item.value}
											</label>
										</c:forEach>
		                            </span>
		                        </div>
		                        <!-- 감경 일자 -->
		                        <div class="col-6">
		                        	<label class="form-label fw-bold form-search-title">감경일자</label>
		                        	<span class="form-search-linebox">
		                                <input type="text" id="schRductYmdFrom--${pageName}" name="schRductYmdFrom" class="form-control form-date"
		                                	data-fmt-type="day"   title="시작 날짜 선택" />
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                                ~
		                                <input type="text" id="schRductYmdTo--${pageName}" name="schRductYmdTo" class="form-control form-date"
		                                	data-fmt-type="day" title="종료 날짜 선택">
		                                <button type="button" class="bx bx-sm bx-calendar bg-white"></button>
		                            </span>
		                        </div>
								<!-- 단속 일자 -->
								<div class="col-6">
									<label class="form-label fw-bold form-search-title">단속일자</label>
									<span class="form-search-linebox">
										<input type="text" class="form-control form-date" id="schCrdnYmdFrom--${pageName}" name="schCrdnYmdFrom"
											data-fmt-type="day" title="시작 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
										~
										<input type="text" class="form-control form-date" id="schCrdnYmdTo--${pageName}" name="schCrdnYmdTo"
											data-fmt-type="day" title="종료 날짜 선택" />
										<button type="button" class="bx bx-sm bx-calendar bg-white"></button>
									</span>
								</div>
								<!-- 차량번호 -->
								<div class="col-6">
									<label class="form-label fw-bold form-search-title">차량번호</label>
									<input type="text" class="form-control w-px-150" id="schVhrno--${pageName}" name="schVhrno" />
								</div>
		                        <div class="col-12">
		                        	<input type="hidden" id="by--${pageName}" name="by" />
									<input type="text" id="byOutput--${pageName}" class="form-control" readonly value="동적 검색" />
									<input type="hidden" id="mainOption--${pageName}" name="mainOption" />
									<input type="hidden" id="subOption--${pageName}" name="subOption" />
									<input type="text" id="term--${pageName}" name="term" class="form-control w-px-300" />
		                        </div>
		                    </div>
				        </div>
				    </form>
				    <div>
				        <span class="container-page-btn">
				        	<div class="d-flex flex-row justify-content-between">
								<label id="rductPaging--${pageName}PagingInfo" class="dataTables_info"
								role="status" aria-live="polite"></label>
				                <ul id="rductPaging--${pageName}" class="pagination pagination-primary">
				                </ul>
							</div>
				            <span class="container-window-btn-right">

				            </span>
				        </span>
				    </div>
				    <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:550px;overflow-y: scroll;">
								<table id="DataTables_Table_0--${pageName}"
									class="datatables-ajax table table-bordered dataTable no-footer">
									<thead>
										<tr id="rductTheadTr--${pageName}"
											data-by="by--${pageName}" data-by-output="byOutput--${pageName}"
											data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
											<th style="min-width: 80px;">No.</th>
											<th onclick="searchFromGridTitle('RDUCT_YMD',this.innerText,'ymd','');"	style="min-width: 80px;">감액일자</th>
											<th onclick="searchFromGridTitle('RDUCT_RSN_CD',this.innerText,'codeValue','FIM019');" style="min-width: 80px;">감액사유</th>
											<th onclick="searchFromGridTitle('CRDN_YMD','접수(위반)일자','ymd','');" style="min-width: 80px;">접수(위반)일시</th>
											<th onclick="searchFromGridTitle('VHRNO',this.innerText,'match','part');" style="min-width: 80px;">차량번호</th>
											<th onclick="searchFromGridTitle('FFNLG_CRDN_AMT',this.innerText,'match','perfect');">과태료단속원금</th>
											<th onclick="searchFromGridTitle('RDUCT_AMT',this.innerText,'match','perfect');">감경금액</th>
											<th onclick="searchFromGridTitle('FFNLG_AMT',this.innerText,'match','perfect');">과태료금액</th>
											<th class="text-orange" style="min-width: 80px;">미납금액</th>
											<th onclick="searchFromGridTitle('ETC_CN',this.innerText,'match','part');" style="min-width: 80px;">감경특기사항</th>
											<th onclick="searchFromGridTitle('CRDN_STTS_CD',this.innerText,'codeValue','FIM010');" style="min-width: 80px;">처리상태</th>
										</tr>
				                    </thead>
				                    <tbody id="rductTbody--${pageName}"></tbody>
									<template id="rductRow--${pageName}">
			                    		<tr data-key="{CRDN_ID}">
			                    			<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{ROW_NUM}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{RDUCT_YMD}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{RDUCT_RSN_NM}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_YMD_TM}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{VHRNO}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{FFNLG_CRDN_AMT}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{RDUCT_AMT}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{FFNLG_AMT}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-end">{SUM_AMT}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-start">{ETC_CN}</td>
				                    		<td onclick="{onclick}" ondblclick="{ondblclick}" class="text-center">{CRDN_STTS_CD}</td>
				                    	</tr>
			                    	</template>
			                    	<template id="rductNotFound--${pageName}">
			                    		<tr>
			                    			<td valign="top" colspan="11" class="dataTables_empty text-center">과태료 감경 정보를 찾지 못했습니다.</td>
			                    		</tr>
			                    	</template>
								</table>
							</div>
						</div>
				    </div>
				</div>
			</div>
		</div>

	</div>

	<jsp:include page="/WEB-INF/jsp/include/bottom.jsp" />

  	<div class="content-backdrop fade"></div>
</div>


<script>

/**************************************************************************
 * Global Variable
 **************************************************************************/
var FIM010 = new CommonCodes(${FIM010});
var FIM019 = new CommonCodes(${FIM019});
pageObject["${pageName}"] = {};


$(document).ready(function(){

	var $P = pageObject["${pageName}"];

	/**************************************************************************
	 * DatasetControl
	 **************************************************************************/
	$P.rductControl = new DatasetControl({
	    urls : { load : "", getInfo : "" },
	    dataGetter : obj => obj["List"], appendData:true,
	    keymapper : info => info ? info.CRDN_ID : "",
	    formats: {
	    	RDUCT_RSN_CD 	: FIM019,
	    	RDUCT_YMD 		: dateFormat,
	    	CRDN_YMD_TM 	: datetimeFormat,
	    	FFNLG_CRDN_AMT  : numberFormat,
	    	RDUCT_AMT 		: numberFormat,
	    	FFNLG_AMT 		: numberFormat,
	    	CRDN_STTS_CD 	: FIM010,
	    	SUM_AMT			: numberFormat
		}
	});
	$P.rductControl.defaultFetchSize = FETCH_XS;
	$P.rductControl.untilPageNum = 0;
	$P.rductControl.beforeCurrent = null;
	$P.rductControl.tableRenderComplete = false;

	/**************************************************************************
	 * DatasetControl.on
	 **************************************************************************/
	$P.rductControl.onDatasetChange = (obj) => {

	    $P.renderRductList(obj["Total"]);

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

		$P.rductControl.tableRenderComplete = true;
	};

	$P.rductControl.onCurrentChange = (item) => {

		if(!$P.rductControl.tableRenderComplete){
			return;
		}

		$P.rductControl.tableRenderComplete = false;
		if(!item){
			$P.clickRductList("", true);
		} else {
			$P.clickRductList($P.rductControl.getCurrent()["CRDN_ID"], true);
		}
	}

	/**************************************************************************
	 * pageObject.function
	 **************************************************************************/
	$P.fnReset = () => {
		$('#schRductYmdFrom--${pageName}').datepicker('setDate', DateUtil.getDateDay(-5475).date);
	    $('#schRductYmdTo--${pageName}').datepicker('setDate', new Date());
		$P.rductControl.setData([]);
	}

	$P.fnResetAndChangeBiz = taskSeCd => {
		$P.fnReset();
		$P.rductControl.urls.load = wctx.url("/"+taskSeCd+"/levy/levy02/010/list.do");
		$P.rductControl.urls.getInfo = wctx.url("/"+taskSeCd+"/sprt/sprt02/010/main.do");
	}

	$P.refreshRductList = () => {
		$P.rductControl.untilPageNum = $P.rductControl.query.pageNum;
	    $P.rductControl.query.fetchSize = $P.rductControl.defaultFetchSize * $P.rductControl.query.pageNum;
	    $P.rductControl.load(1);
	}

	$P.searchRductList = () => {
		$P.rductControl.query = $P.getParams();
	    $P.rductControl.load(1);
	}

	$P.scrollEnd = (obj) => {
		if(obj.dataset.scrollStatus){
			return;
		}

		var el = $(obj);
    	if(el.scrollTop() == 0){
    		return;
    	}

    	if((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()){
    		obj.dataset.scrollStatus = "waiting";
    		$P.scrollRductList();
    	}
	}

	$P.scrollRductList = () => {
		$P.rductControl.load($P.rductControl.query.pageNum + 1);
	}

	$P.clickRductList = (dataKey, auto) => {
		if(dataKey == ""){
			return;
		}

		$("#rductTbody--${pageName}").setCurrentRow(dataKey);

		if(!auto){
			$P.rductControl.setCurrent(dataKey);
		}
	}

	$P.dblclickRductList = (dataKey) => {
		let params = {
			  callControlName : "pageObject['${pageName}'].rductControl"
			, crdnId : dataKey
		}

		ajax.get({
			url : $P.rductControl.urls.getInfo,
			data : params,
			success : resp => {
				dialog.open({
					id : "totalInfoMainDialog",
					title : "개별총정보",
					size : "xxl",
					content : resp,
					init : () => {}
				});
			}
		});
	}

	$P.renderRductList = (total) => {
	    var rductList = $P.rductControl.dataset;
		var empty = rductList.empty;
		var notFound = [document.getElementById("rductNotFound--${pageName}").innerHTML];
		var found = document.getElementById("rductRow--${pageName}").innerHTML;
		var replacer = (str, dataItem) => str
        	.replace(/{onclick}/gi, "pageObject['${pageName}'].clickRductList('" + dataItem.getValue("CRDN_ID") + "');")
        	.replace(/{ondblclick}/gi, "pageObject['${pageName}'].dblclickRductList('" + dataItem.getValue("CRDN_ID") + "');");

		var trs = empty ? notFound : rductList.inStrings(found,replacer);

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

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

	    if(total == rductList.length){
			$("#table-responsive--${pageName}").attr("data-scroll-status", "complete");
		} else {
			$("#table-responsive--${pageName}").removeAttr("data-scroll-status");
		}

	    if($P.rductControl.untilPageNum != 0){
			$P.rductControl.query.fetchSize = $P.rductControl.defaultFetchSize;
			$P.rductControl.query.pageNum = $P.rductControl.untilPageNum;
			$P.rductControl.untilPageNum = 0;
		}
	}

	$P.getParams = () => {
		var formFields = new FimsFormFields("#frmSearch--${pageName}");
		var data = formFields.get();
		data.fetchSize = $P.rductControl.defaultFetchSize;
		data.sggCd = "41480";
		return data;
	}

	/**************************************************************************
	 * element.on
	 **************************************************************************/
    $('#btnReset--${pageName}').on('click', () => $P.fnReset());
    $('#btnSearch--${pageName}').on('click', () => $P.searchRductList());
    $("#table-responsive--${pageName}").scroll(function(){ $P.scrollEnd(this); });

    /**************************************************************************
	 * 초기화
	 **************************************************************************/
	//달력 초기화
    initDatepicker("frmSearch--${pageName}");

    var defaultBizValue = $("#layout-navbar input[name='taskSeCd']:checked").val();
	$("#frmSearch--${pageName} input[name='taskSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
	$P.fnResetAndChangeBiz(defaultBizValue);

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

});

</script>