<%@ 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="content-wrapper" data-doctx="${pageName}">
	<div class="container-xxl flex-grow-1 px-0" name="wrapper">
		<div class="card wrapper-list">
		    <form name="frmSearch">
		        <div class="container-search">
                    <div class="row g-1">
                        <div class="col-12">
                            <span class="form-label fw-bold form-search-title w-px-120 text-end">업무구분</span>
                            <span class="form-search-linebox">
								<c:forEach items="${TaskListForSgg}" 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>
		        </div>
		    </form>

			<div class="container-page-btn mt-3">
		        <button type="button" name="btnReset" class="btn btn-outline-dark w-px-120" title="초기화">
		        초기화
		        </button>
		    </div>

		    <div class="h-px-500 mt-4">

	    		<div class="d-flex flex-row justify-content-center h-100">
					<div class="card p-4 d-flex flex-row w-px-1300">
						<!-- 그리드 영역 -->
						<div class="card-datatable text-nowrap d-inline-flex border-card">
							<div class="dataTables_wrapper dt-bootstrap5 no-footer">
								<div class="table-responsive oy-auto h-100"
									style="width:470px;">
									<table name="warningWordsTable" class="datatables-ajax table table-bordered dataTable no-footer">
										<thead class="sticky-thead">
											<tr>
												<th style="width:50px;"></th>
												<th style="min-width: 300px;">계도사유</th>
											</tr>
										</thead>
					                    <tbody name="warningWordsTbody"></tbody>
										<template is="curly-brackets" name="warningWordsRow">
											<tr data-index="DATA-INDEX">
												<td class="text-center min-w-px-50 mw-px-50">
													<input type="radio" name="gridRadio" value="DATA-INDEX"
													onchange />
												</td>
					                    		<td onclick class="text-center">LEVY_EXCL_RSN_NM</td>
					                    	</tr>
										</template>
										<template name="warningWordsNotFound">
											<tr>
												<td valign="top" colspan="2"
												class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
											</tr>
										</template>
									</table>
								</div>
							</div>
					    </div>

				    	<!-- 제목,내용 표시영역 -->
					    <div class="w-px-800 d-inline-flex">
				    		<div class="container-md d-flex justify-content-between flex-column">
						    	<div class="row g-1 h-px-400 border-separator-b oy-auto">
							    	<div class="col-12">
							    		<form name="frmEditWarningWords">
							    			<input type="hidden" name="ansRsnCd" />
							    			<input type="hidden" name="ansWordsId" />
							    			<label is="name-label" for="mailTtlNm"
							    			class="w-px-130 bg-lighter pe-2 col-form-label text-sm-center">제목</label>
							    			<input type="text" is="id-input" name="mailTtlNm" required
							    			class="form-control w-px-500" />
							    			<br/>
							    			<label is="name-label" for="mailCn"
							    			class="w-px-130 bg-lighter pe-2 col-form-label text-sm-center" hidden>
							    			내용
							    			</label>
							    			<textarea is="id-textarea" name="mailCn" class="form-control w-100"
							    			required rows="15"
							    			></textarea>
							    		</form>
							    	</div>
						    	</div>
						    	<div class="row g-1 py-2">
						    		<div class="col-12">
						    			<div class="btns float-end">
							            	<button type="button" name="btnSave"
							            		class="btn btn-primary" title="적용">적용</button>
						    			</div>
					    			</div>
				            	</div>
			            	</div>
						</div>
				    </div>
				</div>
		    </div>

			<div class="toast-container position-fixed bottom-0 end-0 p-3">
			  <div name="divToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
			    <div class="toast-body bg-black text-white">
			      저장 되었습니다.
			    </div>
			  </div>
			</div>
		</div>
	</div>

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

<script>
LoadScript("cvlc06010Script",wctx.url("/resources/js/fims/cvlc/cvlc06010.js?ver=${ver}"));

/**************************************************************************
* Global Variable
**************************************************************************/
 pageObject["${pageName}"] = newDoctxFinder("${pageName}");

