<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : ClauseListForm.html
 * @desc    : 약관관리 화면 Page
 *=============================================================
 * Wivismall
 * Copyright(C) 2019 TSIT, All rights reserved.
 *=============================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  ==================================
 * 1.0  2020.03.09  Daehyoung   최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<div class="main-title">
		</div>

		<div class="panelStyle2">
			<form id="searchForm" name="searchForm" action="#" th:action="@{'/system/clause/list'}" onsubmit="$('#btnSearch').trigger('click'); return false;">
				<table class="frmStyle" aria-describedby="검색조건">
					<colgroup>
						<col style="width:15%;"/>
						<col style="width:35%;"/>
						<col style="width:15%;"/>
						<col style="width:35%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th class="dashR">사이트</th>
							<td class="dashR">
								<select name="siteCd">
									<option th:if="${siteList}" th:each="oneData, status : ${siteList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
							<th class="dashR">약관유형</th>
							<td class="dashR">
								<select name="clauseType">
									<option value="">전체</option>
									<option th:if="${clauseTypeList}" th:each="oneData, status : ${clauseTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
						</tr>
					</tbody>
				</table>
				<div class="panelBtnB">
					<input type="button" value="초기화" class="btn btn-gray btn-lg" id="btnReset" onclick="$('#searchForm')[0].reset();"/>
					<input type="button" value="조회" class="btn btn-base btn-lg" id="btnSearch" onclick="fnSearch();"/>
				</div>
			</form>
		</div>
		<!-- 리스트 영역 -->
		<div class="panelStyle2">
			<ul class="lrStyle">
				<li>
					<span class="btnLeft">
						<p class="infoTxt cBlue"><i class="fa fa-info-circle" aria-hidden="true"></i>표시여부를 체크하시면 약관유형별 가장 최근 약관으로 프론트에 노출됩니다.</p>
					</span>
				</li>
				<li class="aR">
					<button type="button" id="btnRegistForm" class="btn btn-success btn-lg btnRight" onclick="btnRegistForm();">등록</button>
				</li>
			</ul>
			<div class="panelContent" style="overflow: hidden;">
				<div id="gridList" style="width:100%;" class="ag-theme-balham"></div>
			</div>
		</div>
		
	</div>

<script th:inline="javascript">
/*<![CDATA[*/
	// 사이트목록
	var siteList = gagajf.convertToArray([[${siteList}]]);
	var clauseTypeList = gagajf.convertToArray([[${clauseTypeList}]]);
	
	var columnDefs = [
		{headerName: "약관번호",		field:'clauseSq',		width:80,	cellClass: 'text-center'},
		{
			headerName: "사이트",		field:'siteCd',			width:150,	cellClass: 'text-center', 
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{
			headerName: "약관유형",	field:'clauseType',	width:200,	cellClass: 'text-center',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(clauseTypeList, params.value); }
		},
		{
			headerName: "약관제목",		field:'clauseTitle',	width:300,	cellClass: 'text-center',
			cellRenderer: function(params) { return '<a href="javascript:cfnClauseDetailPopup('+params.data.clauseSq+')">' + params.value + '</a>'; }
		},
		{headerName: "표시여부",		field:'dispYn',			width:80,	cellClass: 'text-center'},
		{headerName: "등록자",		field:'regId',			width:120,	cellClass: 'text-center'},
		{headerName: "등록일시",		field:'regDt',			width:150,	cellClass: 'text-center',
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
			}	
		},
		{headerName: "수정자",		field:'updId',			width:120,	cellClass: 'text-center'},
		{headerName: "수정일시",		field:'updDt',			width:150,	cellClass: 'text-center',
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYYMMDDHHmmss").format("YYYY-MM-DD HH:mm:ss") : '';
			}	
		}
	];

	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);

	// 셀 클릭 이벤트
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field != 'custNm')
			return;
		fnCustDetailPopup(event.data);
	}

	// 검색
	var fnSearch = function() {
		var formId = '#searchForm';
		gagaAgGrid.fetch($(formId).prop('action'), gridOptions, formId);
	}
	// 약관등록팝업
	var btnRegistForm = function(){
		var actionUrl = '/system/clause/detail/form/N/null';
		cfnOpenModalPopup(actionUrl, 'popupClauseDetail');
	}
	// 약관상세팝업
	var cfnClauseDetailPopup = function(clauseSq){
		var actionUrl = '/system/clause/detail/form/U/' + clauseSq;
		cfnOpenModalPopup(actionUrl, 'popupClauseDetail');
	}
	
	$(document).ready(function() {
		cfnCreateCalendar('#terms', 'regStdt', 'regEddt', false);
		
		gagaAgGrid.createGrid('gridList', gridOptions);
		
		// Grid 높이 자동 조정
		uifnFitGrid('auto');
		
		fnSearch();
	});

/*]]>*/
</script>

</html>