<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GnbWeb.html
 * @desc    : GNB
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.01.28   gagamel     최초 작성
 *******************************************************************************
 -->
<header id="header" th:fragment="gnb">

	<div class="common_header br_header" th:style="${'background-color: #' + brandGroupInfo.rgbCd}">
		<div class="area" th:style="${'background-color: #' + brandGroupInfo.rgbCd}">
			<div class="logo">
				<a href="javascript:void(0);" th:onclick="cfnGoToBrandMain([[${brandGroupInfo.brandGroupNo}]]);">
					<h1>
						<!-- <img th:src="${@environment.getProperty('domain.image') + brandGroupInfo.logoFileNm}" src="/images/pc/thumb/br_tbj_logo.png" alt="TBJ nearby"/> -->
						<p th:text="${brandGroupInfo.brandGroupNm}"></p>
					</h1>
				</a>
			</div>
			<div class="util_group">
				<span><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MAIN);" title="STYLE24 홈화면 바로가기"><b>STYLE24 홈</b></a></span>
				<span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGIN);" title="로그인 바로가기">로그인</a></span>
				<span th:if="${sessionInfo != null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_LOGOUT);" title="로그아웃">로그아웃</a></span>
				<span th:if="${sessionInfo == null}"><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);" title="회원가입 바로가기">회원가입</a></span>
				<span><a href="javascript:void(0);" onclick="cfnGoToPage(_PAGE_MYPAGE);" title="마이페이지 바로가기">마이페이지</a></span>
			</div>
		</div>
		<div class="gnb" th:style="${'background-color: #' + brandGroupInfo.rgbCd}">
			<!-- nav -->
			<div class="nav">
				<ul class="bundle" id="ulGnbTab">
					<li class="home"><a href="javascript:void(0);" th:onclick="cfnGoToBrandMain([[${brandGroupInfo.brandGroupNo}]]);">브랜드 홈</a></li>
					<li class="has_depth"><!-- depth_menu 있을 시 has_depth 클래스 추가 -->
						<a href="javascript:void(0);" th:onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],[[${brandGroupInfo.cateGb}]]);">상품</a>
						<!-- 상품 depth -->
						<div class="depth_menu category">
							<div class="head_category">
								<div class="menu">
									<ul class="maintabs" id="ulGnbCate">
									</ul>
								</div>
							</div>
							<div class="head_banner" id="divGnbBrandBanner">
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!-- // nav -->
			
			<!-- search -->
			<div class="search">
				<button type="button" class="btn_open_search" th:onClick="cfnBrandSearchLayer([[${brandGroupInfo.brandGroupNo}]]);"><i class="ico ico_search"><em>통합검색 열기</em></i></button>
				<a href="#" class="btn_ico btn_cart" title="장바구니 바로가기"><i class="ico ico_bag"></i><span class="circle_count"></span></a>
			</div>
			<!-- //search -->
		</div>
	</div>

	<!-- 검색 레이어 -->
	<div class="common_search">
	</div>
	<!-- //검색 레이어 -->