$(document).ready(function(){

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

	$P.toast = new bootstrap.Toast($P.findn("divToast"), {
        animation: true,
        autohide: true,
        delay: 2000
    });

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

	/**************************************************************************
	* pageObject.function
	**************************************************************************/
	$P.fnResetAndChangeBiz = (taskSeCd) => {
		ctrl.urls = {};
		ctrl.urls.load = wctx.url("/cvlc/cvlc06/010/list.do");
		ctrl.urls.update = wctx.url("/cvlc/cvlc06/010/save.do");

		$P.fnReset();
	}

	$P.fnReset = () => {

		ctrl.dataset.setData([]);
		$P.renderWarningWordsList(0);
		$P.$findn("frmEditWarningWords").find("input, textarea").val("");

	    $P.searchWordsStng();
	}

	$P.getParams = () => {
		var formFields = new FimsFormFields($P.selectorn("frmSearch"));
		var data = formFields.get();
		return data;
	}

	$P.searchWordsStng = () => {
		var taskSeCd = $P.$findn("frmSearch").find("input[name='taskSeCd']:checked").val();

		ajax.get({
			url : ctrl.urls.load,
			data : {"taskSeCd" : taskSeCd},
			success : (resp) => {

				ctrl.dataset.setData(resp.List);

				$P.renderWarningWordsList(resp.List.length);

			    if(resp.List.length > 0){
			    	var current = ctrl.dataset.getCurrent("item");
			    	$P.clickWarningWordsList(current.index);
			    }
			}
		});
	}

	$P.renderWarningWordsList = (total) => {

		var warningWordsDS = ctrl.dataset;
		var empty = warningWordsDS.empty;
		var notFound = [$P.findn("warningWordsNotFound").innerHTML];
		var found = $P.findn("warningWordsRow").innerHTML;

		var replacer = (str, dataItem) => str
			.replace(/{onclick}/gi, "pageObject['${pageName}'].clickWarningWordsList('{DATA-INDEX}');")
			.replace(/{onchange}/gi, "pageObject['${pageName}'].radioClickWarningWordsList('{DATA-INDEX}');");

		var trs = empty ? notFound : warningWordsDS.inStrings(found, replacer);
		$P.$findn("warningWordsTbody").html(trs.join());
	}

	$P.radioClickWarningWordsList = (dataIndex, gridType) => {

		ctrl.dataset.setCurrent(dataIndex);

		$P.$findn("warningWordsTbody").setCurrentRow(dataIndex);

		$P.changeTextarea();
	}

	$P.clickWarningWordsList = (dataIndex, gridType) => {

		$P.$findn("wrapper").find(":radio[name='gridRadio'][value='"+dataIndex+"']").prop("checked",true);
		$P.$findn("wrapper").find(":radio[name='gridRadio'][value='"+dataIndex+"']").focus();


		$P.radioClickWarningWordsList(dataIndex, gridType);
	}

	$P.changeTextarea = () => {

		var curData = ctrl.dataset.getCurrent();

		if(curData == null){
			$P.$findn("ansRsnCd").val("");
			$P.$findn("ansWordsId").val("");
			$P.$findn("mailTtlNm").val("");
			$P.$findn("mailCn").val("");
			return;
		}

		$P.$findn("ansRsnCd").val(curData["LEVY_EXCL_RSN_CD"]);
		$P.$findn("ansWordsId").val(curData["ANS_WORDS_ID"]);
		$P.$findn("mailTtlNm").val(curData["MAIL_TTL_NM"]);
		$P.$findn("mailCn").val(curData["MAIL_CN"]);
	}

	$P.refreshWarningWordsInfo = () => {

		var cursor = ctrl.dataset.getCurrent()["LEVY_EXCL_RSN_CD"];

		var taskSeCd = $P.$findn("frmSearch").find("input[name='taskSeCd']:checked").val();

		ajax.get({
			url : ctrl.urls.load,
			data : {"taskSeCd" : taskSeCd},
			success : (resp) => {

				ctrl.dataset.setData(resp.List);
			    $P.renderWarningWordsList(resp.List.length);
				if(resp.List.length > 0){
					ctrl.dataset.setCurrent(cursor);
					var current = ctrl.dataset.getCurrent("item");
			    	$P.clickWarningWordsList(current.index,'warning');
			    }

			}
		});
	}

	//적용
	$P.fnSave = () => {

		if(!AppSupport.customValidate($P.$findn("frmEditWarningWords").find("input, select, textarea"))) return;

		var info = (new FimsFormFields($P.selectorn("frmEditWarningWords"))).get();

		info.taskSeCd = $P.$findn("frmSearch").find("input[name='taskSeCd']:checked").val();

		dialog.alert({
			content : "저장하시겠습니까?",
			init : function() {
				AppSupport.focusOK();
			},
			onOK: () => {

				ajax.get({
					url : ctrl.urls.update,
					data : info,
					success : (resp) => {
						if(resp.saved){
							$P.toast.show();
							AppSupport.sleep(1000).then(() => $P.refreshWarningWordsInfo());
						}
					}
				});
			}
		});
	}

	/**************************************************************************
	* element.on
	**************************************************************************/
	$P.$findn("btnReset").on('click', () => $P.fnReset());

	//업무처리 버튼
    $P.$findn("btnSave").on("click", () => $P.fnSave());

	/**************************************************************************
	* 초기화
	**************************************************************************/
    var defaultBizValue = $("#layout-navbar input[name='taskSeCd']:checked").val();
    $P.$findn("frmSearch").find("input[name='taskSeCd'][value='" + defaultBizValue + "']").prop("checked",true);
	$P.fnResetAndChangeBiz(defaultBizValue);

	$P.$findn("frmSearch").find("input[name='taskSeCd']").each(function(i) {
		$(this).prop("disabled", "true");
	});
});


</script>