<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CouponRetrievePopupForm.html
 * @desc    : 쿠폰조회 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.08   gagamel     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupCoupon">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>쿠폰 조회</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupCoupon');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<div class="panelContent">
			<form id="searchCouponForm" name="searchCouponForm" action="#" th:action="@{'/marketing/coupon/retrieve/list'}" th:method="post">
				<table class="frmStyle" aria-describedby="검색조건">
					<colgroup>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
						<col style="width:10%;"/>
						<col style="width:40%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>사이트<em class="required" title="필수"></em></th>
							<td>
								<select name="siteCd" required="required">
									<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="cpnType">
									<option value="">[전체]</option>
									<option th:if="${cpnTypeList}" th:each="oneData, status : ${cpnTypeList}" th:value="${oneData.cd}" th:text="|[${oneData.cd}] ${oneData.cdNm}|"></option>
								</select>
							</td>
						</tr>
						<tr>
							<th>쿠폰ID</th>
							<td>
								<input type="text" name="cpnId" maxlength="20"/>
							</td>
							<th>쿠폰명</th>
							<td>
								<input type="text" name="cpnNm" maxlength="50" th:value="${cpnNm}"/>
							</td>
						</tr>
					</tbody>
				</table>
				
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg" id="btnSearchCouponRetrieve">조회</button>
					</li>
				</ul>
			</form>
		</div>
		<!-- //CONTENT -->

		<!-- 리스트 영역 -->
		<div class="panelContent">
			<div id="gridCouponList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->
		
		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnConfirmCoupon">확인</button>
			</li>
		</ul>
		<!-- //버튼 배치 영역 -->
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	let returnCode = [[${returnCode}]];
	let returnName = [[${returnName}]];

	let siteList = gagajf.convertToArray([[${siteList}]]);
	let usableCustGbList = gagajf.convertToArray([[${usableCustGbList}]]);
	let cpnTypeList = gagajf.convertToArray([[${cpnTypeList}]]);
	let dcWayList = gagajf.convertToArray([[${dcWayList}]]);
	let cpnStatList = gagajf.convertToArray([[${cpnStatList}]]);
	let pdGbList = { "P":"기간", "D":"일수" };
	
	let columnDefsCouponList = [
		{width: 40, minWidth: 40, cellClass: 'text-center', pinned: 'left', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{
			headerName: "사이트", field: "siteCd", width: 80, cellClass: "text-center", pinned: 'left',
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(siteList, params.value); }
		},
		{headerName: "쿠폰ID", field: "cpnId", width: 90, cellClass: 'text-center', pinned: 'left'},
		{headerName: "쿠폰명", field: "cpnNm", width: 150, pinned: 'left'},
		{headerName: "쿠폰상태", field: "cpnStat", width: 140, cellClass: 'text-center' ,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(cpnStatList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(cpnStatList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(cpnStatList, params.newValue); }
		},
		{
			headerName: "사용가능고객", field: "usableCustGb", width: 120, cellClass: "text-center",
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(usableCustGbList, params.value); }
		},
		{
			headerName: "쿠폰유형", field: "cpnType", width: 100, cellClass: "text-center",
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(cpnTypeList, params.value); }
		},
		{
			headerName: "할인방식", field: "dcWay", width: 100, cellClass: "text-center",
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(dcWayList, params.value); }
		},
		{
			headerName: "할인값(PC)", field: "dcPval", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
		},
		{
			headerName: "할인값(모바일)", field: "dcMval", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
		},
		{
			headerName: "최고할인값", field: "maxDcAmt", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return (!gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : '') + (params.data.dcWay == '10' ? '원' : '%'); }
		},
		{headerName: "기간/일수구분", field: "pdGb", width: 140, cellClass: 'text-center' ,
			cellEditor: 'agRichSelectCellEditor',
			cellEditorParams: { values: gagaAgGrid.extractValues(pdGbList) },
			valueFormatter: function (params) { return gagaAgGrid.lookupValue(pdGbList, params.value); },
			valueParser: function (params) { return gagaAgGrid.lookupKey(pdGbList, params.newValue); }
		},
		{headerName: "유효시작일시", field: "availStdt", width: 140, cellClass: 'text-center' ,
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "유효종료일시", field: "availEddt", width: 140, cellClass: 'text-center' ,
			cellRenderer: function(params) {
				return !gagajf.isNull(params.value) ? params.value.toDate("YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DD HH:mm:ss") : '';
			}
		},
		{headerName: "유효일수", field: "availDays", width: 140, cellClass: 'text-center'},
		// {headerName: "유효일수", field: "availDays", width: 140, cellClass: 'text-center'},		{
		// 	headerName: "유효기간", field: "availPeriod", width: 300, cellClass: "text-center",
		// 	cellRenderer: function(params) { return params.data.pdGb == 'P' ? gagaAgGrid.toDateTimeFormat(params.data.availStdt) + '~' + gagaAgGrid.toDateTimeFormat(params.data.availStdt) : gagaAgGrid.toAddComma(params.data.availDays) + '일'; }
		// },
		{headerName: "발행제한여부", field: "pubLimitYn", width: 100, cellClass: "text-center"},
		{
			headerName: "고객당발행제한수량", field: "custPubLimitQty", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
		},
		{
			headerName: "총발행제한수량", field: "totPubLimitQty", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
		},
		{
			headerName: "1회발행수량", field: "onePubQty", width: 100, cellClass: "text-center",
			cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
		},
		{headerName: "다운로드구분", field: "dnGb", width: 100, cellClass: "text-center"},
		{
			headerName: "구매제한금액", field: "buyLimitAmt", width: 100, cellClass: "text-right",
			cellRenderer: function(params) { return !gagajf.isNull(params.value) ? gagaAgGrid.toAddComma(params.value) : ''; }
		}
	];

	let gridOptionsCouponList = gagaAgGrid.getGridOptions(columnDefsCouponList);
	
	gridOptionsCouponList.rowSelection = 'single';
	gridOptionsCouponList.rowMultiSelectWithClick = true; // 클릭으로 선택 가능
	
// 	// Row double click
// 	gridOptionsCouponList.onRowDoubleClicked = function(event) {
// 		$('#btnConfirmCoupon').trigger('click');
// 	}

	// 조회
	$('#btnSearchCouponRetrieve').on('click', function() {
		// Fetch data
		gagaAgGrid.fetch($('#searchCouponForm').prop('action'), gridOptionsCouponList, '#searchCouponForm');
	});
	
	// 부모창에 값을 설정
	let fnSetCouponValueToOpener = function(rowData) {
		$(returnCode).val(rowData.cpnId);
		$(returnName).val(rowData.cpnNm);

		uifnPopupClose('popupCoupon');
	}
	
	// 확인
	$('#btnConfirmCoupon').on('click', function() {
		var selectedData = gagaAgGrid.selectedRowData(gridOptionsCouponList);
		if (selectedData.length == 0) {
			mcxDialog.alert('선택된 쿠폰이 없습니다.');
			return false;
		}
		
		fnSetCouponValueToOpener(selectedData[0]);
	});
	
	$(document).ready(function() {
		// Create a agGrid
		gagaAgGrid.createGrid('gridCouponList', gridOptionsCouponList);
		
		$('#btnSearchCouponRetrieve').trigger('click');
	});
/*]]>*/
</script>

</html>