<script th:inline="javascript">
/*<![CDATA[*/
	// 전체카테고리 조회
	let gAllCate = [[${allCateList}]];
	
	// GNB탭 > 카테고리
	let fnGetGnbCategory = function(cate1) {
		let tag = '';
		if (cate1 != null) {
			if (cate1.cateGb == 'G032_101') { // 카테고리구분이 BYITEM 이면
				tag += '<li>\n';
				tag += '	<a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate1.cateGb + '\',' + cate1.cate1No + ');">' + cate1.cate1Nm + '</a>\n';
			
				if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
					tag += '	<ul class="box_depth2">\n';
					$.each(cate1.cate2List, function(idx2, cate2) {
						tag += '		<li>\n';
						tag += '			<a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
						if (cate2.leafYn == 'N' && cate2.cate3List != null && cate2.cate3List.length > 0) {
							tag += '			<ul class="box_depth3">\n';
							$.each(cate2.cate3List, function(idx3, cate3) {
								tag += '				<li>\n';
								tag += '					<a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate3.cateGb + '\',' + cate3.cate1No + ',' + cate3.cate2No + ',' + cate3.cate3No + ');">' + cate3.cate3Nm + '</a>\n';
								if (cate3.leafYn == 'N' && cate3.cate4List != null && cate3.cate4List.length > 0) {
									tag += '					<ul class="box_depth3">\n';
									$.each(cate3.cate4List, function(idx4, cate4) {
										tag += '						<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate4.cateGb + '\',' + cate4.cate1No + ',' + cate4.cate2No + ',' + cate4.cate3No + ',' + cate4.cate4No + ');">' + cate4.cate4Nm + '</a></li>\n';
									});
									tag += '					</ul>\n';
								}
								tag += '				</li>\n';
							});
							tag += '			</ul>\n';
						}
						tag += '		</li>\n';
					});
					tag += '	</ul>\n';
				}
				tag += '</li>\n';
			} else { // 카테고리구분이 BYBRAND 이면
				if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
					$.each(cate1.cate2List, function(idx2, cate2) {
						tag += '		<li>\n';
						tag += '			<a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
						if (cate2.leafYn == 'N' && cate2.cate3List != null && cate2.cate3List.length > 0) {
							tag += '			<ul class="box_depth2">\n';
							$.each(cate2.cate3List, function(idx3, cate3) {
								tag += '				<li>\n';
								tag += '					<a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate3.cateGb + '\',' + cate3.cate1No + ',' + cate3.cate2No + ',' + cate3.cate3No + ');">' + cate3.cate3Nm + '</a>\n';
								if (cate3.leafYn == 'N' && cate3.cate4List != null && cate3.cate4List.length > 0) {
									tag += '					<ul class="box_depth3">\n';
									$.each(cate3.cate4List, function(idx4, cate4) {
										tag += '						<li><a href="javascript:void(0);" onclick="cfnGoToGoodsList([[${brandGroupInfo.brandGroupNo}]],\'' + cate4.cateGb + '\',' + cate4.cate1No + ',' + cate4.cate2No + ',' + cate4.cate3No + ',' + cate4.cate4No + ');">' + cate4.cate4Nm + '</a></li>\n';
									});
									tag += '					</ul>\n';
								}
								tag += '				</li>\n';
							});
							tag += '			</ul>\n';
						}
						tag += '		</li>\n';
					});
				}
			}
		}
		return tag;
	}
	
	// 브랜드 카테고리 생성
	let fnCreateBrandCategory = function() {
		console.log('fnCreateBrandCategory brandNo::'+[[${brandGroupInfo.brandGroupNo}]]);
		$.getJSON('/display/brand/cate/list?brandGroupNo=' + [[${brandGroupInfo.brandGroupNo}]]
			, function(result, status) {
				if (status == 'success') {
					if (result.length > 0) {
						$('#ulGnbCate').html('');
						$.each(result, function(idx, item) {
							let gnbCate = fnGetGnbCategory(item);
							$('#ulGnbCate').append(gnbCate);
						});
					}
				}
			});
	}
	
	// GNB탭 생성
	let fnCreateGnbTab = function() {
		$.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.contentsType == 'L') { // 컨텐츠유형:링크
								$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
							}else{
								$('#ulGnbTab').append('<li><a href="' + item.linkUrl + '">' + item.gtabNm + '</a></li>');
							}
						});
					}
				}
			});
	}

	// 브랜드 추천상품
	let fnCreateRecommendGoods = function (){
		let tag = '';
		$.getJSON('/display/brand/gnb/tab/recommend/goods/list?brandGroupNo='+[[${brandGroupInfo.brandGroupNo}]]+'&cate1No=2100&contentsLoc=SBM003&cateGb=G032_102'
			, function(result, status){
				if(status == 'success'){
					var imgUrl = [[${@environment.getProperty('upload.goods.view')}]];
					var contentsLocVal = 'SBM003';
					if(result.length > 0){
						tag+='<div className="list">';
						tag+='	<ul className="clear event_con">';

						$.each(result, function (idx, item){
							if(idx<3){
								tag+='		<li>\n';
								tag+='			<div class="item_prod">\n';
								tag+='				<div class="item_state">\n';
								tag+='					<a href="javascript:void(0);" class=" itemLink" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\', \'\', \'\', \'' + contentsLocVal + '\');">\n';
								tag+='						<div class="itemPic">\n';
								tag+='						<img alt="BLACK-a" class=" vLHTC pd_img" src="'+imgUrl+'/'+item.sysImgNm+'">\n';
								tag+='						</div>\n';
								tag+='						<div class="itemName">'+item.goodsFullNm+'</div>\n';
								tag+='						<p class="itemPrice">'+item.currPrice.addComma();
								if(item.currPrice != item.listPrice){
									tag+='							<span class="itemPrice_original">'+item.listPrice.addComma()+'</span>\n';
								}
								tag+='						</p>\n';
								tag+='					</a>\n';
								tag+='				</div>\n';
								tag+='			</div>\n';
								tag+='		</li>\n';
							}
						});

						tag+='	</ul>';
						tag+='</div>';
					}
					$('#divGnbBrandBanner').append(tag);
				}
		});
	}

	$(document).ready(function() {
		//검색창 호출
		/* $(".common_search").load("sch_layer_pop.html"); */

		// GNB toggle
		$(document).on('mouseenter','.common_header.br_header .gnb .nav > ul > li',function(e){
			$(this).parents('.nav').find('.bundle > li > a').removeClass('active');
			$(this).children('a').addClass('active');
			if(!$(this).hasClass('has_depth')){
				$('.black_screen').hide();
				$('.common_header.br_header .gnb .depth_menu, .box_depth2, .box_depth3, .box_depth4').hide();
			} else if($(this).hasClass('has_depth')){
				$('.black_screen').show();
				$(this).find('.depth_menu').show();
				$(this).parents('ul').siblings('ul').find('li.has_depth .depth_menu').hide();
				$(this).siblings('li.has_depth').find('.depth_menu').hide();
			}
		}).on('mouseleave','.common_header.br_header .gnb',function(e){
			$(this).find('.bundle > li > a').removeClass('active');
			$('.black_screen').hide();
			$('.common_header.br_header .gnb .depth_menu, .box_depth2, .box_depth3, .box_depth4').hide();
		});

		// GNB 하위메뉴
		$(document).on('mouseenter','.common_header.br_header .maintabs li',function(e){
			if($(this).find('> ul').length > 0){
				$(this).addClass('on');
			}
			$(this).find('> ul').show();
			$(this).siblings('li').find('> ul').hide();
		});
		
		// 브랜드 카테고리 생성
		fnCreateBrandCategory();

		// 브랜드 추천상품 생성
		fnCreateRecommendGoods();
		
		// GNB탭 생성
		fnCreateGnbTab();
	});
/*]]>*/
</script>

</header>

</html>