<!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  : PlanningMainFormMob.html
 * @desc    : 기획전메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.29   gagamel     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<!--  container -->
	<div id="container" class="container dp">
		<section class="content dp_exhibition">
			<div class="inner wide">
				<div class="category_nav">
					<ul th:if="${brandGroupInfo==null}">
						<li><button type="button" th:class="${cateNo == null ? 'active' : ''}" onclick="cfnGoToPage(_PAGE_PLANNING_MAIN);">전체</button></li>
						<th:block th:each="oneData, stat : ${cateList}">
						<li><button type="button" th:class="${oneData.cateNo == cateNo ? 'active' : '' }" th:onclick="|cfnGoToPage(_PAGE_PLANNING_MAIN + '?cateNo=${oneData.cateNo}');|">[[${oneData.cateNm}]]</button></li>
						</th:block>
					</ul>
					<ul th:unless="${brandGroupInfo==null}">
						<li><button type="button" th:class="${cateNo == null ? 'active' : ''}" th:onclick="|cfnGoToPage(_PAGE_PLANNING_MAIN + '?brandGroupNo=${brandGroupInfo.brandGroupNo}');|">전체</button></li>
						<th:block th:each="oneData, stat : ${cateList}">
							<li><button type="button" th:class="${oneData.cateNo == cateNo ? 'active' : '' }" th:onclick="|cfnGoToPage(_PAGE_PLANNING_MAIN + '?cateNo=${oneData.cateNo}'+ '&brandGroupNo=${brandGroupInfo.brandGroupNo}');|">[[${oneData.cateNm}]]</button></li>
						</th:block>
					</ul>
				</div>
			</div>
			<div class="inner">
				<div class="list_content"> <!-- 데이터 없을시 클래스 nodata 추가 -->
					<div class="count_wrap">
						<div>
							<p id="planningTotCnt">></p>
						</div>
					</div>
					 <div class="list_defult" style="display: none;" id="divPlanningNoData">
                          <div>
                              <p>등록된 기획전이 없습니다.</p>
                          </div>
                         <button type="button" class="btn btn_default" th:if="${brandGroupInfo==null}" onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈으로 가기</span></button>
						 <button type="button" class="btn btn_default" th:unless="${brandGroupInfo==null}" th:onclick="cfnGoToBrandMain([[${brandGroupInfo.brandGroupNo}]]);"><span th:text="${brandGroupInfo.brandGroupNm+' 홈으로 가기'}"></span></button>
                     </div>
					<div class="list_item" style="display: none;" id="divPlanningList">
					</div>
				</div>
			</div>
		</section>
	</div>
	<!-- // container -->

<script th:inline="javascript">
/*<![CDATA[*/
	let fnGetPlanningList = function(cateNo,brandGroupNo) {
		let actionUrl = '/planning/main/list';
		if (!gagajf.isNull(cateNo)) actionUrl += '?cateNo=' + cateNo;
		if (!gagajf.isNull(brandGroupNo)){
			if (!gagajf.isNull(cateNo)){
				actionUrl += '&brandGroupNo=' + brandGroupNo;
			}else{
				actionUrl += '?brandGroupNo=' + brandGroupNo;
			}
		}
		
		$.getJSON(actionUrl
			, function(result, status) {
				if (status == 'success') {
					if (result.length > 0) {
						$('#planningTotCnt').html('<span>' + result.length.addComma() + '</span>개의 기획전');
						
						$('#divPlanningList').html('');
						
						$.each(result, function(idx, item) {
							let tag = '<div>\n';
							tag += '	<div class="visual">\n';
							if(!gagajf.isNull(brandGroupNo)){
								tag += '   <a href="javascript:void(0);" onclick="cfnGoToPlanDetail(\'' + item.planSq + '\',\'' + brandGroupNo + '\')">';
							}else{
								tag += '   <a href="javascript:void(0);" onclick="cfnGoToPlanDetail(\'' + item.planSq + '\')">';
							}
							if (item.newYn == 'Y') {
								tag += '		<div class="shape ranker"><span>NEW</span></div>\n';
							}
							
							tag += '		<div class="img">\n';
							tag += '			<img src="' + _uploadImageUrl + item.mainImg + '?RS=689" alt="">\n';
							tag += '		</div>\n';
							tag += '		<div class="txtWrap">\n';
							tag += '			<p>' + item.planNm + '</p>\n';
							tag += '			<p class="txt_xs">' + item.dtlTitle1 + '</p>\n';
							tag += '		</div>\n';
							tag += '      </a>';
							tag += '	</div>\n';
							if (item.planningGoodsList.length > 0) {
								tag += '	<div class="itemsGrp n3">\n';
							
								$.each(item.planningGoodsList, function(idx2, goods) {
									tag += '		<div class="item_prod">\n';
									tag += '			<div class="item_state">\n';
									tag += '				<a class="itemLink" href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\'' + goods.goodsCd + '\',\'\',\'IN12_01\');">\n';
									tag += '					<div class="itemPic">\n';
									tag += '						<img alt="BLUE-a" class=" vLHTC pd_img" src="' + _uploadGoodsUrl + '/' + goods.sysImgNm + '"/>\n';
									tag += '					</div>\n';
									tag += '					<div class="itemName">' + goods.goodsNm + '</div>\n';
									tag += '					<p class="itemPrice">' + goods.currPrice.addComma() + '</p>\n';
									tag += '				</a>\n';
									tag += '			</div>\n';
									tag += '		</div>\n';
								});
								
								tag += '	</div>\n';
							}
							
							tag += '</div>\n';
							
							$('#divPlanningList').append(tag);
						});
						
						$('#divPlanningNoData').hide();
						$('#divPlanningList').show();
					} else {
						$('#planningTotCnt').html('<span>0</span>개의 기획전');
						$('#divPlanningNoData').show();
						$('#divPlanningList').hide();
					}
				}
			});
	}
	
	$(document).ready(function() {
		fnGetPlanningList([[${cateNo}]],[[${brandGroupNo}]]);
	});
/*]]>*/
</script>

</th:block>

</body>
</html>