<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GnbMob.html
 * @desc    : GNB
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.08   gagamel     최초 작성
 *******************************************************************************
 -->
<th:block th:fragment="gnb">
	<header class="main">
		<section class="htop" id="htopMain">
			<h1>
				<th:block th:if="${brandGroupInfo?.brandGroupNo == null}">
					<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);fnClickGnbTab('');" >
						<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/logo_STYLE24.png'" alt="STYLE24">
					</a>
				</th:block>
				<th:block th:unless="${brandGroupInfo?.brandGroupNo == null}">
					<a href="javascript:void(0);" th:onclick="cfnGoToBrandMain([[${brandGroupInfo?.brandGroupNo}]]);fnClickGnbTab('');" >
						<p th:text="${brandGroupInfo?.brandGroupNm}"></p>
					</a>
				</th:block>
				<button class="btn_gnb" title="메인메뉴 열기/닫기"><span><i></i></span></button>
			</h1>
			<div class="button_wrap">
				<th:block th:if="${brandGroupInfo?.brandGroupNo == null}">
					<button class="search" onclick="cfnSearchLayer();">
						<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_search.png'" alt="검색">
					</button>
				</th:block>
				<th:block th:unless="${brandGroupInfo?.brandGroupNo == null}">
					<button class="search" th:onclick="cfnBrandSearchLayer([[${brandGroupInfo?.brandGroupNo}]]);">
						<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_search.png'" alt="검색">
					</button>
				</th:block>
				<button class="store" onclick="cfnGoToPage(_PAGE_CART);">
					<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_store.png'" alt="쇼핑백">
					<span id="spanGnbCartCnt" style="display: none;"></span>
				</button>
			</div>
		</section>
		
		<!-- 브랜드 리스트 -->
		<section class="hmenu">
			<div class="inner scrollWrap">
				<nav class="bng">
					<ul class="d1" id="liGnbBrandGrp">
					</ul>
				</nav>
			</div>
		</section>
	</header>
	
	<div id="gnb" class="gnb">
		<div class="gnb-inner">
			<ul id="ulGnbTab">
			</ul>
		</div>
		<button onclick="$('#gnb').toggleClass('expand');" class="btn-expand"></button>
	</div>

	<!-- 210510_추가 : 띠배너 추가. -->
	<div class="bnrtype_banner" id="divTopbanner" style="display:none;">
<!--		<a href="javascript:;" target="">-->
<!--			&lt;!&ndash; 텍스트 영역 &ndash;&gt;-->
<!--			<div>-->
<!--				<span>APP</span> 수신동의 하면 <span>1</span>만 포인트 증정!-->
<!--			</div>-->
<!--			&lt;!&ndash; //텍스트 영역 &ndash;&gt;-->
<!--		</a>-->
<!--		<button type="button" class="bnrtype_close"><span class="sr-only">배너 닫기</span></button>-->
	</div>
	<!-- //210510_추가 : 띠배너 추가. -->
	
	<!-- 통합검색 팝업 -->
	<div class="modal pop_full schPop sch" id="schPop" tabindex="-1" role="dialog" aria-labelledby="schPopLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
			</div>
		</div>
		<a href="#close-modal" rel="modal:close" id="schAllPop_close" class="close-modal">Close</a>
	</div>
	<!-- //통합검색 팝업 -->
	
