<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/CallcenterLayoutMob">
<!--
 *******************************************************************************
 * @source  : NoticeFormMob.html
 * @desc    : 공지사항 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.09   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<main role="" id="" class="container cs">
		<!-- 고객센터 Gnb -->
		<nav class="pnb" id="callcenterGnb">
		</nav>
		<!-- //고객센터 Gnb -->
		
		<!-- ★ 컨텐츠 시작 -->
		<section class="content cs_notice_1">
			<div class="inner sr-only"><h2 class="title">공지 리스트</h2></div>
			<div class="inner wide">
				<!-- 폴딩리스트 -->
				<div class="ui_row" id="divNotice"> <!-- 데이터 없을시 클래스 nodata 추가 -->
					<div class="foldGroup case3">
						<!-- list3 -->
						<ul id="ulNotice">
						</ul>
						<!-- //list3 -->
					</div>
				</div>
				<div class="ui_foot">
					<button class="btn btnM btnIcon_more" id="btnNoticeMore">더보기</button>
				</div>
				<!-- 폴딩리스트 -->
			</div>
		</section>
		<!-- ★ 컨텐츠 종료 -->	
	</main>
	
	<form id="noticeForm" name="noticeForm" action="#" th:action="@{'/callcenter/notice/list'}">
		<input type="hidden" name="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="10"/>
	</form>

<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		// 타이틀명
		$('#htopTitle').text('고객센터');
		
		// 고객센터 GNB 설정
		fnSetCallcenterGnb(4);
		
		$('#btnNoticeMore').trigger('click');
	});
	
	// 더보기
	$('#btnNoticeMore').on('click', function() {
		gagajf.ajaxFormSubmit($('#noticeForm').prop('action'), '#noticeForm', fnGetListCallback);
	});
	
	// 목록 콜백함수
	var fnGetListCallback = function(result) {
		// 중요 공지 목록
		if (result.dataList != null && result.dataList.length > 0) {
			$.each(result.dataList, function(idx, item) {
				let tag = '<li>\n';
				tag += '	<div class="fold_head">\n';
				tag += '		<a href="javascript:void(0)" onclick="fnUpdateFaqReadCount(' + item.noticeSq + ', this);">\n';
				tag += '			<div>\n';
				tag += '				<div class="fold_tit">\n';
				tag += '					<div class="lap1">\n';
				
				if (item.urgentYn == 'Y') {
					tag += '						<span class="fold_state done">중요</span>\n';
				}
				
// 				tag += '						<span class="prod">공지</span>\n';
				tag += '					</div>\n';
				tag += '					<div class="lap2"><span>' + item.noticeTitle.escapeHtml() + '</span></div>\n';
				tag += '				</div>\n';
				tag += '				<span class="data">' + item.regDt.toDate("YYYYMMDD").format("YYYY.MM.DD") + '</span>\n';
				tag += '			</div>\n';
				tag += '		</a>\n';
				tag += '	</div>\n';
				tag += '	<div class="fold_cont">\n';
				tag += '		<div class="fold_answer">\n';
				
				// 2021.08.13 &nbsp; 제거
				tag += '			<div>' + item.noticeContent.replaceAll('&lt;','<').replaceAll('&gt;', '>').replaceAll('&quot;', '"').replaceAll('&amp;nbsp;', ' ') + '</div>\n';
				tag += '		</div>\n';
				tag += '	</div>\n';
				tag += '</li>\n';

				$('#ulNotice').append(tag);
			});
			
			$('#divNotice').removeClass('nodata');
			
			if (result.paging.pageable.totalPage > result.paging.pageable.pageNo) {
				$('#btnNoticeMore').parent().show();
				$('#noticeForm input[name=pageNo]').val(result.paging.pageable.pageNo + 1);
			} else {
				$('#btnNoticeMore').parent().hide();
			}
		} else {
// 			let tag = '<li>내역이 없습니다.</li>\n';
// 			$('#ulNotice').append(tag);
			$('#divNotice').addClass('nodata');
		}
		
// 		// 일반 공지 목록
// 		if (result.dataList != null && result.dataList.length > 0) {
// 			$.each(result.dataList, function(idx, item) {
// 				let tag = '<li>\n';
// 				tag += '	<div class="fold_head">\n';
// 				tag += '		<a href="javascript:void(0)">\n';
// 				tag += '			<div>\n';
// 				tag += '				<div class="fold_tit">\n';
// 				tag += '					<div class="lap1">\n';
// 				tag += '						<span class="prod">공지</span>\n';
// 				tag += '					</div>\n';
// 				tag += '					<div class="lap2"><span>' + item.noticeTitle + '</span></div>\n';
// 				tag += '				</div>\n';
// 				tag += '				<span class="data">' + item.regDt.toDate("YYYYMMDD").format("YYYY.MM.DD") + '</span>\n';
// 				tag += '			</div>\n';
// 				tag += '		</a>\n';
// 				tag += '	</div>\n';
// 				tag += '	<div class="fold_cont">\n';
// 				tag += '		<div class="fold_answer">\n';
// 				tag += '			<div class="answer_body">' + item.noticeContent + '</div>\n';
// 				tag += '		</div>\n';
// 				tag += '	</div>\n';
// 				tag += '</li>\n';
				
// 				$('#ulNotice').append(tag);
// 			});
// 		}
		
// 		if (result.urgentList == null && result.dataList == null) {
// 			let tag = '<li>내역이 없습니다.</li>\n';
// 			$('#ulNotice').append(tag);
// 			$('#divNotice').addClass('nodata');
// 		} else {
// 			$('#divNotice').removeClass('nodata');
			
// 			if (result.paging.pageable.totalPage > result.paging.pageable.pageNo) {
// 				$('#btnNoticeMore').parent().show();
// 				$('#noticeForm input[name=pageNo]').val(result.paging.pageable.pageNo + 1);
// 			} else {
// 				$('#btnNoticeMore').parent().hide();
// 			}
// 		}
	}
	
	// 조회수 갱신
	let fnUpdateFaqReadCount = function(noticeSq, obj) {
		if (!($(obj).parents('.fold_head').hasClass('on'))) {
			$.post('/callcenter/notice/readcount/update/' + noticeSq
					, null
					, function() {
						// Do nothing
					}
					, 'json');
		}
	}
/*]]>*/
</script>

</th:block>

</body>
</html>
