<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : BasicAnswerForm.html
 * @desc    : 기본답변문구관리 Page
 *============================================================================
 * Wivismall
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2019.12.13   jaewonHo    최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<div class="main-title">
		</div>
		<!-- 검색조건 영역 -->
		<div class="panelStyle2">
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/system/basic/answer/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>사이트</th>
						<td>
							<select name="siteCd">
								<option value="">[전체]</option>
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}"th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>답변종류</th>
						<td>
							<select name="ansClsf">
								<option value="">[전체]</option>
								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>답변제목</th>
						<td>
							<input type="text" name="ansTitle" class="w200"/>
						</td>
						<th>사용여부</th>
						<td>
							<select name="useYn">
								<option value="">[전체]</option>
								<option value="Y">[Y] Yes</option>
								<option value="N">[N] No</option>
							</select>
						</td>
					</tr>
				</table>
				<div class="panelBtnB">
					<input type="button" value="조회" class="btn btn-base btn-lg" id="btnSearch" onclick="fnSearch();"/>
				</div>
			</form>
		</div>
		<!-- 검색조건 영역 -->
		
		<!-- 리스트 영역 -->
		<div class="panelStyle2">
			<ul class="lrStyle">
				<li>
					<button type="button" class="btn btn-default btn-lg" id="btnExcelDown" onclick="fnExcelDown();">엑셀다운로드</button>
				</li>
			</ul>
			
			<div class="panelContent" style="overflow: hidden;">
				<div id="gridList" style="width: 100%; height: 450px;" class="ag-theme-balham"></div>
			</div>
		</div>
		<!-- //리스트 영역 -->

		<!-- 등록/수정 -->
		<div class="panelStyle2">
			<form id="detailForm" name="detailForm" action="#" th:action="@{'/system/basic/answer/save'}">
				<input type="hidden" name="ansSq" value=""/>
				
				<table class="frmStyle">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col style="width:10%;"/>
						<col style="width:20%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>사이트<i class="star"></i></th>
						<td>
							<select name="siteCd" required="required" data-valid-name="사이트">
								<option>[전체]</option>
								<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>답변종류<i class="star"></i></th>
						<td>
							<select name="ansClsf" required="required" data-valid-name="답변종류">
								<option value="">[선택]</option>
								<option th:if="${ansClsfList}" th:each="oneData, status : ${ansClsfList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>등록자</th>
						<td>
							<label th:text="${sessionInfo.userId}" id="regId"></label>
						</td>
					</tr>
					<tr>
						<th>답변제목<i class="star"></i></th>
						<td colspan="3">
							<input type="text" name="ansTitle" required="required" data-valid-name="답변제목"/>
						</td>
						<th>사용여부</th>
						<td>
							<input type="hidden" name="useYn" value="Y"/>
							<label><input type="checkbox" name="chkUseYn" checked="checked"/>사용</label>
						</td>
					</tr>
					<tr>
						<th>답변내용<i class="star"></i></th>
						<td colspan="5">
							<textarea name="ansContent" class="textareaR3" required="required"  data-valid-name="답변내용" ></textarea>
						</td>
					</tr>
				</table>

				<div class="panelBtnB">
					<button type="button" class="btn btn-success btn-lg" id="btnNew">신규</button>
					<button type="button" class="btn btn-success btn-lg" id="btnSave">저장</button>
				</div>
			</form>
		</div>
		<!-- 등록/수정 -->
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	var siteList = gagajf.convertToArray([[${siteList}]]);
	var ansClsfList = gagajf.convertToArray([[${ansClsfList}]]);

	var columnDefs = [
		{headerName: "답변번호", field: "ansSq", width: 150, cellClass: 'text-center'},
		{
			headerName: "사이트", field: "siteCd", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{
			headerName: "답변종류", field: "ansClsf", width: 150, cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(ansClsfList, params.value); }
		},
		{
			headerName: "답변제목", field: "ansTitle", width: 350,
			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{headerName: "사용여부", field: "useYn", width: 80, cellClass: 'text-center'},
		{headerName: "등록자ID", field: "regId", width: 150, cellClass: 'text-center'},
		{
			headerName: "등록일", field: "regDt", width: 100, cellClass: 'text-center',
			cellRenderer: function(params) { return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDD").format("YYYY-MM-DD") : ''; }
		}
	];

	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);

	// 셀 클릭 이벤트
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field != 'ansTitle')
			return;
		
		$('#detailForm input[name=ansSq]').val(event.data.ansSq);								// 답변일련번호
		$('#detailForm select[name=siteCd]').val(event.data.siteCd);							// 사이트
		$('#detailForm select[name=ansClsf]').val(event.data.ansClsf);							// 답변종류
		$('#regId').html(event.data.regId);														// 등록자ID
		$('#detailForm input[name=ansTitle]').val(event.data.ansTitle.replaceAll('&gt;','>'));	// 답변제목
		
		if (event.data.useYn == 'Y') {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', true);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().addClass('checked');
		} else {
			$("#detailForm input:checkbox[name=chkUseYn]").prop('checked', false);
			$("#detailForm input:checkbox[name=chkUseYn]").parent().removeClass('checked');
		}
		
		$('#detailForm textarea[name=ansContent]').val(event.data.ansContent);	// 답변내용
	}

	// 신규
	$('#btnNew').on('click', function() {
		$('#detailForm')[0].reset();
		$('#detailForm input[name=ansSq]').val('');
		$('#detailForm input[name=ansTitle]').focus();
	});
	
	// 검색
	var fnSearch = function() {
		gagaAgGrid.fetch($('#searchForm').prop('action'), gridOptions, '#searchForm');
	}

	// 저장/수정
	$("#btnSave").on("click", function(formId){
		var formId = '#detailForm';

		var selectedData = gridOptions.api.getSelectedRows();

		//필수값 체크
		if (!gagajf.validation(formId))
			return false;

		var msg = '저장하시겠습니까?';
		if (selectedData.length == 0) {
			msg = '등록하시겠습니까?';
		}
		var ansSq = $(formId + " input[name=ansSq]").val();
		var siteCd = $(formId + " select[name=siteCd").val();									// 사이트
		var ansClsf = $(formId + " select[name=ansClsf]").val();								// 답변종류
		var ansTitle = $(formId + " input[name=ansTitle]").val();								// 답변제목
		var ansContent = $(formId + " textarea[name=ansContent]").val();						// 답변내용
		var useYn = $(formId + ' input:checkbox[name=chkUseYn]').is(":checked") ? 'Y' : 'N';	// 사용여부

		var data = {
				ansSq : ansSq,
				siteCd : siteCd,
				ansClsf : ansClsf,
				ansTitle : ansTitle,
				ansContent : ansContent,
				useYn : useYn
		};

		mcxDialog.confirm(msg, {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify(data);
				gagajf.ajaxJsonSubmit($(formId).prop("action"), jsonData, fnSaveCallback);
			}
		});
	});

	//저장후 콜백
	var fnSaveCallback = function() {
		fnSearch();
		$("#btnNew").click();
	}

	$(document).ready(function() {
		gagaAgGrid.createGrid('gridList', gridOptions);

		// Grid 높이 조정
		uifnFitGrid();
		
		fnSearch();
	});
/*]]>*/
</script>

</html>