<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : SearchLayerMob.html
 * @desc    : 검색 레이어 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.06.14   bin2107     최초 작성
 *******************************************************************************
 -->
<body>
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header htop">
			<h5 class="modal-title sr-only" id="schPopLabel">통합검색</h5>
		</div>
		<div class="modal-body">
			<section class="sch_result">
				<!-- 1.통합검색 default -->
				<div class="inner">
					<form id="searchMainForm" name="searchMainForm">
						<input type="hidden" name="brandGroupNo" th:value="${brandGroupNo}"/>
						<div class="sch_title">
							<input type="text" class="form_control" name="keyword" placeholder="검색어를 입력하세요." autocomplete="off" onkeyup="fnOnkeyupKeyword(this);">
							<button type="button" class="btn_x" id="deleteKeyword" style="display:none;">X</button>
							<button type="button" class="btn_sch" id="btnSearchKeyword"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_search.png'" alt=""></button>
						</div>
					</form>
				</div>

				<div class="inner default_box" id="defaultArea">
					<div class="filter-list">
						<div class="f_left">
							<h3>최근 검색어</h3>
						</div>
						<div class="f_right">
						</div>
					</div>
					<div class="search-list" th:classappend="${#lists.isEmpty(recentlyKeywordList)?'nodata':''}"> <!-- 검색데이터 없을시 nodata 클래스 추가. -->
						<ul>
							<li th:if="${recentlyKeywordList}" th:each="oneData, status : ${recentlyKeywordList}">
								<a href="javascript:void(0);" th:onclick="fnSearchKeyword([[${oneData}]])">
									<p th:text="${oneData}"></p>
								</a>
								<button type="button" class="xBtn" th:onclick="fnDeleteCookie(this,[[${oneData}]]);"><span>삭제</span></button>
							</li>
						</ul>
						<p class="nodata_txt" th:if="${#lists.isEmpty(recentlyKeywordList)}">최근 검색어가 없습니다.</p>
					</div>
					<h3 class="hot-key" th:if="${brandGroupNo==null}">STYLE24에서 검색되고 있어요</h3>
					<div class="related_keyword" th:if="${brandGroupNo==null}">
						<div class="sub_category">
							<div class="cate_wrap" id="popularKeyArea">
								<!--						<a href="javascript:;" class="on">전체</a>-->
							</div>
						</div>
					</div>
				</div>
				<!-- //1.통합검색 default -->

				<!-- 3.지금 많이 보고 있어요 상품. -->
				<div class="inner default_box" id="popularArea">
					<div class="now_view">
						<div class="store_product">
							<div class="allresult-tit">
								<h3>지금 많이 보고 있어요</h3>
								<button type="button" class="btn_refresh" onclick="fnRealtimeGoodsList();"><span th:text="${#calendars.format(#calendars.createNow(), 'HH:mm')}">17:30</span> 기준</button>
							</div>
							<div class="swiper-container sch_product">
								<div class="swiper-wrapper" id="itemViewArea">
									<th:block th:each="item, status : ${realtimeGoodsList}">
										<div class="swiper-slide">
											<div class="item_prod">
												<button type="button" class="itemLike" th:classappend="${item.wishCnt > 0}? 'likeit' : ''" onclick="cfnMoPutWishList(this);" th:attr="goodsCd=${item.itemId}">관심상품 추가</button>
												<a th:href="${item.itemUrl}">
													<img th:src="${item.imageUrl}" alt="">
													<div class="s-text">
														<div class="itemName" th:text="${item.itemName}"></div>
														<p class="itemTag" th:text="${item.count < 10 ? '10명 미만' : item.count + '명 보는중'}">508명 보는중</p>
													</div>
												</a>
											</div>
										</div>
									</th:block>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //3.지금 많이 보고 있어요 상품. -->

				<!-- 4.검색어 타이핑 -->
				<div class="inner searching_box" id="keyupArea" style="display:none;" th:if="${brandGroupNo==null}">
					<div class="filter-list store-list" id="brandStoreArea">
					</div>
					<div class="relative-list">
					</div>
				</div>
				<div class="inner searching_box" id="keyupCateArea" style="display:none;" th:if="${brandGroupNo==null}">
					<div class="sch_category">
					</div>
				</div>
				<div class="inner empty_box2" id="relateArea" style="display:none;">
					<div class="recommand_product">
						<div class="store_product">
							<div class="swiper-container recommand_slide">
								<h3>관련상품</h3>
								<div class="swiper-wrapper" id="relateItemArea">

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //4.검색어 타이핑 -->

				<!-- 3.검색결과 없을때 -->
				<div class="inner empty_box" id="noDataArea" style="display:none;">
					<div class="relative-list nodata"> <!-- 검색결과 없을 시 nodata 클래스 추가 -->
						<p class="nodata_txt">&lsquo;<span id="noDataKeyword"></span>&rsquo; 에 맞는 상품을 찾지 못했습니다.<br>검색어를 변경해 보세요.</p>
					</div>
					<h3 class="hot-key">STYLE24에서 검색되고 있어요</h3>
					<div class="related_keyword">
						<div class="sub_category">
							<div class="cate_wrap" id="noDataRelatedKeyword">

							</div>
						</div>
					</div>
				</div>
				<div class="inner empty_box" id="recommandArea" style="display:none;">
					<div class="recommand_product">
						<div class="store_product">
							<div class="swiper-container recommand_slide">
								<h3>이런 상품은 어떤가요?</h3>
								<div class="swiper-wrapper" id="recommendItemArea">

								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //3.검색결과 없을때 -->
			</section>
		</div>
	</div>
