<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MktmailmanagementForm.html
 * @desc    : MKT 메일관리
 *============================================================================
 * SISUN
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   csh9191     최초 작성
 *******************************************************************************
 -->
	<div id="main">
		<!-- 메인타이틀 영역 -->
		<div class="main-title"></div>
		<!-- //메인타이틀 영역 -->
		
		<!-- 메뉴 설명 -->
		<div class="infoBox menu-desc"></div>

		<form id="searchForm" name="searchForm" action="#" th:action="@{'/marketing/mktmailManagement/list'}"  onsubmit="$('#btnSearch').trigger('click'); return false;">
			<input type="hidden" name="mailtcSq" th:value="${mailtcSq}">
			<!-- 검색조건 영역 -->
			<div class="panelStyle" >
				<!-- //TITLE -->
				<div class="panelContent">
					<table class="frmStyle">
						<colgroup>
							<col style="width: 7%;"/>
							<col/>
						</colgroup>
						<tr>
							<th>기간</th>
							<td id="sellTerms"></td>
						</tr>

						<tr>
							<th>조회</th>
							<td>
								<label class="rdoBtn"><input type="radio" name="searchGb" value="mailtSq"checked/>메일번호</label>
								<label class="rdoBtn"><input type="radio" name="searchGb" value="mailtNm"/>타이틀</label>
								<input type="text" class="w900" name="searchTxt" id="searchTxt"/>
							</td>
						</tr>
					</table>
					<ul class="panelBar">
						<li class="center">
							<button type="button" class="btn btn-gray btn-lg" onclick="$('#searchForm')[0].reset();" >초기화</button>
							<button type="button" class="btn btn-info btn-lg" id="btnSearch" >조회</button>
						</li>
					</ul>
				</div>
			</div>
			<!-- 검색조건 영역 -->

			<!-- 리스트 영역 -->
			<div class="panelStyle">
				<!-- 버튼 배치 영역 -->
				<ul class="panelBar">
					<li class="left">
						<button type="button" class="btn btn-danger btn-lg" id="btnDeleteRow">선택삭제</button>	
					</li>
					<li class="right">
						<button type="button" class="btn btn-info btn-lg" onclick="fnOpenMailHFPopup('N');">메일템플릿 등록</button>
				</ul>
				<!-- //버튼 배치 영역 -->
				<div id="gridList" style="width: 100%; height: 570px" class="ag-theme-balham"></div>
			</div>
		<!-- //리스트 영역 -->
		</form>
	</div>
<script th:inline="javascript">
/*<![CDATA[*/
	
	//메일구분
	let mailtGb = {"M" :"마케팅메일", "A":"자동메일"};
	
	var columnDefs = [];
	columnDefs = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: "메일번호", field: "mailtSq", width: 100, cellClass: 'text-center'},
		{headerName: "메일구분", field: "mailtGb", width: 200, cellClass: 'text-center',
		 	valueFormatter: function (params) { return gagaAgGrid.lookupValue(mailtGb, params.value); }},
		{	headerName: "타이틀", field: "mailtNm", width: 350, cellClass: 'text-center',
			cellRenderer: function(params) 
			{ 
				return '<a href="javascript:void(0);">' + params.value + '</a>'; 
			}
		},
		{	//미리보기 
			headerName: "", field:"preview" , width: 150, cellClass: 'text-center',
			cellRenderer: function(params) {
				return '<button="javascript:void(0);" class="btn btn-info btn-sm">'+ '미리보기' +'</button>'
			}
		
		},
		{headerName: "등록자", field: "regNm", width: 150, cellClass: 'text-center'},
		{
			headerName: "등록일시", field: "regDt", width: 200, cellClass: 'text-center',
			cellRenderer: function(params) 
			{ 
				return gagaAgGrid.toDateTimeFormat(params.value); 
			}
		},
		{
			headerName: "수정자", field: "updNm", width: 150, cellClass: 'text-center'},
		{
			headerName: "수정일시", field: "updDt", width: 200, cellClass: 'text-center', 
			cellRenderer: function(params) 
			{ 
				return gagaAgGrid.toDateTimeFormat(params.value); 
			}
		}
	];
	
	// Get GridOptions
	var gridOptions = gagaAgGrid.getGridOptions(columnDefs);
	
	// 다중 선택 추가
	gridOptions.rowSelection = 'multiple';	
	
	//셀 클릭 이벤트 -> 팝업창
	gridOptions.onCellClicked = function(event) {
		if (event.colDef.field == 'mailtNm'){
			fnOpenMailHFPopup('U', event.data.mailtSq);
		}else if(event.colDef.field == 'preview'){
			fnOpenMailPreviewPopup(event.data.mailtSq);
		}
			
	}
	
	// grid row Delete
	$('#btnDeleteRow').on('click', function() {
		var removedData = gagaAgGrid.removeRowData(gridOptions);
		
		if (removedData.length == 0) {
			mcxDialog.alert('선택된 행이 없습니다.');
			return;
		}
		
		mcxDialog.confirm("삭제하시겠습니까?", {
			sureBtnText: "확인",
			cancelBtnText: "취소",
			sureBtnClick: function() {
				// delete 대신 update 처리해야 하므로 다음과 같이 useYn 값으로 처리
				var updatedData = [];
				
				$.each(removedData, function(idx, item) {
					item.useYn = 'N';
					updatedData.push(item);
				});
				
				var jsonData = JSON.stringify(updatedData);
				gagajf.ajaxJsonSubmit('/marketing/mktmailManagement/delete', jsonData, function() {
					$('#btnSearch').trigger('click');
				});
			}
		});
	});
	
	// 조회버튼 - 검색
	$('#btnSearch').on('click', function() {
// 		if(!dateCheck()) return;
		var formId = "#searchForm";
		gagaAgGrid.fetch($(formId).prop('action'), gridOptions, formId);
	});
	
// 조회검색 조건 CHECK
// 	var dateCheck = function(){
// 	var fromDate = $('#mktmailStdt').val();
// 	var toDate = $('#mktmailEddt').val();

// 		if (gagajf.isNull(fromDate)) {
// 			mcxDialog.alert('시작 기간을 입력하세요.');
// 			return;
// 		}
// 		if (gagajf.isNull(toDate)) {
// 			mcxDialog.alert('종료 기간을 입력하세요.');
// 			return;
// 		}
// 		return true;
// 	}
	
	// 등록/상세 팝업
	var fnOpenMailHFPopup = function(mode, mailtSq) {
		let data = gridOptions.api.getSelectedRows();
		var actionUrl = '/marketing/mktmailmanagement/detail/form' + '?mode=' + mode;
		if (!gagajf.isNull(mailtSq)) actionUrl += '&mailtSq=' + mailtSq;
		cfnOpenModalPopup(actionUrl, 'popupMktMail');
	}
	
	//미리보기
	var fnOpenMailPreviewPopup = function(mailtSq) {
		let data = gridOptions.api.getSelectedRows();
		var actionUrl = '/marketing/mktmailmanagement/preview';
		if (!gagajf.isNull(mailtSq)) actionUrl += '?mailtSq=' + mailtSq;
// 		cfnOpenModalPopup(actionUrl, 'popupMktMailPreview');
		window.open(actionUrl, '_blank', 'popupMktMailPreview');
	}
	
	
	$(document).ready(function() {
	
		cfnCreateCalendar('#sellTerms', 'mktmailStdt', 'mktmailEddt', true);
	
		// Create a agGrid
		gagaAgGrid.createGrid('gridList', gridOptions);
		gagaAgGrid.hideStatusBar('gridList');
	
	});

/*]]>*/

</script>
</html>