<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CouponListForm.html
 * @desc    : 쿠폰관리 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.02   bin2107     최초 작성
 *******************************************************************************
 -->
<div id="main">
	<!-- 메인타이틀 영역 -->
	<div class="main-title">
	</div>
	<!-- //메인타이틀 영역 -->

	<form id="cpnSearchForm" name="cpnSearchForm" action="#" th:action="@{'/marketing/coupon/list'}">
		<!-- 패널 영역1 -->
		<div class="panelStyle" >
			<!-- 검색조건 영역 -->
			<!-- TITLE -->
			<div class="panelTitle">
				<h3>검색조건</h3>
				<span class="panelControl">
						<i class="fa fa-chevron-up"></i>
					</span>
			</div>
			<!-- //TITLE -->
			<div class="panelContent">
				<table class="frmStyle">
					<colgroup>
						<col style="width: 8%;"/>
						<col style="width: 12%;"/>
						<col style="width: 8%;"/>
						<col style="width: 12%;"/>
						<col style="width: 8%;"/>
						<col style="width: 12%;"/>
						<col style="width: 8%;"/>
						<col style="width: 12%;"/>
						<col style="width: 8%;"/>
						<col style="width: 12%;"/>
						<col/>
					</colgroup>
					<tr>
						<th>쿠폰ID</th>
						<td>
							<input type="text" class="w900" name="cpnId" id="cpnId"/>
						</td>
						<th>쿠폰유형</th>
						<td>
							<select name="cpnType" id="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>
						<th>등록자</th>
						<td>
							<input type="text" class="w200" name="regNo" id="regNo">
						</td>
					</tr>
					<tr>
						<th>할인유형</th>
						<td>
							<select name="dcWayList" id="dcWayList">
								<option value="">[전체]</option> dcWayList
								<option th:if="${dcWayList}" th:each="oneData, status : ${dcWayList}" th:value="${oneData.cd}" th:text="${'[' + oneData.cd + '] ' + oneData.cdNm}"></option>
							</select>
						</td>
						<th>쿠폰명</th>
						<td colspan="10">
							<input type="text" class="w800" id="cpnNm" name="cpnNm">
						</td>
					</tr>
					<tr>
						<th>유효기간구분</th>
						<td>
							<select name="pdGb" id="pdGb">
								<option value="">[전체]</option>
								<option value="P">기간</option>
								<option value="D">일</option>
							</select>
						</td>
						<th>유효기간</th>
						<td colspan="5" id="sellTerms"></td>
					</tr>
					<tr>
						<th colspan="1">
						<td colspan="9">
							<label class="chkBox"><input type="checkbox" id="endCpnExcep" name="chkExcep" value="E" checked>종료쿠폰제외</label>
						</td>
						</th>
					</tr>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-gray btn-lg" id="btnInit" >초기화</button>
						<button type="button" class="btn btn-info btn-lg" id="btnSearch" >조회</button>
					</li>
				</ul>
			</div>
			<!-- //검색조건 영역 -->
		</div>

		<!-- 패널 영역1 -->
		<div class="panelStyle">
			<!-- 상단버튼 영역  -->
			<ul class="panelBar">
				<li class="right">
					<button type="button" class="btn btn-info btn-lg" onclick="fnCouponCreateForm();">등록</button>
					검색결과 : <strong><span id="gridRowTotalCount">0</span> 건</strong>&nbsp;
					쪽번호 <span id="pgNo">0</span>/ <strong id="endPgNo">0</strong>&nbsp;&nbsp;
					<select id="pageSize" name="pageSize">
						<option value="50" selected="selected">50개씩 보기</option>
						<option value="100">100개씩 보기</option>
						<option value="500">500개씩 보기</option>
						<option value="1000">1000개씩 보기</option>
					</select>
					<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
				</li>
			</ul>

			<!-- 검색결과 영역 -->
			<div id="gridList" style="width: 100%; height: 570px;" class="ag-theme-balham"></div>
			<ul class="panelBar">
				<li class="center">
					<div class="tablePaging" id="couponListPagination"></div>
				</li>
			</ul>
		</div>
	</form>
	<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js?v=2019072202"></script>
	<script th:inline="javascript">
		/*<![CDATA[*/
		var cpnTypeList = gagajf.convertToArray([[${cpnTypeList}]]);
		var cpnStatList = gagajf.convertToArray([[${cpnStatList}]]);
		var dcWayList = gagajf.convertToArray([[${dcWayList}]]);
		var pdGbList = { "P":"기간", "D":"일수" };

		var columnDefs = [];
		columnDefs = [
			{headerName: "쿠폰ID", field: "cpnId", width: 130, cellClass: 'text-center'},
			{headerName: "쿠폰명", field: "cpnNm", width: 140, cellClass: 'text-center' , cellRenderer: function (params) {
				return "<a href=\"javascript:void(0);\" onclick=\"cfnCouponCreatePopup('U','" + params.data.cpnId + "');\">" + params.value + "</a>";
			}},
			{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: "cpnType", width: 140, cellClass: 'text-center' ,
				cellEditor: 'agRichSelectCellEditor',
				cellEditorParams: { values: gagaAgGrid.extractValues(cpnTypeList) },
				valueFormatter: function (params) { return gagaAgGrid.lookupValue(cpnTypeList, params.value); },
				valueParser: function (params) { return gagaAgGrid.lookupKey(cpnTypeList, params.newValue); }
			},
			{headerName: "할인방식", field: "dcWay", width: 140, cellClass: 'text-center' ,
				cellEditor: 'agRichSelectCellEditor',
				cellEditorParams: { values: gagaAgGrid.extractValues(dcWayList) },
				valueFormatter: function (params) { return gagaAgGrid.lookupValue(dcWayList, params.value); },
				valueParser: function (params) { return gagaAgGrid.lookupKey(dcWayList, params.newValue); }
			},
			{headerName: "할인값(PC)", field: "dcPval", width: 140, cellClass: 'text-center' ,
				valueFormatter	: function(params) {
					return params.value.addComma();
				}
			},
			{headerName: "할인값(MOBILE)", field: "dcMval", width: 140, cellClass: 'text-center' ,
				valueFormatter	: function(params) {
					return params.value.addComma();
				}
			},
			{headerName: "최고할인값", field: "maxDcAmt", width: 140, cellClass: 'text-center' ,
				valueFormatter	: function(params) {
					return params.value.addComma();
				}
			},
			{headerName: "사용 수/발급 수 ", field: "useIssueCnt", width: 140, cellClass: 'text-center',
				cellRenderer: function(params) {
					return params.data.useCnt.addComma() + "/" + params.data.issueCnt.addComma();
				}
			},
			{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: "regNm", width: 150, cellClass: 'text-center'},
			{headerName: "등록일시", field: "regDt", 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") : '';
				}
			},
		];

		// Get GridOptions
		var gridOptions = gagaAgGrid.getGridOptions(columnDefs);

		// 쿠폰등록 팝업창
		function fnCouponCreateForm(){
			cfnCouponCreatePopup('N');
		}

		// 초기화 클릭시
		$('#btnInit').on('click', function() {
			$('#cpnSearchForm')[0].reset();
			//$("#cpnSearchForm input[type=radio]").removeClass("checked");
			$("#cpnSearchForm input[type=checkbox]").removeClass("checked");
			//$("#cpnSearchForm input[type=radio]").parent("label").removeClass("checked");
			$("#cpnSearchForm input[type=checkbox]").parent("label").removeClass("checked");
			$("#cpnSearchForm input[type=radio][checked]").parent("label").addClass("checked");
		});

		// 조회클릭시
		$('#btnSearch').on('click', function() {
			// if(!fnConditionCheck()) return;
			$("#cpnSearchForm input[name=pageNo]").val('1');
			fnCouponListSearch();
		});

		// 조회
		var fnCouponListSearch = function() {
			if(!fnConditionCheck()) return;

			gagaPaging.init('cpnSearchForm', fnSearchCallBack, 'couponListPagination', $('#cpnSearchForm').find('#pageSize').val());
			// gagaPaging.load(1);
			gagaPaging.load($("#cpnSearchForm input[name=pageNo]").val());
		}

		//검색 조건 확인
		var fnConditionCheck = function(){
			var fromDate = $('#cpnSearchForm input[name=availStdt]').val();
			var toDate = $('#cpnSearchForm input[name=availEddt]').val();

			if (!gagajf.isNull(fromDate) || !gagajf.isNull(toDate)) {

				if (gagajf.isNull(fromDate) || gagajf.isNull(toDate)) {
					mcxDialog.alertC("기간 조회시 시작일자와 종료일자를 입력하세요.", {
						sureBtnText: "확인",
						sureBtnClick: function() {
							$('#cpnSearchForm input[name=availStdt]').focus();
						}
					});
					return false;
				}

				if (fromDate > toDate) {
					mcxDialog.alertC("등록 시작일자는 종료일자 보다 클 수 없습니다.", {
						sureBtnText: "확인",
						sureBtnClick: function() {
							$('#cpnSearchForm input[name=availEddt]').focus();
						}
					});
					return false;
				}
			}

			return true;
		}

		var fnSearchCallBack = function(result){

			$('#cpnSearchForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
			$('#cpnSearchForm').find('#pageNo').val(result.pageing.pageable.pageNo.addComma());
			$('#cpnSearchForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
			$('#cpnSearchForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
			gridOptions.api.setRowData(result.cpnList);
			gagaPaging.createPagination(result.pageing.pageable);

		}

		//페이징
		$('#cpnSearchForm select[name=pageSize]').on('change', function() {
			$("#cpnSearchForm input[name=pageNo]").val('1');
			fnCouponListSearch();
		});

		$(document).ready(function() {
			cfnCreateCalendar('#sellTerms', 'availStdt', 'availEddt', true, '기간', 'X');

			// Create a agGrid
			gagaAgGrid.createGrid('gridList', gridOptions);
		});

		/*]]>*/
	</script>
</div>
</html>