</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	var enterBool = false;
	var trendKeywordList = [[${trendKeywordList.trendList}]];

	var swiperschProduct = new Swiper('.swiper-container.sch_product', {
		slidesPerView: 3,
		spaceBetween: 6,
		autoplay: {
			delay: 4000,
		},
		freeMode: true,
		//centeredSlides: true,
	});


	var schProdLength = $('.sch_product .swiper-slide').length;
	if (schProdLength < 4) {
		var swiperschProduct = new Swiper('.swiper-container.sch_product', {
			slidesPerView: 3,
			spaceBetween: 6,
			autoplay: false,
			freeMode: false,
			loop:false,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
			},
		});
	} else {
		var swiperschProduct = new Swiper('.swiper-container.sch_product', {
			slidesPerView: 3,
			spaceBetween: 6,
			autoplay: {
				delay: 4000,
			},
			freeMode: true,
			loop:true,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
			},
		});
	};

	var schRecommendLength = $('.recommand_slide .swiper-slide').length;
	if (schRecommendLength < 3) {
		var swiperschProduct = new Swiper('.swiper-container.recommand_slide', {
			slidesPerView: 2.2,
			spaceBetween: 8,
			autoplay: false,
			freeMode: false,
			loop:false,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
			},
		});
	} else {
		var swiperschProduct = new Swiper('.swiper-container.recommand_slide', {
			slidesPerView: 2.2,
			spaceBetween: 8,
			autoplay: {
				delay: 4000,
			},
			freeMode: true,
			loop:true,
			a11y: {
				enabled: true,
				notificationClass: 'swiper-notification',
				firstSlideMessage: '첫번째 슬라이드 입니다',
				lastSlideMessage: '마지막 슬라이드 입니다',
			},
		});
	};

	$(".itemLike").click(function () {
		$(this).toggleClass("likeit");
	});

	var ckKeyword = "st24ck_today_keyword";
	var fnSetKeywordCookie = function(keyword) {
		var arrKeyword = new Array;
		var arrTempKeyword = new Array;
		var j = 0;

		arrKeyword = gagajf.getCookie(ckKeyword).split(",");

		if (arrKeyword.length > 0) {
			for (var i = 0; i < arrKeyword.length; i++) {
				// 쿠키에 없으면
				if (arrKeyword[i] != keyword && arrKeyword[i] != "") {
					arrTempKeyword[j++] = arrKeyword[i];
				}
			}

			arrTempKeyword[j++] = keyword;
		} else {
			gagajf.setCookie(ckKeyword, keyword, 1);
		}

		gagajf.setCookie(ckKeyword, arrTempKeyword, 1);
	}

	// 키워드 검색
	$('#btnSearchKeyword').on('click', function() {
		if (!gagajf.validation($('#searchMainForm'))) {
			return false;
		}

		// 검색결과 상품목록 호출(있으면 검색결과 페이지로 이동)
		gagajf.ajaxFormSubmit("/display/search/goods/list_cnt", document.searchMainForm, function(result) {
			if( "0" == result.response_cnt){
				$('.sch_result .default_box').hide();
				$('.sch_result .searching_box').hide();
				$('.sch_result .empty_box2').hide();
				$('.sch_result .empty_box').show();
				$("#noDataArea").find('#noDataKeyword').text($("#searchMainForm").find('input[name=keyword]').val());

				// 검색어 연관 상품 추천
				fnRecommendItemList($("#searchMainForm").find('input[name=keyword]').val());
				// 인기검색어
				fnTrendKeywordList();

			}else{
				let keyword = encodeURIComponent($('#searchMainForm input[name=keyword]').val());

				// 쿠키 세팅
				fnSetKeywordCookie(keyword);

				let actionUrl = _PAGE_SEARCH_GOODS + '?keyword=' + keyword + '&brandGroupNo=' + $('#searchMainForm input[name=brandGroupNo]').val();
				cfnGoToPage(actionUrl);
			}
		});
	});

	// 검색어 찾기
	var fnGetAutoSearch = function (){
		gagajf.ajaxFormSubmit("/display/search/auto/complete", document.searchMainForm, fnAutoCompleteList);
	}

	// 검색어 찾기 결과
	var fnAutoCompleteList = function (result){
		if( enterBool ) return;

		if(result.autoKeywords.length==0 && gagajf.isNull(result.brand.brandGroupNo) && result.cateList.length == 0 && gagajf.isNull(result.goodsList)){
			$('.sch_result .default_box').hide();
			$('.sch_result .searching_box').hide();

		}else{
			$('.sch_result .default_box').hide();
			$('.sch_result .searching_box').show();
			$('.sch_result .empty_box').hide();
			$('.sch_result .empty_box2').hide();
			// 자동완성 키워드
			if(result.autoKeywords != null && result.autoKeywords.length > 0){
				$("#keyupArea").find(".relative-list").html('');
				let tag = '';
				tag += '<ul>\n';
				$.each(result.autoKeywords, function (idx,item){
					tag += '<li>\n';
					tag += '	<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+result.autoKeywords[idx]+'\');">\n';
					tag += '		<p><span>'+result.autoKeywords[idx]+'</span></p>\n';
					tag += '	</a>\n';
					tag += '</li>\n';
				});
				tag += '</ul>\n';
				$("#keyupArea").find(".relative-list").append(tag);
			}else{
				$("#keyupArea").find(".relative-list").html('');
			}

			// 브랜드
			if(result.brand != null && !gagajf.isNull(result.brand.brandGroupNo)){
				$("#brandStoreArea").show();
				$("#keyupArea").find(".store-list").html('');
				let tag = '';
				tag += '<div class="f_left">\n';
				tag += '	<h3>'+result.brand.brandGroupNm+' 공식 스토어</h3>\n';
				tag += '</div>\n';
				tag += '<div class="f_right">\n';
				tag += '	<a href="javascript:void(0);" onclick="cfnGoToBrandMain('+result.brand.brandGroupNo+');">바로가기</a>\n';
				tag += '</div>\n';
				$("#keyupArea").find(".store-list").append(tag);
			}else{
				$("#keyupArea").find(".store-list").html('');
				$("#brandStoreArea").hide();
			}

			if(result.cateList != null && result.cateList.length > 0){
				$("#keyupCateArea").show();
				$("#keyupCateArea").find(".sch_category").html('');
				let tag = '';
				tag += '<h3>카테고리</h3>\n';
				tag += '<ul>\n';
				$.each(result.cateList, function (idx, item){
					tag +='<li>\n';
					tag +='	<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'G032_101\' ';
					if(item.cate1No != null){
						tag += ', '+item.cate1No;
					}
					if(item.cate2No != null){
						tag += ', '+item.cate2No;
					}
					if(item.cate3No != null){
						tag += ', '+item.cate3No;
					}
					if(item.cate4No != null){
						tag += ', '+item.cate4No;
					}
					if(item.cate5No != null){
						tag += ', '+item.cate5No;
					}
					tag += ');">\n';
					if(item.cate1Nm != null){
						tag += '		<span>'+item.cate1Nm+'</span>\n';
					}
					if(item.cate2Nm != null){
						tag += '		<span>'+item.cate2Nm+'</span>\n';
					}
					if(item.cate3Nm != null){
						tag += '		<span>'+item.cate3Nm+'</span>\n';
					}
					if(item.cate4Nm != null){
						tag += '		<span>'+item.cate4Nm+'</span>\n';
					}
					if(item.cate5Nm != null){
						tag += '		<span>'+item.cate5Nm+'</span>\n';
					}
					tag +='	</a>\n';
					tag +='</li>\n';
				});
				tag += '</ul>\n';

				$("#keyupCateArea").find(".sch_category").append(tag);
			}else{
				$("#keyupCateArea").find(".sch_category").html('');
				$("#keyupCateArea").hide();
			}

			if(!gagajf.isNull(result.goodsList)){
				$("#relateArea").show();
				$("#relateItemArea").html('');
				let tag = '';
				$.each(result.goodsList, function (idx, item){
					if(idx<5) {
						tag += '<div class="swiper-slide">\n';
						tag += '	<div class="item_prod">\n';
						tag += '		<div class="item_state">\n';
						tag += '		<button type="button" class="itemLike';
						if(item.likeIt == 'likeit'){
							tag += ' likeit';
						}
						tag += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.goodsCd+'">관심상품 추가</button>\n';
						//tag += '			<button type="button" class="itemLike">관심상품 추가</button>\n';
						tag += '			<a href="javascript:void(0);" class="itemLink" onclick="cfnGoToGoodsDetail(\'' + item.goodsCd + '\',\'' + item.colorCd + '\');">\n';
						tag += '				<div class="itemPic">\n';
						tag += '					<img class="vLHTC pd_img" src="'+item.sysImgNm+'" alt="">\n';
						tag += '				</div>\n';
						tag += '				<p class="itemBrand">'+item.brandGroupNm+'</p>\n';
						tag += '				<div class="itemName">'+item.goodsFullNm+'</div>\n';
						tag += '				<p class="itemPrice">\n';
						if(item.listPrice != item.currPrice) {
							tag += '			<span class="itemPrice_original">'+ item.listPrice.addComma() +'</span>\n';
						}
						tag += item.currPrice.addComma() ;
						if(item.listPrice != item.currPrice) {
							tag += '			<span class="itemPercent">' + Math.round((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100) + '%</span>\n';
						}
						tag += '				</p>\n';
						tag += '			</a>\n';
						tag += '		</div>\n';
						tag += '	</div>\n';
						tag += '</div>\n';
					}
				});
				$("#relateItemArea").html(tag);
				var swiperschProduct4 = new Swiper('.swiper-container.recommand_slide', {
					slidesPerView: 2.2,
					spaceBetween: 8,
					autoplay: {
						delay: 4000,
					},
					freeMode: true,
					//centeredSlides: true,
				});
			}else{
				$("#relateItemArea").html('');
				$("#relateArea").hide();
			}
		}
	}

	// 검색어 입력
	var fnOnkeyupKeyword = function (obj){
		if( 13 != event.keyCode){
			enterBool = false;
			var searchValue = $(obj).val();
			if(searchValue.length > 0){
				fnGetAutoSearch();
			}else{
				$('.sch_result .default_box').show();
				$('.sch_result .searching_box').hide();
				$('.sch_result .empty_box').hide();
				$('.sch_result .empty_box2').hide();
			}
		}else{
			// 엔터친 후, 그 전에 검색한 결과가 오고있으므로
			enterBool = true;
		}
	}

	document.getElementById("deleteKeyword").onclick = function (){
		$("#searchMainForm").find("input[name=keyword]").val('');
		fnOnkeyupKeyword($("#searchMainForm").find("input[name=keyword]"));
	}

	$(document).ready( function() {
		if (trendKeywordList.length > 0) {
			$("#popularKeyArea").html('');

			trendKeywordList.forEach(function (item, idx) {
				if(item.keyword.indexOf("테스트") < 0){
					var tag = '';
					if (idx < 10) {
						tag += '	<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');">'+ item.keyword +'</a>';
					}
					$("#popularKeyArea").append(tag);
				}
			});
		}else{
			$("#popularKeyArea").html('');
		}

		$("#keyupArea").hide();
		$("#keyupCateArea").hide();
		$("#deleteKeyword").hide();
		$("#noDataArea").hide();
		$("#recommandArea").hide();
		$("#relateArea").hide();
	});

	// 선택 단어 검색
	var fnSearchKeyword = function (obj){
		$("#searchMainForm").find("input[name=keyword]").val(obj);
		$('#btnSearchKeyword').trigger('click');
	}

	// 선택 단어 삭제
	var fnDeleteCookie = function (obj, keyword){
		$(obj).closest('li').remove();
		gagajf.setCookie('st24ck_today_keyword',keyword, -1);
	}

	// 검색어 입력 후 엔터키
	$('#searchMainForm input[name=keyword]').keypress(function (event) {
		if (event.which === 13) {
			event.preventDefault();
			$('#btnSearchKeyword').trigger('click');
		}
	});

	// 인기검색어 조회
	var fnTrendKeywordList = function (){
		$("#noDataRelatedKeyword").html('');
		var html = '';
		$.getJSON('/display/search/trend/keyword/list', function (result){
			if(result.trendList.length > 0){
				$.each(result.trendList, function (idx, item){
					html += '<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');"><span>#</span>'+item.keyword+'</a>';
				});
			}
			$("#noDataRelatedKeyword").append(html);
		});
	}

	// 실시간 상품 새로고침
	var fnRealtimeGoodsList = function (){
		$("#itemViewArea").html('');
		var html = '';

		$.getJSON('/display/realtime/goods/list', function (result){
			// console.log(result);
			if(result.length > 0){
				$.each(result, function (idx, item){
					html += '<div class="swiper-slide">\n';
					html += '	<div class="item_prod">\n';
					html += '		<button type="button" class="itemLike';
					if(item.wishCnt > 0){
						html += ' likeit';
					}
					html += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.itemId+'">관심상품 추가</button>\n';
					html += '		<a href="'+item.itemUrl+'">\n';
					html += '			<img src="'+item.imageUrl+'" alt="">\n';
					html += '				<div class="s-text">\n';
					html += '					<div class="itemName">'+item.itemName+'</div>\n';
					if(item.count < 10){
						html += '			<p class="itemTag">10명 미만</p>\n';
					}else{
						html += '			<p class="itemTag">'+item.count.addComma()+'명 보는중</p>\n';
					}
					html += '				</div>\n';
					html += '		</a>\n';
					html += '	</div>\n';
					html += '</div>\n';
				});
			}
			$("#itemViewArea").append(html);

			var swiperschProduct2 = new Swiper('.swiper-container.sch_product', {
				slidesPerView: 3,
				spaceBetween: 7,
				autoplay: {
					delay: 4000,
				},
				freeMode: true,
				//centeredSlides: true,
			});
		});
	}

	// 검색어 연관 상품 추천
	var fnRecommendItemList = function (keyword){
		if(gagajf.isNull(keyword)){
			keyword = "";
		}
		var data = {keyword : keyword.trim()};
		var html = '';

		$.getJSON('/display/recommend/item/list', data, function (result){
			$("#recommendItemArea").html('');
			$("#recommandArea").show();

			if(result.length > 0){
				$.each(result, function (idx, item){
					html += '<div class="swiper-slide">\n';
					html += '	<div class="item_prod">\n';
					html += '		<div class="item_state">\n';
					html += '		<button type="button" class="itemLike';
					if(item.product.wishCnt > 0){
						html += ' likeit';
					}
					html += '" onclick="cfnMoPutWishList(this);" goodsCd="'+item.product.itemId+'">관심상품 추가</button>\n';
					//html += '			<button type="button" class="itemLike">관심상품 추가</button>\n';
					html += '			<a href="'+item.product.itemUrl+'" class="itemLink">\n';
					html += '				<div class="itemPic">\n';
					html += '					<img class="vLHTC pd_img" src="'+item.product.itemImage+'" alt="">\n';
					html += '				</div>\n';
					html += '				<p class="itemBrand">'+item.product.brandName+'</p>\n';
					html += '				<div class="itemName">'+item.product.itemName+'</div>\n';
					html += '				<p class="itemPrice">\n';
					if(item.product.salePrice < item.product.originalPrice) {
						html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
					}
					html += item.product.salePrice.addComma() ;
					if(item.product.salePrice < item.product.originalPrice) {
						html += '			<span class="itemPercent">' + Math.round((item.product.originalPrice - item.product.salePrice) / (item.product.originalPrice * 1.0) * 100) + '%</span>\n';
					}
					html += '				</p>\n';
					html += '			</a>\n';
					html += '		</div>\n';
					html += '	</div>\n';
					html += '</div>\n';
				});

				$("#recommendItemArea").append(html);

				var swiperschProduct3 = new Swiper('.swiper-container.recommand_slide', {
					slidesPerView: 2.2,
					spaceBetween: 8,
					autoplay: {
						delay: 4000,
					},
					freeMode: true,
					//centeredSlides: true,
				});

			}else{
				$("#recommendItemArea").html('');
				$("#recommandArea").hide();
			}
		});
	}
	/*]]>*/
</script>

</body>
</html>
