<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : PlanReplyListForm.html
 * @desc    : 기획전 댓글 관리 화면 Page
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.24   sowon   최초 작성
 *******************************************************************************
 -->

<div class="modalPopup" data-width="1200" data-height="800" id="popupReply">

	<div class="panelStyle" style="height: 750px;">
		<div class="panelTitle">
			<strong>기획전 댓글관리</strong>
			<button type="button" class="close"
				onclick="uifnPopupClose('popupReply')">
				<i class="fa fa-times"></i>
			</button>
		</div>

		<div class="panelContent">
			<form th:object="${planInfo}" id="planReplyListForm"
				name="planReplyListForm" action="#"
				th:action="@{'/marketing/planning/reply/list'}" th:method="post">
				<input type="hidden" th:field="*{planSq}" /> <input type="hidden"
					th:field="*{planDtlSq}" />
				<table class="frmStyle" style="margin-bottom: 10px;">
					<colgroup>
						<col style="width: 10%;" />
						<col style="width: 10%;" />
						<col style="width: 10%;" />
						<col style="width: 20%;" />
						<col style="width: 10%;" />
						<col style="width: 15%;" />
						<col style="width: 10%;" />
						<col style="width: 15%;" />
					</colgroup>
					<tr>
						<th>기획전번호</th>
						<td><label th:text="*{planSq}" id="planSq"></label></td>
						<th>기획전명</th>
						<td><label th:text="*{planNm}" id="planNm"></label></td>
						<th>기획전시작일</th>
						<td><label th:text="*{dispStdt}" id="dispStdt"></label></td>
						<th>기획전종료일</th>
						<td><label th:text="*{dispEddt}" id="dispEddt"></label></td>
					</tr>
				</table>

				<div class="panelContent">
					<ul class="panelBar">
						<li>
							<button type="button" class="btn btn-danger btn-lg"	onclick="fnReplyDelete();">삭제</button>
							<button type="button" class="btn btn-default btn-lg" onclick="fnReplyExelDown();">엑셀 다운로드</button>
						</li>
						<li class="right">검색결과 : <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="gridListReply"	style="width: 100%; max-height: 600px; height: 600px;"	class="ag-theme-balham"></div>
					<ul class="panelBar">
						<li class="center">
							<div class="tablePaging" id="planReplyPagination"></div>
						</li>
					</ul>
				</div>
			</form>
		</div>


	</div>
</div>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/

	var planInfo = [[${planInfo}]];
	var planReplyList = [[${planReplyList}]];
	
	var columnDefsReply = [
		{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
		{headerName: '회원번호', field: 'custNo', width: 200, cellClass: 'text-center', hide: true},
		{
			headerName: '회원아이디', field: 'maskingCustId', width: 200, cellClass: 'text-center',
			cellRenderer: function(params) {
				if (gagajf.isNull(params.value)) return '';
				return '<a href="javascript:void(0);">' + params.value + '</a>';	
			}
		},
		{headerName: '참가일련번호', field: 'planEntrySq', width: 200, cellClass: 'text-center', hide: true},
		{headerName: "댓글내용"	, field:'entryVal1'		, width:700, cellClass: 'text-left',
			cellRenderer: function(params) { return '<a href="javascript:void(0);">' + params.value + '</a>'; }
		},
		{headerName: "등록일"		, field:'entryDt'			, width:200,  cellClass: 'text-left'},
	];

	var gridOptionsReply = gagaAgGrid.getGridOptions(columnDefsReply);
	gridOptionsReply.rowSelection = 'multiple';
	//gridOptionsReply.rowHeight = 45; //이미지가 있을경우 높이 지정해야함.
	gridOptionsReply.suppressRowClickSelection = true;

	// 셀 클릭 이벤트
	gridOptionsReply.onCellClicked = function(event) {
		if (event.colDef.field == 'maskingCustId') {
			cfnOpenCustDetailPopup(event.data.custNo);
		}else if(event.colDef.field == 'entryVal1'){
			fnOpenCustReplyPopup(event.data.planEntrySq,event.data.planSq);
		}
	}
	
	// 삭제클릭시
	var fnReplyDelete = function() {
		var selectedData = gagaAgGrid.selectedRowData(gridOptionsReply);

		if (selectedData.length < 1) {
			mcxDialog.alert('선택 된 댓글이 업습니다.');
			return;
		}

		mcxDialog.confirm('선택된 댓글을 삭제하시겠습니까?',{
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				var jsonData = JSON.stringify(selectedData);

				gagajf.ajaxJsonSubmit('/marketing/planning/reply/delete', jsonData, function() {
					fnReplySearch();
				});
			}
		});
	}

	
	// 댓글 이미지 팝업
	var fnOpenCustReplyPopup = function(planEntrySq,planSq) {
		var actionUrl = "/marketing/planning/reply/detail/form?planEntrySq=" + planEntrySq + "&planSq=" +planSq;
		cfnOpenModalPopup(actionUrl,'popupPlanReplyDetail');
	} 
	
	//페이징 
	$('#planReplyListForm select[name=pageSize]').on('change', function() {
		$("#planReplyListForm input[name=pageNo]").val('1');
		fnReplySearch($("#planReplyListForm input[name=searchGb]").val());
	});
	
	// 댓글 조회
	var fnReplySearch = function() {
		gagaPaging.init('planReplyListForm', fnSearchCallBack, 'planReplyPagination', $('#pageSize').val());
		gagaPaging.load($("#planReplyListForm input[name=pageNo]").val());
	}
	
	// 엑셀다운로드
	var fnReplyExelDown = function() {
		gagaAgGrid.exportToExcel('댓글 목록', gridOptionsReply);
	}
	
	var fnSearchCallBack = function(result){
		$('#planReplyListForm').find('#gridRowTotalCount').html(result.pageing.pageable.totalCount.addComma());
		$('#planReplyListForm').find('#pageNo').html(result.pageing.pageable.pageNo.addComma());
		$('#planReplyListForm').find('#pgNo').html(result.pageing.pageable.pageNo.addComma());
		$('#planReplyListForm').find('#endPgNo').html(result.pageing.pageable.totalPage.addComma());
		gridOptionsReply.api.setRowData(result.planReplyList);
		
		gagaPaging.createPagination(result.pageing.pageable);
	}
	

	
	$(document).ready(function() {
		gagaAgGrid.createGrid('gridListReply', gridOptionsReply);
		fnReplySearch();
		
	});


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