<script th:inline="javascript">
/*<![CDATA[*/
	// 현재 클릭 GNB Class On 처리
	let fnSetGtabSq = function (){
		const url = new URL(document.location.href);
		// URLSearchParams 객체
		const urlParams = url.searchParams;
		let gnbId = urlParams.get('gnbId');

		// gtabId = gtabSq;
		if(gagajf.isNull(gnbId)){
			gnbId = "Home";
		}
		$("#gnbLi"+gnbId).addClass("on");
	}

	let fnClickGnbTab = function(gtabSq) {
		gagajf.setCookie("st24ck_gnb_tab", gtabSq, 1);
	}

	let fnClickBrandGnbTab = function(gtabSq) {
		gagajf.setCookie("st24ck_brand_gnb_tab", gtabSq, 1);
	}
	
	// 브랜드 GNB탭 생성
	let fnCreateBrandGnbTab = function() {
		$('#ulGnbTab').html('');
		
		let tag = '';
		var gnbId = '?gnbId=';
		// let ckBrandGnbTabSq = gagajf.getCookie("st24ck_brand_gnb_tab");
		// tag += '<ul>\n';
		tag += '	<li id="gnbLiHome"><a href="javascript:void(0);" onclick="cfnGoToBrandMain(' + [[${brandGroupInfo?.brandGroupNo}]] + ' , \'\');" class="on">홈</a></li>\n';
		tag += '	<li id="gnbLi100"><a href="javascript:void(0);" onclick="cfnGoToGoodsList(' + [[${brandGroupInfo?.brandGroupNo}]] + ',\'' + [[${brandGroupInfo?.cateGb}]] + '\',\'\',\'\',\'\',\'\',\'\',\'\',100);" class="on">상품</a></li>\n';
		
		$.getJSON('/display/brand/gnb/tab/list?brandGroupNo=' + [[${brandGroupInfo?.brandGroupNo}]]
			, function(result, status) {
				if (status == 'success') {
					if (result.length > 0) {
						$.each(result, function(idx, item) {
							if(item.linkUrl.indexOf('?') > -1){
								gnbId = '&gnbId=';
							}else{
								gnbId = '?gnbId=';
							}
							if (item.contentsType == 'L') { // 컨텐츠유형:링크
								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '" >' + item.gtabNm + '</a></li>\n';
							}else{
								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '" >' + item.gtabNm + '</a></li>\n';
							}
						});
					}
				}
				// tag += '<button>+</button>';
				$('#ulGnbTab').html(tag);
			});
		// tag += '</ul>\n';
		setTimeout(function() {
			fnSetGtabSq();
		}, 3000);
	}
	
	// GNB탭 생성
	let fnCreateGnbTab = function() {
		var gnbId = '?gnbId=';
		$.getJSON('/display/gnb/tab/list'
			, function(result, status) {
				if (status == 'success') {
					if (result.length > 0) {
						$('#ulGnbTab').html('');
						
						// let ckGnbTabSq = gagajf.getCookie("st24ck_gnb_tab");
						
						let tag = '';
						tag += '<li id="gnbLiHome"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN,\'\',\'\');">홈</a></li>\n';
						tag += '<li id="gnbLi100"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_ALL_BRAND);">브랜드</a></li>\n';
						
						$.each(result, function(idx, item) {
							if (item.contentsType == 'C') { // 컨텐츠유형: 카테고리
								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="javascript:void(0);" onclick="cfnGoToCategoryMain(\'G032_101\',' + item.cate1No + ',\'\',' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
							} else if (item.contentsType == 'O') { // 컨텐츠유형: 아울렛
								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="javascript:void(0);" onclick="cfnGoToOutletMain(\'G032_103\',' + item.gtabSq + ');">' + item.gtabNm + '</a></li>\n';
							} else { // 컨텐츠유형: 링크
								if(item.linkUrl.indexOf('?') > -1){
									gnbId = '&gnbId=';
								}else{
									gnbId = '?gnbId=';
								}
								tag += '<li id="gnbLi' + item.gtabSq + '"><a href="' + item.linkUrl + gnbId + item.gtabSq + '">' + item.gtabNm + '</a></li>\n';
							}
						});
						
						$('#ulGnbTab').html(tag);
					}
				}
			});
		setTimeout(function() {
			fnSetGtabSq();
		}, 3000);
	}
	
	// GNB탭 > 브랜드 생성
	let fnCreateGnbBrandGroup = function() {
		$.getJSON('/display/gnb/brand/group/list'
			, function(result, status) {
				if (status == 'success') {
					if (result.length > 0) {
						$('#liGnbBrandGrp').html('');
						let tag = '';
						$.each(result, function (idx, item) {
							tag += '<li>\n';
							tag += '<a href="javascript:void(0);" onclick="cfnGoToBrandMain(' + item.brandGroupNo + ');">\n';
							tag += item.brandGroupNm + '<span><img src="' + _uploadDefaultUrl + item.bwLogoFileNm + '" alt="' + item.brandGroupNm + '"></span>\n';
							tag += '</a>\n';
							tag += '</li>\n';
						});
						tag += '<li>\n';
						tag += '<a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);">\n';
						tag += 'STYLE24<span><img src="' + _uximgUrl + '/images/mo/thumb/brand16.png" alt="STYLE24"></span>\n';
						tag += '</a>\n';
						tag += '</li>\n';
						$('#liGnbBrandGrp').html(tag);
					}
				}
				
				// 브랜드로 접근하지 않았으면
				if (gagajf.isNull([[${brandGroupInfo}]])) {
					fnCreateGnbTab();
				} else {
					fnCreateBrandGnbTab();
				}
		});
	}

	// 띠배너 조회
	let fnCreateTopMobBanner = function (){
		var url = '/display/gnb/topbanner/list?contentsLoc=SGNB002';
		let tag = '';
		$.getJSON(url, function (result, status){
			if(result.length>0){
				$.each(result, function (idx, item) {
					$('#divTopbanner').html('');
					tag+=' 	<a href="'+item.strVar1+'" target="">';
					tag+=' 		<div>'+item.strTitle1;
					// tag+=' 			<span style="font-weight:500">'+item.strTitle1+'</span>';
					tag+=' 		</div>';
					tag+=' 	</a>';
					tag+='<button type="button" class="bnrtype_close"><span class="sr-only">배너 닫기</span></button>';
					$('#divTopbanner').html(tag);
				});
			}
		});
	}
	
	// $(document).on("click",".htop .search",function(){
	// 	$("#schPop .modal-content").load("popup_sch_layer.html");
	// 	$("#schPop").modal("show");
	// 	return false;
	// });

	//210510_추가 : 띠배너 닫기
	$(document).on('click','.bnrtype_banner .bnrtype_close',function(){
		$(this).parents('.bnrtype_banner').hide();
		return false;
	})
	
	$(document).ready(function() {
		// GNB탭 > 브랜드 생성
		fnCreateGnbBrandGroup();

		// 띠배너 조회
		fnCreateTopMobBanner();
		// var para = document.location.href.split("?");
	});
/*]]>*/
</script>

</th:block>

</html>