<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  layout:decorator="web/common/layout/BrandLayoutWeb">
<!--
 *******************************************************************************
 * @source  : SearchGoodsListFormWeb.html
 * @desc    : 검색상품 목록 화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.31   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container sch">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a th:href="|javascript:cfnGoToBrandMain('${params.brandGroupNo}')|">홈</a></li>
				<li class="bread_2depth">검색결과</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content sch_result brand"> <!-- 페이지특정 클래스 = sch_result -->
				<div class="cont_head">
					<h2 class="sr-only">검색결과</h2>
					<div class="area_info">
						<div class="inner_search">
							<form id="InnerSearchForm" name="InnerSearchForm">
								<input type="hidden" name="brandGroupNo" th:value="${params.brandGroupNo}">
								<fieldset>
									<legend>결과 내 재검색</legend>
									<input type="text" id="keyword" name="keyword" th:value="${params.keyword}" placeholder="" class="form_control search_input" title="검색어 입력" maxlength="100" autocomplete="off">
									<button type="button" class="sch_btn" onclick="fnSearchData();"><span>검색</span></button>
								</fieldset>
							</form>
							<div class="autokeyword">
								<h3 class="sr-only">자동완성 검색어</h3>
								<ul class="autokeywordUl">
<!--									<li><a href=""><em>가</em>을컬리수</a></li>-->
<!--									<li><a href=""><em>가</em>드상하</a></li>-->
<!--									<li><a href=""><em>가</em>죽자켓</a></li>-->
<!--									<li><a href=""><em>가</em>죽밸트</a></li>-->
<!--									<li><a href=""><em>가</em>운</a></li>-->
<!--									<li><a href=""><em>가</em>을</a></li>-->
<!--									<li><a href=""><em>가</em>디건</a></li>-->
<!--									<li><a href=""><em>가</em>디건형니트</a></li>-->
<!--									<li><a href=""><em>가</em>드밴드레깅스</a></li>-->
<!--									<li><a href=""><em>가</em>을잠옷</a></li>-->
								</ul>
							</div>
						</div>
						<div class="related_keyword">
							<span class="title">연관검색어</span>
							<ul class="relKeyword" id="recommendKeyword">

							</ul>
						</div>
					</div>
					<!-- 결과내 재검색 결과 없을 시 노출 -->
					<div class="nodata" style="display: none;">
						<div class="txt_box">
							<p>
								<span>‘티비제이 제기장 스웨터’</span> 에 대한<br>
								검색결과가 없습니다.
							</p>
						</div>
						<div class="btn_box">
							<button class="btn btn_default"><span>돌아가기</span></button>
						</div>
					</div>
					<!-- //결과내 재검색 결과 없을 시 노출 -->
					<div class="taps" style="display:none;">
						<div>
							<ul>
								<li class="active"><a href="javascript:void(0);">상품<span id="prodListCnt"></span></a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="cont_body">
					<!-- 검색결과 : 상품 -->
					<div class="sch_result_cont" style="display:block;">
						<!-- 통합 상품 검색결과 없을 시 노출 -->
						<div class="nodata" id="goodsNodata" style="display:none;">
							<div class="txt_box">
								<p>
									‘<span id="goodsKeyword"></span>’ 에 대한 상품 검색결과가 없습니다.
								</p>
							</div>
						</div>
						<!-- //통합 상품 검색결과 없을 시 노출 -->
						<!-- 추천상품 노출 -->
						<div class="sch_recommend" id="recomArea">
							<h3>이런 상품은 어떤가요?</h3>
							<div class="itemsGrp" id="recommendItemArea">

							</div>
						</div>
						<!-- //추천상품 노출 -->
						<!-- lnb -->
						<div class="lnb">
							<div class="lnb_tit">
								<h3>카테고리</h3>
							</div>
							<div class="lnb_category">
								<ul class="category" id="ulAllCate">
									<li><a href="javascript:void(0);" id="cateAll" onclick="fnResetListIdx();fnSetSearchCate(this, 'off');" class="on">전체</a></li>
								</ul>
							</div>
						</div>
						<!-- //lnb -->
						<!-- cont -->
						<div class="cont">
							<form id="filterForm">
							<div class="sec_body">
								<div class="area_filter">
									<div class="filter_list">
										<!-- 1depth -->
										<ul>
											<li data-id="tap02" th:if="${filterBrandList != null and !filterBrandList.empty}">
												<a href="javascript:void(0)">브랜드</a>
											</li>
											<li data-id="tap03" th:if="${filterSizeList != null and !filterSizeList.empty}">
												<a href="javascript:void(0)">사이즈</a>
											</li>
											<li data-id="tap04" th:if="${filterPriceList != null and !filterPriceList.empty}">
												<a href="javascript:void(0)">가격</a>
											</li>
											<li data-id="tap05">
												<a href="javascript:void(0)">할인율</a>
											</li>
											<li data-id="tap06" th:if="${filterAgeList != null and !filterAgeList.empty}">
												<a href="javascript:void(0)">연령</a>
											</li>
											<li data-id="tap07" th:if="${filterSeasonList != null and !filterSeasonList.empty}">
												<a href="javascript:void(0)">시즌</a>
											</li>
											<li data-id="tap08" th:if="${filterColorList != null and !filterColorList.empty}">
												<a href="javascript:void(0)">컬러</a>
											</li>
											<li data-id="tap09" th:if="${filterBenefitList != null and !filterBenefitList.empty}">
												<a href="javascript:void(0)">혜택</a>
											</li>
										</ul>
										<div class="form_field">
											<div>
												<input id="unisex" type="checkbox" onclick="fnResetListIdx();fnFilterOption(this,'on');"><label for="unisex"> <span>남여 공용만 보기</span> </label>
											</div>
											<div>
												<input id="newGoods" type="checkbox" onclick="fnResetListIdx();fnFilterOption(this,'on');"><label for="newGoods"> <span>신상품만 보기</span> </label>
											</div>
										</div>
									</div>
									<div class="filter_content">
										<!-- 브랜드 -->
										<div class="sort tap02" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
											<ul>
												<th:block th:each="oneData, status : ${filterBrandList}">
													<li>
														<label class="brand_btn" >
															<input type="checkbox" group="filterValue" th:id="${'chkFilterBrand' + status.index}" name="brandGroup" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();filterSel(this,'brandGroup','off');"><span th:text="${oneData.filterNm}"></span>
														</label>
													</li>
												</th:block>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //브랜드 -->
										<!-- 사이즈 -->
										<div class="sort tap03" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
											<ul>
												<li id="sizeLi1">
													<strong>상의</strong>
													<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'T')}">
														<label class="size_btn">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterTSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="1" onclick="fnResetListIdx();filterSel(this,'size','off','1');"><span th:text="${oneData.filterNm}">80</span>
														</label>
													</th:block>
												</li>
												<li id="sizeLi2">
													<strong>하의</strong>
													<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'B')}">
														<label class="size_btn">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterBSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="2" onclick="fnResetListIdx();filterSel(this,'size','off','2');"><span th:text="${oneData.filterNm}">80</span>
														</label>
													</th:block>
												</li>
												<li id="sizeLi3">
													<strong>신발</strong>
													<th:block th:each="oneData, status : ${filterSizeList}" th:if="${#strings.startsWith(oneData.filterCd,'S')}">
														<label class="size_btn">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterSSize' + status.index}" name="size" th:vale="${oneData.filterNm}" th:data-id="${oneData.filterNm}" data-idx="3" onclick="fnResetListIdx();filterSel(this,'size','off','3');"><span th:text="${oneData.filterNm}">80</span>
														</label>
													</th:block>
												</li>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //사이즈 -->
										<!-- 가격 -->
										<div class="sort tap04" id="priceFilterDiv">
											<div class="range">
												<input type="text" class="js-range-slider01" name="" value="" />
												<input type="hidden" id="price_input_from" name="price_input_from" value=""/>
												<input type="hidden" id="price_input_to" name="price_input_to" value=""/>
												<input type="hidden" id="hPriceFrom" name="hPriceFrom" value=""/>
												<input type="hidden" id="hPriceTo" name="hPriceTo" value=""/>
											</div>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //가격 -->
										<!-- 할인율 -->
										<div class="sort tap05" id="dcrateFilterDiv">
											<ul style="display:none;">
												<li><input type="checkbox" id="percent01" name="range" value="0"><label for="percent01"><span></span><span>0%</span></label></li>
												<li><input type="checkbox" id="percent02" name="range" value="10"><label for="percent02"><span></span><span>10%</span></label></li>
												<li><input type="checkbox" id="percent03" name="range" value="20"><label for="percent03"><span></span><span>20%</span></label></li>
												<li><input type="checkbox" id="percent04" name="range" value="30"><label for="percent04"><span></span><span>30%</span></label></li>
												<li><input type="checkbox" id="percent05" name="range" value="40"><label for="percent05"><span></span><span>40%</span></label></li>
												<li><input type="checkbox" id="percent06" name="range" value="50"><label for="percent06"><span></span><span>50%</span></label></li>
												<li><input type="checkbox" id="percent07" name="range" value="60"><label for="percent07"><span></span><span>60%</span></label></li>
												<li><input type="checkbox" id="percent08" name="range" value="70"><label for="percent08"><span></span><span>70%</span></label></li>
												<li><input type="checkbox" id="percent09" name="range" value="80"><label for="percent09"><span></span><span>80%</span></label></li>
												<li><input type="checkbox" id="percent10" name="range" value="100"><label for="percent10"><span></span><span>100%</span></label></li>
											</ul>
											<div class="range">
												<input type="text" class="js-range-slider02" name="" value="" />
												<input type="hidden" id="dcrate_input_from" name="dcrate_input_from" value=""/>
												<input type="hidden" id="dcrate_input_to" name="dcrate_input_to" value=""/>
												<input type="hidden" id="hDcRateFrom" name="hDcRateFrom" value=""/>
												<input type="hidden" id="hDcRateTo" name="hDcRateTo" value=""/>
											</div>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //할인율 -->
										<!-- 연령 -->
										<div class="sort tap06" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
											<ul>
												<th:block th:each="oneData, status : ${filterAgeList}">
													<li>
														<label class="Age_btn">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();filterSel(this,'age','off');"><span th:text="${oneData.filterNm}">베이비(0~18개월)</span>
														</label>
													</li>
												</th:block>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //연령 -->
										<!-- 시즌 -->
										<div class="sort tap07" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
											<ul>
												<th:block th:each="oneData, status : ${filterSeasonList}">
													<li>
														<label class="Season_btn">
															<input type="checkbox" group="filterValue"  th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();filterSel(this,'season','off');"><span th:text="${oneData.filterNm}">봄</span>
														</label>
													</li>
												</th:block>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //시즌 -->
										<!-- 컬러 -->
										<div class="sort tap08" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
											<ul>
												<th:block th:each="oneData, status : ${filterColorList}">
													<li>
														<label class="color-check">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterColor' + status.index}" name="color" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm.replace('#','')}" onclick="fnResetListIdx();filterSel(this,'color','off');">
															<span class="pdColor-color" th:if="${oneData.filterNm=='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm+';'+' border:1px solid #aaa;'}" th:value="${oneData.filterCd}"></span>
															<span class="pdColor-color" th:if="${oneData.filterNm!='#FFFFFF'}" th:style="${'background-color:'+oneData.filterNm}" th:value="${oneData.filterCd}"></span>
														</label>
													</li>
												</th:block>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //컬러 -->
										<!-- 혜택 -->
										<div class="sort tap09" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
											<ul>
												<th:block th:each="oneData, status : ${filterBenefitList}">
													<li>
														<label class="Benefits_btn">
															<input type="checkbox" group="filterValue" th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}+':'+${oneData.filterNm}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();filterSel(this,'benefit','off');"><span th:text="${oneData.filterNm}"></span>
														</label>
													</li>
												</th:block>
											</ul>
											<a href="javascript:void(0)" class="tap_close">delete-btn</a>
										</div>
										<!-- //혜택 -->
										<!-- 필터 -->
										<div class="fillter">
											<div class="fillter_box" id="filterData">
