<!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/DefaultLayoutMob">
<!--
 *******************************************************************************
 * @source  : PlanningEventMainFormMob.html
 * @desc    : 이벤트메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.08   sowon     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<!--  container -->
		<main role="" id="" class="container ev">
			<section class="content ev_list">
				<div class="inner bg_gray">
					<div class="ev_mem_rank">
						<div class="txt">
							<p>
								STYLE24 회원등급에 따라<br>제공되는 혜택 정보를 확인해 보세요.
							</p>
							<a href="javascript:void(0);" class="btn btn_dark" onclick="cfnGoToPage(_PAGE_CUSTOMER_GRADE_BENEFIT);">회원등급 혜택 보기</a>
						</div>
					</div>
				</div>
				<div class="inner">
					<div class="event_list">
						<div class="event_top">
							<div class="count"id="eventTotCnt">
								<!-- <span>9,999</span>개의 이벤트 -->
							</div>
							<div class="event_btn">
								<a href="javascript:void(0);" th:onclick="cfnGoToPage(_PAGE_NOTICE)">당첨자 발표</a>
							</div>
						</div>
						<div class="list" id="divEventList">
							
						</div>
					</div>
				</div>

			</section>
		</main>
<script th:inline="javascript">

/*<![CDATA[*/
let fnGetEventList = function() {
	let actionUrl = '/planning/event/main/list';
	
	$.getJSON(actionUrl
		, function(result, status) {
			if (status == 'success') {
				let tag = '';
				if (result.length > 0) {
					$('#eventTotCnt').html('<span>' + result.length.addComma() + '</span>개의 이벤트');
					$('#divEventList').html('');
					
					tag += '<ul class="event_con">\n';
					$.each(result, function(idx, item) {
						tag += '	<li>\n';
						tag += '        <a onclick="cfnGoToPlanDetail(\'' + item.planSq + '\')">\n'
						tag += '			<div class="ev_img">\n';
						if (item.newYn == 'Y') {
							tag += '				<div class="shape ranker">\n';
							tag += '					<span>NEW</span>\n';
							tag += '				</div>\n';
						}
						tag += '				<img src="' + _uploadImageUrl + item.mainImg + '?RS=960" alt="">\n';
						tag += '			</div>\n';
						tag += '			<div class="txt">\n';
						tag += '				<p class="tit">'+item.planNm+'</p>\n';
						tag += '				<div class="date">\n';
						tag += '					<span>'+item.dispStdt+'</span> - <span>'+item.dispEddt+'</span>\n';
						tag += '				</div>\n';
						tag += '			</div>\n';
						tag += '        </a>\n';
						tag += '	</li>\n';
					});
					
					tag += '</ul>\n';
					
				} else {
					$('#eventTotCnt').html('<span>0</span>개의 이벤트');
					tag += '<div class="nodata">';
					tag += '	<div class="txt_box">';
					tag += '		<p>등록된 이벤트가 없습니다.</p>';
					tag += '		<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">홈으로 가기</a>';
					tag += '	</div>';
					tag += '</div> ';
					
				}
				
				$('#divEventList').html(tag);
			}
		});
}

$(document).ready(function() {
	fnGetEventList();
});
/*]]>*/
</script>
	</th:block>

</body>
</html>