<!--												<span>-->
<!--													모이몰른-->
<!--													<a href="javascript:;" class="filter_delete"></a >-->
<!--												</span>-->
											</div>
											<button type="button" class="fillter_reset" onclick="fnFilterReset('brandSearch');"><span>전체 초기화</span></button>
										</div>
										<!-- //필터 -->
									</div>
								</div>
								<!-- 210706_ 수정 : 배너 가이드 퍼블리싱 수정. -->
								<!-- 210706_ 변경 : 배너 위치 이동. -->
								<div class="banner" id="adBannerArea">

								</div>
								<div class="area_list">
									<!-- 검색필터 결과 상품 노출 -->
									<div class="count_wrap">
										<div>
											<p><span id="totCntId"></span>개의 상품</p>
										</div>
										<div>
											<ul id="sortArea">
												<li>
													<a href="javascript:void(0);" id="sortingNEW" class="on" onclick="fnSortingChange(this,'NEW');">최신상품순</a>
												</li>
												<li>
													<a href="javascript:void(0);" id="sortingBEST" onclick="fnSortingChange(this,'BEST');">인기상품순</a>
												</li>
												<li>
													<a href="javascript:void(0);" id="sortingREVIEW" onclick="fnSortingChange(this,'REVIEW');">리뷰 많은순</a>
												</li>
											</ul>
										</div>
									</div>
									<div id="infiniteContainer" class="sch_result_items">
										<div id="listBoxOuter" class="itemsGrp">
											<ul class="productlist quarter" id="listBox">
											</ul>
										</div>
									</div>
									<!-- //검색필터 결과 상품 노출 -->
									<!-- 검색필터 결과 없을 시 노출 -->
									<div class="nodata" id="noFilterData" style="display:none;">
										<div class="txt_box">
											<p>
												선택하신 조건에 맞는 상품이 없습니다. <br>
												필터를 다시 선택하신 후 다시 검색해 보세요!
											</p>
										</div>
										<div class="btn_box">
											<button type="button" class="btn btn_default" onclick="fnFilterReset('brandSearch');"><span>초기화</span></button>
										</div>
									</div>
									<!-- //검색필터 결과 없을 시 노출 -->
								</div>
								<div class="last_page" id="endPage" style="display:none;">
									<span>마지막 페이지입니다.</span>
								</div>
							</div>
							</form>
						</div>
						<!-- //cont -->
					</div>
					<!-- //검색결과 : 상품 -->
				</div>
			</div>
		</div>
	</div>

	<form id="searchGoodsForm" name="searchGoodsForm">
		<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="50"/>
		<input type="hidden" name="keyword" th:value="${params.keyword}"/>
		<input type="hidden" name="sortingType" value="NEW"/>
		<input type="hidden" name="brandGroupNo" th:value="${params.brandGroupNo}"/>
	</form>

	<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
	<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
	<script th:src="@{'/biz/search.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/search.js"></script>

	<script th:inline="javascript">
		var adBannerList = [[${adBannerList}]];
		var adBannerTag = '';
		var filterPriceList = [[${filterPriceList}]];
		var custom_values = [];
		// 상품리스트 페이지 확인용
		var listIdx = 1;

		var fnSearchGoodsListSearch = function (){
			gagaInfiniteScroll.getHistory();
		}

		var totalCnt = 0;

		// 상품 검색
		var fnGetInfiniteScrollDataList = function (pageNum) {
			$("#searchGoodsForm input[name=pageNo]").val(pageNum + 1);
			// if(idx==1 || totalCnt > Number($("#searchGoodsForm").find("input[name=pageSize]").val())){
			// 	idx++;
				gagajf.ajaxFormSubmit("/display/search/goods/list", document.searchGoodsForm, gagaInfiniteScroll.jsonToHtml);
			// }
		}

		var fnDrawInfiniteScrollData = function (result){
			totalCnt = result.paging.totalCount;
			$("#totCntId").text(totalCnt.addComma());
			$("#prodListCnt").text('('+totalCnt.addComma()+')');
			gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
			var ithrCd = '';
			var contentLoc = '';
			let dataListLen = 0;

			// 연관 검색어
			if(result.recommendList != null){
				var recommedTag = '';
				$("#recommendKeyword").html('');
				$.each(result.recommendList, function (idx,item){
					recommedTag += '<li><a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');">'+item.keyword+'</a></li>\n';
				});
				$("#recommendKeyword").html(recommedTag);
			}

			// 상품 리스트
			if(result.dataList != null){
				dataListLen = result.dataList.length-1;
			}

			if(dataListLen > 0){
				$('#noFilterData').hide();
				$('#endPage').hide();
				$('#goodsNodata').hide();
				$('#goodsKeyword').text('');
				$('.cont_body .lnb').show();
				$('.cont_body .cont').show();
				$('.cont .count_wrap').show();
				var goodsUrl = [[${@environment.getProperty('upload.goods.view')}]];
				let lastPage = result.paging.pageNo;
				let endRow = result.paging.endRow - result.paging.pageSize;
				var keyWord = $("#InnerSearchForm").find("input[name=keyword]").val();
				var htm = fnCreateGoodsList(result, ithrCd, contentLoc, goodsUrl, lastPage, endRow,'',keyWord);
				gagaInfiniteScroll.draw(htm);
				listIdx++;
				//fnImgOnoff();
			}else{
				// console.log('idx:::'+idx);
				if(listIdx > 1){ // 데이터가 1건 이상
					if(totalCnt > Number($("#searchGoodsForm").find("input[name=pageSize]").val())){
						if($("#searchGoodsForm input[name=pageNo]").val()==1){
							// 필터 값으로 조회 데이터 없을때
							$('#noFilterData').show();
							$('.cont .count_wrap').hide();
							$('#endPage').hide();
						}else{
							// 마지막 페이지 일때
							$('#endPage').show();
							$('#noFilterData').hide();
						}
					}else{
						if($("#searchGoodsForm input[name=pageNo]").val()==1){
							// 필터 값으로 조회 데이터 없을때
							$('#noFilterData').show();
							$('.cont .count_wrap').hide();
							$('#endPage').hide();
						}
					}
				}else{
					$('#goodsNodata').show();
					$('#goodsKeyword').text([[${params.keyword}]]);
					$('.cont_body .lnb').hide();
					$('.cont_body .cont').hide();
				}
				gagaInfiniteScroll.draw('not');
			}

		}

		$(window).on("pageshow", function(event) {
			$('#filterForm input[name=brandGroup]:checked').each(function(){
				let filterGb = 'brandGroup';
				$(this).attr('onclick','fnResetListIdx();filterSel(this,\''+filterGb+'\',\'on\');');
				$(this).parent().addClass("active");
			});
			$('#filterForm input[name=size]:checked').each(function(){
				let filterGb = 'size';
				let rowNum = $(this).attr('data-idx');
				$(this).attr('onclick','fnResetListIdx();filterSel(this,\''+filterGb+'\',\'on\',\''+rowNum+'\');');
				$(this).parent().addClass("active");
			});
			$('#filterForm input[name=season]:checked').each(function(){
				let filterGb = 'season';
				$(this).attr('onclick','fnResetListIdx();filterSel(this,\''+filterGb+'\',\'on\');');
				$(this).parent().addClass("active");
			});
			$('#filterForm input[name=color]:checked').each(function(){
				let filterGb = 'color';
				$(this).attr('onclick','fnResetListIdx();filterSel(this,\''+filterGb+'\',\'on\');');
				$(this).parent().addClass("active");
			});
			$('#filterForm input[name=benefit]:checked').each(function(){
				let filterGb = 'benefit';
				$(this).attr('onclick','fnResetListIdx();filterSel(this,\''+filterGb+'\',\'on\');');
				$(this).parent().addClass("active");
			});

			//할인율
			custom_values02 = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
			var my_from02 = custom_values02.indexOf('0%');
			var my_to02 = custom_values02.indexOf('100%');
			if(gagajf.isNull($('#searchGoodsForm').find("input[name=dcRateFrom]").val())){
				my_from02 = $('#searchGoodsForm').find("input[name=dcRateFrom]").val();
			}
			if(gagajf.isNull($('#searchGoodsForm').find("input[name=dcRateTo]").val())){
				my_to02 = $('#searchGoodsForm').find("input[name=dcRateTo]").val();
			}

			$(".dp .js-range-slider02, .sch_result .js-range-slider02").ionRangeSlider({
				type: "double",
				min: 0,
				max: 100,
				from: my_from02,
				to: my_to02,
				grid: true,
				skin: "round",
				postfix: "%",
				prettify_separator: ",",
				values: custom_values02,
				min_interval: 1,
				onFinish : function (data){
					fnResetListIdx();
					fnCheckDcRate(data);
				}
			});

			if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
				var historyData = sessionStorage.getItem(document.location.href);
				// console.log('historyData>>'+historyData);
				if(historyData!=null){
					historyData = JSON.parse(historyData);
				}else{
					historyData = {};
				}
				if(typeof historyData.sortingTypeNm!='undefined' && historyData.sortingTypeNm!=''){
					$(".arrayWrap .btn").text(historyData.sortingTypeNm);
				}
				if(typeof historyData.filterHtml!='undefined' && historyData.filterHtml!=''){
					// console.log('filterHtml>>'+historyData.filterHtml);
					$("#searchGoodsForm").append(historyData.filterHtml);
					filterHtml = historyData.filterHtml;
				}
				if(typeof historyData.filterStatHtml!='undefined' && historyData.filterStatHtml!=''){
					// console.log('filterStatHtml>>'+historyData.filterStatHtml);
					$("#filterData").append(historyData.filterStatHtml);
					filterStatHtml = historyData.filterStatHtml;
				}
				if(typeof historyData.totalCount!='undefined' && historyData.totalCount!=''){
					$("#totCntId").text(historyData.totalCount.addComma());
				}
				if(!gagajf.isNull($("#searchGoodsForm").find('input[name=priceArr]').val())){
					let tempPrice = $("#searchGoodsForm").find('input[name=priceArr]').val();
					let temp  = tempPrice.split(",");
					$("#filterForm").find('input[name=hPriceFrom]').val(temp[0]);
					$("#filterForm").find('input[name=hPriceTo]').val(temp[1]);
				}

				if(typeof historyData.sortingType!='undefined' && historyData.sortingType!=''){
					$("#searchGoodsForm input:hidden[name=sortingType]").val(historyData.sortingType);
					fnSortingChange(this,historyData.sortingType,'back');
					$(".fillter").show();
				}else{
					listIdx++;
					$(".fillter").show();
					fnSearchGoodsListSearch();
					fnSetPriceFilter();
					fnImgOnoff();
				}
			}else{
				fnCategoryGoodsInfiniteScrollInit();
				fnSearchGoodsListSearch();
			}
		});

		var fnSetPriceFilter = function (){
			if(!gagajf.isNull(filterPriceList)){
				let min = 0;
				let max = 5;
				let priceFrom = '';
				let priceTo = '';
				if(!gagajf.isNull($("#filterForm").find("input:hidden[name=hPriceFrom]").val())){
					priceFrom = $("#filterForm").find("input:hidden[name=hPriceFrom]").val().replaceAll(',','');
				}
				if(!gagajf.isNull($("#filterForm").find("input:hidden[name=hPriceTo]").val())){
					priceTo = $("#filterForm").find("input:hidden[name=hPriceTo]").val().replaceAll(',','');
				}
				// console.log('priceFrom>>'+priceFrom);
				// console.log('priceTo>>'+priceTo);
				$.each(filterPriceList, function (priceIdx, priceItem){
					custom_values[priceIdx] = priceItem.filterNm;
					// console.log('custom_values[priceIdx]>>'+custom_values[priceIdx])
					if(custom_values[priceIdx] == priceFrom){
						min = priceIdx;
					}
					if(custom_values[priceIdx] == priceTo){
						max = priceIdx;
					}
				});
				fnFilterSliderMove(min,max);
			}
		}

		$(document).ready( function() {
			// 검색어 연관 상품 추천
			fnRecommendItemList([[${params.keyword}]]);

			// 광고배너체크
			if(!gagajf.isNull(adBannerList) && adBannerList.length>0){
				var imgUrl = [[${@environment.getProperty('upload.image.view')}]];
				$.each(adBannerList, function (idx,item){
					adBannerTag += '	<a href="'+item.strVar1+'">\n';
					adBannerTag += '		<div class="bnnbox">\n';
					adBannerTag += '			<div class="txtWrap">\n';
					adBannerTag += '				<p>'+item.strTitle1+'</p>\n';
					adBannerTag += '			</div>\n';
					adBannerTag += '			<img src="'+imgUrl+item.imgPath1+'" width="100%" alt="">\n';
					adBannerTag += '		</div>\n';
					adBannerTag += '	</a>\n';
				});
				$("#adBannerArea").append(adBannerTag);
			}else{
				$("#adBannerArea").remove();
			}

			let priceLen;
			// console.log(filterPriceList);
			if(!gagajf.isNull(filterPriceList)){
				priceLen = filterPriceList.length-1;
				$.each(filterPriceList, function (priceIdx, priceItem){
					custom_values[priceIdx] = priceItem.filterNm;
					if(priceLen==0){
						custom_values[1] = priceItem.filterNm;
					}
				});
				let my_from;
				let my_to;
				if(filterPriceList.length > 1){
					my_from = custom_values.indexOf(custom_values[0]);
					my_to = custom_values.indexOf(custom_values[priceLen]);
				}else{
					my_from = 0;
					my_to = 1;
				}

				if(!gagajf.isNull($("#filterForm input:hidden[name=hPriceFrom]").val())){
					my_from = $("#filterForm input:hidden[name=hPriceFrom]").val();
				}
				if(!gagajf.isNull($("#filterForm input:hidden[name=hPriceTo]").val())){
					my_to = $("#filterForm input:hidden[name=hPriceTo]").val();
				}
				let minValue;
				let maxValue;
				if(filterPriceList.length > 1){
					minValue = custom_values[0];
					maxValue = custom_values[priceLen];
				}else{
					minValue = custom_values[0];
					maxValue = custom_values[1];
				}

				$(".dp .js-range-slider01, .sch_result .js-range-slider01").ionRangeSlider({
					type: "double",
					min: minValue,
					max: maxValue,
					from: my_from,
					to: my_to,
					grid: true,
					skin: "round",
					postfix: "원",
					prettify_separator: ",",
					values: custom_values,
					min_interval: 1,
					// onStart : function(data){
					//  	fnCheckPrice(data);
					// },
					// onChange : fnCheckPrice,
					onFinish : function(data,priceLen){
						fnResetListIdx();
						fnCheckPrice(data,priceLen);
					}
				});
			}

			fnCreateSearchCategoryList();
			// fnCreateSearchFilter();

			if ($('#sizeLi1').find('label').length == 0) $('#sizeLi1').hide();
			if ($('#sizeLi2').find('label').length == 0) $('#sizeLi2').hide();
			if ($('#sizeLi3').find('label').length == 0) $('#sizeLi3').hide();

			//결과내 재 검색 - 검색어 입력 시
			$(document).on('keyup','.sch_result .area_info .inner_search input',function(e){
				var reSearchValue = $(this).val();
				if(reSearchValue.length > 0) {
					$('.inner_search .autokeyword').show();
					fnGetAutoSearch();
				} else if (reSearchValue.length == 0) {
					$('.inner_search .autokeyword').hide();
				}
			});

			//가격 슬라이드
			// var custom_values = ['9,000원', '230,000원', '487,000원', '700,000원', '1,360,000원', '1,799,000원'];
			// var my_from = custom_values.indexOf('9,000원');
			// var my_to = custom_values.indexOf('230,000원');
			// $(".dp .js-range-slider01, .sch_result .js-range-slider01").ionRangeSlider({
			// 	type: "double",
			// 	min: 9000,
			// 	max: 1799000,
			// 	from: my_from,
			// 	to: my_to,
			// 	grid: true,
			// 	skin: "round",
			// 	postfix: "원",
			// 	prettify_separator: ",",
			// 	values: custom_values
			// });

			//할인율
			/*var custom_values02 = ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'];
			var my_from02 = custom_values02.indexOf('0%');
			var my_to02 = custom_values02.indexOf('10%');
			$(".dp .js-range-slider02, .sch_result .js-range-slider02").ionRangeSlider({
				type: "double",
				min: 0,
				max: 100,
				from: my_from02,
				to: my_to02,
				grid: true,
				skin: "round",
				postfix: "%",
				prettify_separator: ",",
				values: custom_values02
			});*/

			$(document).on('click','.lnb .lnb_category ul li a',function(e){
				$(this).toggleClass('on');
			});

			//fnGetInfiniteScrollDataList(1);
			//검색결과 탭
			$(document).on('click','.sch_result .taps ul li',function(e){
				$(this).addClass('active').siblings().removeClass('active');
				$('.sch_result .sch_result_cont').hide();
				$('.sch_result .sch_result_cont').eq($(this).index()).show();
				return false;
			});
		});

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

		// 검색어 찾기 결과
		var fnAutoCompleteList = function (result){
			if(result.autoKeywords.length==0 && result.brand == null && result.cateList == null && result.goodsList ==null) {
				$('.inner_search .autokeyword').hide();
			}else{
				// 자동완성 키워드
				if(result.autoKeywords != null && result.autoKeywords.length > 0){
					$(".autokeywordUl").html('');
					let tag = '';
					// tag += '<ul>\n';
					$.each(result.autoKeywords, function (idx, item){
						//<a href="javascript:void(0);"><em>가</em>을컬리수</a>
						tag += '<li><a href="javascript:void(0);" onclick="fnSearchKeyword(\''+result.autoKeywords[idx]+'\');">'+result.autoKeywords[idx]+'</a></li>\n';
					});
					// tag += '</ul>\n';
					$(".autokeywordUl").append(tag);
				}
			}
		}

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

		// 좌측 카테고리 생성
		var fnCreateSearchCategoryList = function (){
			let allCateList = [[${allCateList}]];
			let cateList = [[${cateList}]];
			let tag = '';

			if(cateList.length > 0){
				$.each(allCateList,function (allIdx,allItem){
					$.each(cateList, function (idx,item){
						if(allItem.cate1No==item.cate1No){
							$('#ulAllCate').append(fnGetSearchCategoryList(item));
						}
					});
				});
			}
		}

		// 카테고리 그리기
		let fnGetSearchCategoryList = function (cate1){
			let tag = '';
			if(cate1 != null){
				tag += '<li>\n';
				tag += '	<a href="javascript:void(0);" onclick="fnResetListIdx();fnSetSearchCate(this, \'off\', \''+cate1.cate1No+'\');" cateFullNm="'+cate1.cate1Nm+'" data-open="N" data-depth="1" data1="'+cate1.cate1No+'" data-value="'+cate1.cate1No+'">'+cate1.cate1Nm+'</a>';
				if(cate1.leafYn == 'N' && cate1.cate2List.length > 0){
					tag += '<div class="sub_cate">\n';
					tag += '	<ul>\n';
					$.each(cate1.cate2List, function (idx2,cate2){
						tag += '<li><a href="javascript:void(0);" onclick="fnResetListIdx();fnSetSearchCate(this, \'off\', \''+cate1.cate1No+'\',\''+cate2.cate2No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'" data-open="N" data-depth="2" data1="'+cate1.cate1No+'" data2="'+cate2.cate2No+'" data-value="'+cate2.cate2No+'">'+cate2.cate2Nm+'</a>\n';
						if(cate2.leafYn == 'N' && cate2.cate3List.length > 0){
							tag += '<div class="sub_cate">\n';
							tag += '	<ul>\n';
							$.each(cate2.cate3List, function (idx3,cate3){
								tag += '<li><a href="javascript:void(0);" onclick="fnResetListIdx();fnSetSearchCate(this, \'off\', \''+cate1.cate1No+'\',\''+cate2.cate2No+'\',\''+cate3.cate3No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'>'+cate3.cate3Nm+'" data-open="N" data-depth="3" data1="'+cate1.cate1No+'" data2="'+cate2.cate2No+'" data3="'+cate3.cate3No+'" data-value="'+cate3.cate3No+'">'+cate3.cate3Nm+'</a>\n';
								if(cate3.leafYn == 'N' && cate3.cate4List.length >0){
									tag += '<div class="sub_cate">\n';
									tag += '	<ul>\n';
									$.each(cate3.cate4List, function (idx4,cate4){
										tag += '<li><a href="javascript:void(0);" onclick="fnResetListIdx();fnSetSearchCate(this, \'off\', \''+cate1.cate1No+'\',\''+cate2.cate2No+'\',\''+cate3.cate3No+'\',\''+cate4.cate4No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'>'+cate3.cate3Nm+'>'+cate4.cate4Nm+'" data-open="N" data-depth="4" data1="'+cate1.cate1No+'" data2="'+cate2.cate2No+'" data3="'+cate3.cate3No+'" data4="'+cate4.cate4No+'" data-value="'+cate4.cate4No+'">'+cate4.cate4Nm+'</a>\n';
										/*if(cate4.leafYn = 'N' && cate4.cate5List.length>0){
											tag += '<div class="sub_cate">\n';
											tag += '	<ul>\n';
											$.each(cate4.cate5List, function (idx5,cate5){
												tag += '<li><a href="javascript:;">'+cate5.cate5Nm+'</a>\n';
												tag += '</li>\n';
											});
											tag += '	</ul>\n';
											tag += '</div>\n';
										}*/
										tag += '</li>\n';
									});
									tag += '	</ul>\n';
									tag += '</div>\n';
								}
								tag += '</li>\n';
							});
							tag += '	</ul>\n';
							tag += '</div>\n';
						}
						tag += '</li>\n';
						// tag += '		<li><a href="javascript:;>'+cate2.cate2Nm+'</a></li>\n';
					});
					tag += '	</ul>\n';
					tag += '</div>\n';
				}
				tag += '</li>\n';
			}
			return tag;
		}

		// 검색
		var fnSearchData = function (){
			let keyword = $("#InnerSearchForm").find("input[name=keyword]").val();
			let brandGroupNo = $("#InnerSearchForm").find("input[name=brandGroupNo]").val();
			$("#searchGoodsForm").find('input[name=keyword]').val($("#InnerSearchForm").find("input[name=keyword]").val());
			cfnGoToBrnadSearchGoodsListForm(keyword,brandGroupNo);
		}

		// 상품이미지
		var fnImgOnoff = function (){
			var nowFocus = $('.dp .itemPic');
			var nowMov = $('.itemPic').children('.pd_mov');
			var nowImg = $('.itemPic').children('.pd_img');
			var ogrSrc;
			var overSrc;
			var srcName = nowImg.attr('src');
			overSrc = srcName.substring(0, srcName.lastIndexOf('.'));

			var srcImg;
			var srcdat;

			$(nowFocus).on('mouseover', function() {
				$(this).children('.pd_mov').siblings(".itemOpt").addClass('on');
				$(this).children('.pd_mov').css("opacity","0");
			});
			$(nowFocus).on('mouseleave', function() {
				$(this).children('.pd_mov').siblings(".itemOpt").removeClass('on');
				$(this).children('.pd_mov').css("opacity","1");
			});
			$(nowFocus).on('mouseover', function() {
				$(this).children('.pd_img').siblings(".itemOpt").addClass('on');
				srcImg = $(this).children('.pd_img').attr('src');
				srcdat = $(this).children('.pd_img').attr('data-img');
				$(this).children('.pd_img').attr('src',srcdat);
			});
			$(nowFocus).on('mouseleave', function() {
				$(this).parents('.itemPic').removeClass();
				$(this).children('.pd_img').siblings(".itemOpt").removeClass('on');
				$(this).children('.pd_img').attr('src', srcImg);
				$(this).children('.pd_img').css("opacity","1");
			});
		}

		// 검색어 연관 상품 추천
		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('');
				if(result.length > 0){
					$.each(result, function (idx, item){
						html += '<div class="item_prod">\n';
						html += '	<div class="item_state">\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 alt="" class="vLHTC pd_img" src="'+item.product.itemImage+'">\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';
						html += item.product.salePrice.addComma() ;
						if(item.product.salePrice < item.product.originalPrice) {
							html += '			<span class="itemPrice_original">'+ item.product.originalPrice.addComma() +'</span>\n';
							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';
					});
				}else{
					$("#recomArea").hide();
				}
				$("#recommendItemArea").append(html);
			});
		}

		var fnResetListIdx = function (){
			gagaInfiniteScroll.pageStatus.loadPage = 0;
			gagaInfiniteScroll.pageStatus.pageNum = [];
			//listIdx = 1;
			$('#endPage').hide();
			$('#noFilterData').hide();
			// 추천상품 hide
			$("#recomArea").hide();
		}
	</script>

	<!-- //2021.06.18 검색화면 로그스크립트 삽입 -->
	<script type="text/javascript">
		var searchKeyword = '[[${params.keyword}]]';
		window._eglqueue = window._eglqueue || [];
		_eglqueue.push(['setVar', 'cuid', eglqueueCuid]);
		_eglqueue.push(['setVar', 'searchTerm', searchKeyword]);
		_eglqueue.push(['setVar', 'userId', hCustId]); // optional
		_eglqueue.push(['track', 'search']);
		(function (s, x) {
			s = document.createElement('script'); s.type = 'text/javascript';
			s.async = true; s.defer = true; s.src = (('https:' == document.location.protocol) ? 'https' : 'http') + '://logger.eigene.io/js/logger.min.js';
			x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
		})();
	</script>
	<!-- //2021.06.18 검색화면 로그스크립트 삽입 -->

</th:block>

</body>
</html>
