<!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/BrandLayoutMob">
<!--
 *******************************************************************************
 * @source  : SearchGoodsListFormMob.html
 * @desc    : 검색상품 목록 화면 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.06.14   bin2107     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
	<!-- ★ 컨텐츠 시작 -->
	<main role="" id="" class="container sch">
		<section class="sch_result">
			<div class="inner">
				<div class="sch_title">
					<form id="InnerSearchForm" name="InnerSearchForm">
					<input type="text" class="form_control" id="keyword" name="keyword" th:value="${params.keyword}" placeholder="" maxlength="100" autocomplete="off">
					<!-- <button class="btn_x">X</button> -->
					<button type="button" class="btn_sch" onclick="fnSearchData();"><img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/ico_btn_search.png'" alt=""></button>
					</form>
				</div>
				<div class="related_keyword">
					<div class="sub_category">
						<div class="cate_wrap" id="recommendKeyword">
<!--							<a href="javascript:;" class="on">연관검색어1</a>-->
<!--							<a href="javascript:;"><span>#</span> 연관검색어2</a>-->
<!--							<a href="javascript:;"><span>#</span> 연관검색어3</a>-->
<!--							<a href="javascript:;"><span>#</span> 연관검색어4</a>-->
<!--							<a href="javascript:;"><span>#</span> 연관검색어5</a>-->
						</div>
					</div>
				</div>

				<div class="tabWrap">
					<ul class="tabIndex">
						<li class="active"><a href="javascript:void(0);">상품<span id="prodListCnt"></span></a></li>
						<li><a href="javascript:void(0);">기획전<span id="planListCnt"></span></a></li>
						<li><a href="javascript:void(0);">이벤트<span id="eventListCnt"></span></a></li>
					</ul>
					<div class="tabContents">
						<div class="tab_cont active">
							<!-- tab_cont [1] Start -->
							<div class="inner" id="goodsNodata" style="display:none;">
								<!-- 전체 검색결과 없을때 -->
								<div class="nodata">
									<p>&lsquo;<span id="goodsKeyword"></span>&rsquo; 에 대한<br>검색 결과가 없습니다.</p>
								</div>
								<!-- // 전체 검색결과 없을때 -->
							</div>

							<div class="inner" id="recomArea" >
								<!-- 이런상품은 어떤가요 -->
								<div class="now_view">
									<div class="store_product">
										<div class="allresult-tit">
											<h3>이런 상품은 어떤가요?</h3>
										</div>
										<div class="swiper-container sch_product">
											<div class="swiper-wrapper" id="recommendItemArea">

											</div>
										</div>
									</div>
								</div>
								<!-- // 이런상품은 어떤가요 -->
							</div>

							<!-- 210706_ 수정 : 배너 가이드 퍼블리싱 수정. -->
							<!-- 210706_ 변경 : 배너 위치 이동. -->
							<div class="inner" id="adBannerArea">
							</div>

							<div class="inner" id="dataArea">
								<!-- 필터 시작 -->
								<div class="count_wrap">
									<div>
										<p><span id="totCntId"></span>개의 상품</p>
									</div>
									<div>
										<ul class="sch_util">
											<li>
												<div class="sch_sort">
													<a href="javascript:void(0);" id="filter">최신상품순</a>
												</div>
											</li>
											<li><a href="javascript:void(0);" class="filter open_filter">필터</a></li>
										</ul>
									</div>
								</div>
								<!-- // 필터 종료 -->

								<!-- 필터결과 없을때 -->
								<div class="inner" id="noDataFilter" style="display:none;">
									<div class="nodata">
										<p>선택하신 조건에 맞는 상품이 없습니다.<br>검색어를 확인하신 후 다시 검색해 보세요!</p>
										<button class="btn">선택한 필터 초기화</button>
									</div>
								</div>
								<!-- //필터결과 없을때 -->

								<!-- 필터결과 있을때 -->
								<div class="sch_result_items">
<!--									<div class="store_product no-slide" id="infiniteContainer">-->
<!--										<div class="product-wrapper" id="listBoxOuter">-->
<!--											<div class="product-slide" id="listBox">-->

<!--											</div>-->
<!--										</div>-->
<!--									</div>-->
									<div id="infiniteContainer" class="store_product no-slide">
										<div id="listBoxOuter" class="product-wrapper">
											<ul id="listBox" class="product-slide itemsGrp">
											</ul>
										</div>
									</div>
									<div class="banner" style="display: none">
										<img th:src="${@environment.getProperty('domain.uximage')} + '/images/mo/shc_banner.png'" alt="">
									</div>
									<div class="last_page" id="endPage" style="display:none;">
										<p>마지막페이지 입니다.</p>
									</div>
								</div>
								<!-- //필터결과 있을때 -->
							</div>
							<!-- // tab_cont [1] End -->
						</div>

						<div class="tab_cont ">
							<!-- tab_cont [2] Start -->
							<div class="inner">
								<div class="list_content">
									<div class="list_item" id="planArea">

									</div>
<!--									<div class="list_last">마지막페이지 입니다.</div>-->
								</div>
							</div>
							<div class="inner" id="planNodata" style="display:none;">
								<!-- 전체 검색결과 없을때 -->
								<div class="nodata">
									<p>&lsquo;<span id="planKeyword"></span>&rsquo; 에 대한<br>검색 결과가 없습니다.</p>
								</div>
								<!-- // 전체 검색결과 없을때 -->
							</div>
							<!-- // tab_cont [2] End -->
						</div>

						<div class="tab_cont">
							<!-- tab_cont [3] Start -->
							<div class="inner">
								<div class="area_thumb_list">
									<div class="thumb_list">
										<ul id="eventArea">

										</ul>
									</div>
<!--									<div class="list_last" style="display:none;">마지막페이지 입니다.</div>-->
								</div>
							</div>
							<div class="inner" id="eventNodata" style="display:none;">
								<!-- 전체 검색결과 없을때 -->
								<div class="nodata">
									<p>&lsquo;<span id="eventKeyword"></span>&rsquo; 에 대한<br>검색 결과가 없습니다.</p>
								</div>
								<!-- // 전체 검색결과 없을때 -->
							</div>
							<!-- // tab_cont End -->
						</div>
					</div>
				</div>

			</div>
		</section>
	</main>

	<!-- 필터 -->
	<div class="filter_box">
		<div class="filter_list">
			<div class="filter_top">
				<div class="tt">필터</div>
				<div>
					<button class="fillter_reset" onclick="fnMobFilterReset();"><span>초기화</span></button>
					<button class="close">닫기</button>
				</div>
			</div>
			<div class="filter_con">
				<form id="filterForm">
					<div class="filter_header">
						<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_body">
						<!-- 필터메뉴 -->
						<ul class="allFilter">
							<li class="categori chkFilter" id="categoryFilterDiv">
								<a href="javascript:void(0)" class="daps1">카테고리<span class="pic"></span></a>
								<ul class="daps2" id="categoryArea">
									<li><a href="javascript:void(0);" onclick="fnResetListIdx();fnSetMobCateFilter(this, 'ALL');">전체</a></li>
								</ul>
							</li>
							<li class="brand chkFilter" th:if="${filterBrandList != null and !filterBrandList.empty}" id="brandGroupFilterDiv">
								<a href="javascript:void(0)" class="daps1">브랜드<span class="pic"></span></a>
								<ul class="daps2">
									<li th:each="oneData, status : ${filterBrandList}">
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input th:id="${'chkFilterBrand' + status.index}" name="brandGroup" type="checkbox" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();fnSelectFilerMob(this,'brandGroup','off','');"><label th:for="${'chkFilterBrand' + status.index}"><span th:text="${oneData.filterNm}"></span></label>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li calss="size chkFilter" th:if="${filterSizeList != null and !filterSizeList.empty}" id="sizeFilterDiv">
								<a href="javascript:void(0)" class="daps1">사이즈<span class="pic"></span></a>
								<div class="daps2">
									<ul class="sizebox">
										<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();fnSelectFilerMob(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();fnSelectFilerMob(this,'size','off','2');"><span th:text="${oneData.filterNm}">44</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();fnSelectFilerMob(this,'size','off','3');"><span th:text="${oneData.filterNm}">120</span>
												</label>
											</th:block>
										</li>
									</ul>
								</div>
							</li>
							<li class="price chkFilter" id="priceFilterDiv">
								<input type="hidden" id="hPriceFrom" name="hPriceFrom" value=""/>
								<input type="hidden" id="hPriceTo" name="hPriceTo" value=""/>
								<a href="javascript:void(0)" class="daps1">가격<span class="pic"></span></a>
								<ul class="daps2" id="priceArea">

								</ul>
							</li>
							<li class="discount chkFilter" id="dcRateFilterDiv">
								<input type="hidden" id="hDcRateFrom" name="hDcRateFrom" value=""/>
								<input type="hidden" id="hDcRateTo" name="hDcRateTo" value=""/>
								<a href="javascript:void(0)" class="daps1">할인율<span class="pic"></span></a>
								<ul class="daps2" id="dcRateArea">
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount1" name="dcRate" type="checkbox" value="0,10" data-id="10% 이하" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','1');"><label for="discount1"> <span id="dcRateText1">10% 이하</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount2" name="dcRate" type="checkbox" value="10,20" data-id="10~20%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','2');"><label for="discount2"> <span id="dcRateText2">10~20%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount3" name="dcRate" type="checkbox" value="20,30" data-id="20~30%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','3');"><label for="discount3"> <span id="dcRateText3">20~30%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount4" name="dcRate" type="checkbox" value="30,40" data-id="30~40%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','4');"><label for="discount4"> <span id="dcRateText4">30~40%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount5" name="dcRate" type="checkbox" value="40,50" data-id="40~50%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','5');"><label for="discount5"> <span id="dcRateText5">40~50%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount6" name="dcRate" type="checkbox" value="50,60" data-id="50~60%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','6');"><label for="discount6"> <span id="dcRateText6">50~60%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount7" name="dcRate" type="checkbox" value="60,70" data-id="60~70%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','7');"><label for="discount7"> <span id="dcRateText7">60~70%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount8" name="dcRate" type="checkbox" value="70,80" data-id="70~80%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','8');"><label for="discount8"> <span id="dcRateText8">70~80%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount9" name="dcRate" type="checkbox" value="80,90" data-id="80~90%" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','9');"><label for="discount9"> <span id="dcRateText9">80~90%</span> </label>
												</div>
											</div>
										</a>
									</li>
									<li>
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input id="discount10" name="dcRate" type="checkbox" value="90,0" data-id="90%이상" onclick="fnResetListIdx();filterDcRateMob(this,'dcRate','off','10');"><label for="discount10"> <span id="dcRateText10">90이상</span> </label>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li class="age chkFilter" th:if="${filterAgeList != null and !filterAgeList.empty}" id="ageFilterDiv">
								<a href="javascript:void(0)" class="daps1">연령<span class="pic"></span></a>
								<ul class="daps2">
									<li th:each="oneData, status : ${filterAgeList}">
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input th:id="${'chkFilterAge' + status.index}" name="age" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();fnSelectFilerMob(this,'age','off','');" type="checkbox"><label th:for="${'chkFilterAge' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li class="season chkFilter" th:if="${filterSeasonList != null and !filterSeasonList.empty}" id="seasonFilterDiv">
								<a href="javascript:void(0)" class="daps1">시즌<span class="pic"></span></a>
								<ul class="daps2">
									<li th:each="oneData, status : ${filterSeasonList}">
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input th:id="${'chkFilterSeason' + status.index}" name="season" th:value="${oneData.filterCd}" th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();fnSelectFilerMob(this,'season','off','');" type="checkbox"><label th:for="${'chkFilterSeason' + status.index}"> <span th:text="${oneData.filterNm}">봄</span> </label>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</li>
							<li class="color chkFilter" th:if="${filterColorList != null and !filterColorList.empty}" id="colorFilterDiv">
								<a href="javascript:void(0)" class="daps1">컬러
									<span class="pic"> </span>
								</a>
								<div class="daps2">
									<ul class="colorbox">
										<li th:each="oneData, status : ${filterColorList}">
											<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();fnSelectFilerMob(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>
									</ul>
								</div>
							</li>
							<li class="benefit chkFilter" th:if="${filterBenefitList != null and !filterBenefitList.empty}" id="benefitFilterDiv">
								<a href="javascript:void(0)" class="daps1">혜택<span class="pic"></span></a>
								<ul class="daps2">
									<li th:each="oneData, status : ${filterBenefitList}">
										<a href="javascript:void(0)">
											<div class="form_field">
												<div>
													<input th:id="${'chkFilterBenefits' + status.index}" name="benefit" th:value="${oneData.filterCd}+':'+${oneData.filterNm}"  th:data-id="${oneData.filterNm}" onclick="fnResetListIdx();fnSelectFilerMob(this,'benefit','off','');" type="checkbox"><label th:for="${'chkFilterBenefits' + status.index}"> <span th:text="${oneData.filterNm}"></span> </label>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</li>
						</ul>
						<!-- //필터메뉴 -->
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- //필터 -->
	<!-- 목록 보기 소팅 팝업 -->
	<div id="schSortPop" class="popup_box schSortPop">
		<div class="lap">
			<div class="popup_close">카테고리닫기</div>
			<div class="popup_head sr-only">
				<h2 class="">기간 선택 팝업</h2>
			</div>
			<div class="popup_con">
				<div class="button_list" id="sortArea">
					<button type="button" id="sortingNEW" class="on" onclick="fnSortingChange(this,'NEW','','Mob');"><span>최신상품순</span></button>
					<button type="button" id="sortingBEST" onclick="fnSortingChange(this,'BEST','','Mob');"><span>인기많은순 </span></button>
					<button type="button" id="sortingREVIEW" onclick="fnSortingChange(this,'REVIEW','','Mob');"><span>리뷰많은순</span></button>
				</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"/>
	</form>

	<script th:src="@{'/ux/plugins/gaga/gaga.infinite.scrollSession.js'}" 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">
	/*<![CDATA[*/
	var adBannerList = [[${adBannerList}]];
	var adBannerTag = '';
	var filterPriceList = [[${filterPriceList}]];
	// 상품리스트 페이지 확인용
	var listIdx = 1;

	$(window).on("pageshow", function(event) {
		$('#filterForm input[name=brandGroup]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=size]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=dcRate]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=age]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=season]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=color]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=benefit]:checked').each(function(){
			$(this).attr('checked', true);
		});
		$('#filterForm input[name=price]:checked').each(function(){
			$(this).attr('checked', true);
		});
		if ( (event.originalEvent && event.originalEvent.persisted) || (window.performance && window.performance.navigation.type == 2)) {
			$("#searchGoodsForm input:hidden[name=unisex]").remove();
			$("#searchGoodsForm input:hidden[name=newGoods]").remove();
			var historyData = sessionStorage.getItem(document.location.href);
			// console.log(historyData);
			if(historyData!=null){
				// console.log('historyData>>'+historyData);
				historyData = JSON.parse(historyData);
			}else{
				historyData = {};
			}
			if(gagajf.isNull($("#searchGoodsForm").find("input[name=unisex]").val())){
				$("#unisex").attr('onclick','fnResetListIdx();fnFilterOption(this,\'on\');');
				$("#unisex").attr('checked', false);
			}else{
				$("#unisex").attr('onclick','fnResetListIdx();fnFilterOption(this,\'off\');');
				$("#unisex").attr('checked', true);
			}

			if(gagajf.isNull($("#searchGoodsForm").find("input[name=newGoods]").val())){
				$("#newGoods").attr('onclick','fnResetListIdx();fnFilterOption(this,\'on\');');
				$("#newGoods").attr('checked', false);
			}else{
				$("#newGoods").attr('onclick','fnResetListIdx();fnFilterOption(this,\'off\');');
				$("#newGoods").attr('checked', true);
			}
			// if(typeof historyData.filterHtml!='undefined' && historyData.filterHtml!=''){
			// 	//console.log('historyData.filterHtml>>>'+historyData.filterHtml);
			// 	$("#searchGoodsForm").append(historyData.filterHtml);
			// 	filterHtml = historyData.filterHtml;
			// }
			// if(typeof historyData.filterStatHtml!='undefined' && historyData.filterStatHtml!=''){
			// 	$("#filterForm").append(historyData.filterStatHtml);
			// 	filterStatHtml = historyData.filterStatHtml;
			// }
			fnReCheckFilterList();
			if(typeof historyData.totalCount!='undefined' && historyData.totalCount!=''){
				$("#totCntId").text(historyData.totalCount.addComma());
				$("#prodListCnt").text('('+historyData.totalCount.addComma()+')');
			}else{
				$("#totCntId").text('0');
				$("#prodListCnt").text('(0)');
			}
			if(typeof historyData.sortingType!='undefined' && historyData.sortingType!=''){
				$("#searchGoodsForm input:hidden[name=sortingType]").val(historyData.sortingType);
				fnSortingChange(this,historyData.sortingType,'back','Mob');
			}else{
				listIdx++;
				fnSearchGoodsListSearch();
				fnGetSearchPlanningList();
				fnGetSearchEventList();
			}
		}else{
			fnCategoryGoodsInfiniteScrollInit();

			var sortingType = $("#searchGoodsForm input:hidden[name=sortingType]").val();
			if(sortingType=='BEST' || sortingType=='REVIEW'){
				fnSortingChange(this,sortingType,'','Mob');
			}else{
				fnSearchGoodsListSearch();
				fnGetSearchPlanningList();
				fnGetSearchEventList();
			}
		}
	});

	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){
		$('#endPage').hide();
		$('#noDataFilter').hide();
		$('#goodsNodata').hide();
		$('#goodsKeyword').text('');
		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 += '<a href="javascript:void(0);" onclick="fnSearchKeyword(\''+item.keyword+'\');"><span>#</span>'+item.keyword+'</a>\n';
			});
			$("#recommendKeyword").html(recommedTag);
		}

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

		if(dataListLen > 0){
			$('#noFilterData').hide();
			$('#endPage').hide();
			$('#eventNodata').hide();
			$('#eventKeyword').text('');
			$('#dataArea').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, 'Mob',keyWord);
			gagaInfiniteScroll.draw(htm);
			listIdx++;
			//fnImgOnoff();
		}else{
			if(listIdx > 1){ // 데이터가 1건 이상
				if(totalCnt > Number($("#searchGoodsForm").find("input[name=pageSize]").val())){
					if($("#searchGoodsForm input[name=pageNo]").val()==1){
						// 필터 값으로 조회 데이터 없을때
						$('#noDataFilter').show();
						// $('.list_content .count_wrap').hide();
						$('#endPage').hide();
					}else{
						// 마지막 페이지 일때
						$('#endPage').show();
						$('#noDataFilter').hide();
					}
				}else{
					if($("#searchGoodsForm input[name=pageNo]").val()==1){
						// 필터 값으로 조회 데이터 없을때
						$('#noDataFilter').show();
						$('#endPage').hide();
					}
				}
			}else{
				$('#goodsNodata').show();
				$('#goodsKeyword').text([[${params.keyword}]]);
				$('#dataArea').hide();
			}
			gagaInfiniteScroll.draw('not');
		}

	}

	// 이벤트 리스트
	let fnGetSearchEventList = function (){
		gagajf.ajaxFormSubmit("/display/search/event/list", document.searchGoodsForm, fnReturnEventList);
	}

	let fnReturnEventList = function (result){
		if(gagajf.isNull(result.eventList.length)){
			$("#eventListCnt").text('(0)');
		}else{
			$("#eventListCnt").text('('+result.eventList.length.addComma()+')');
		}

		if(result.eventList != null && result.eventList.length>0){
			$("#eventNodata").hide();
			$("#eventKeyword").text('');
			$.each(result.eventList, function (idx,item){
				let html = '';

				html += '<li>\n';
				html += '	<a href="">\n';
				html += '		<div class="shape ranker"><span>NEW</span></div>\n';
				html += '		<div class="thumb">\n';
				html += '			<img src="'+_imgUrl+'/'+item.mainPimg+'" alt="">\n';
				html += '		</div>\n';
				html += '		<div class="txt">\n';
				html += '			<p class="title">'+item.planNm+'</p>\n';
				html += '			<p class="date">\n';
				if(item.dispStdt != null && item.dispEddt != null) {
					html += '			<span>'+item.dispStdt+'</span> - <span>'+item.dispEddt+'</span>\n';
				}
				html += '			</p>\n';
				html += '		</div>\n';
				html += '	</a>\n';
				html += '</li>\n';

				$("#eventArea").append(html);
			});
		}else{
			$("#eventNodata").show();
			$("#eventKeyword").text([[${params.keyword}]]);
		}
	}

	// 기획전 리스트
	let fnGetSearchPlanningList = function (){
		gagajf.ajaxFormSubmit("/display/search/planning/list", document.searchGoodsForm, fnReturnPlanningList);
	}

	let fnReturnPlanningList = function (result){
		if(gagajf.isNull(result.planList.length)){
			$("#planListCnt").text('(0)');
		}else{
			$("#planListCnt").text('('+result.planList.length.addComma()+')');
		}

		if(result.planList != null && result.planList.length>0){
			$("#planNodata").hide();
			$("#planKeyword").text('');
			$.each(result.planList, function (idx,item){
				let html = '';
				html += '<div class="visual">\n';
				html += '	<div class="shape ranker"><span>NEW</span></div>\n';
				html += '	<div class="img">\n';
				html += '		<img src="'+_imgUrl+'/'+item.mainPimg+'" alt="">\n';
				html += '	</div>\n';
				html += '	<div class="txtWrap">\n';
				html += '		<p>'+item.planNm+'</p>\n';
				html += '		<p class="txt_xs">'+item.dtlTitle1+'</p>\n';
				html += '	</div>\n';
				html += '</div>\n';

				if(item.planningGoodsList != null && item.planningGoodsList.length>0){
					html += '	<div class="itemsGrp n3">\n';
					$.each(item.planningGoodsList, function (idx,item){
						html += '<div class=" item_prod">\n';
						html += '	<div class="item_state">\n';
						html += '		<a href="javascript:void(0);" className="itemLink">\n';
						html += '			<div class=" itemPic">\n';
						html += '				<img alt="BLUE-a" class=" vLHTC pd_img" src="'+item.sysImgNm+'">\n';
						html += '			</div>\n';
						html += '			<div class=" itemName">'+item.goodsNm+'</div>\n';
						html += '			<p class="itemPrice">\n';
						html += '				<span class="itemPrice_sale">'+item.currPrice.addComma()+'</span>\n';
						html += '			</p>\n';
						html += '		</a>\n';
						html += '	</div>\n';
						html += '</div>\n';
					});
					html += '	</div>\n';
				}
				html += '</div>\n';
				$("#planArea").append(html);
			});
		}else{
			$("#planNodata").show();
			$("#planKeyword").text([[${params.keyword}]]);
		}
	}

	// 검색
	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());
		cfnGoToSearchGoodsListForm(keyword,brandGroupNo);
	}

	// 선택 단어 검색
	var fnSearchKeyword = function (obj){
		let keyword = obj;
		cfnGoToSearchGoodsListForm(keyword);
	}

	$(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 += '<div class="banner">\n';
				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+'" alt="검색결과 배너">\n';
				adBannerTag += '		</div>\n';
				adBannerTag += '	</a>\n';
				adBannerTag += '</div>\n';
			});
			$("#adBannerArea").append(adBannerTag);
		}else{
			$("#adBannerArea").remove();
		}

		if(filterPriceList.length > 0){
			$("#priceArea").html('');
			var priceHtml = '';
			var minPrice;
			var maxPrice;
			for(let i=0; i<filterPriceList.length-1; i++){
				if(i==filterPriceList.length-2){
					minPrice = filterPriceList[i].filterNm;
					maxPrice = filterPriceList[i+1].filterNm;
				}else{
					minPrice = filterPriceList[i].filterNm;
					maxPrice = filterPriceList[i+1].filterNm;
				}

				priceHtml += '<li>\n';
				priceHtml += '	<a href="javascript:void(0)">\n';
				priceHtml += '		<div class="form_field">\n';
				priceHtml += '			<div>\n';
				priceHtml += '				<input type="checkbox" id="price'+(i+1)+'" name="price" value="'+minPrice+','+maxPrice+'" data-id="'+minPrice.addComma()+'원 ~ '+maxPrice.addComma()+'원" onclick="fnResetListIdx();filterPriceMob(this,\'price\',\'off\',\''+(i+1)+'\');"><label for="price'+(i+1)+'">\n';
				priceHtml += '				<span id="pricdSpan'+(i+1)+'">'+minPrice.addComma()+'원 ~ '+maxPrice.addComma()+'원</span> </label>\n';
				priceHtml += '			</div>\n';
				priceHtml += '		</div>\n';
				priceHtml += '	</a>\n';
				priceHtml += '</li>\n';
			}
			$("#priceArea").append(priceHtml);
		}

		$("#htopSub").find('.search').hide();

		// btPop_full
		$('.shcFilter').click(function(){
			popOpenScroll();
			$('.container').addClass('btPop_full_open');
		});

		$('.btPop_full_close').click(function(){
			popClsScroll();
			$('.container').removeClass('btPop_full_open');
		});

		function popOpenScroll(){
			$('html, body').css({'overflow': 'hidden', 'height': '100%'});
			$('#element').on('scroll touchmove mousewheel', function(event) { // 터치무브, 휠 스크롤 방지
				event.preventDefault();
				event.stopPropagation();
				return false;
			});
		}

		function popClsScroll(){
			$('html, body').css({'overflow': 'auto', 'height': '100%'}); //n 해제
			$('#element').off('scroll touchmove mousewheel'); // 터치무브, 휠 스크롤 가능
		}

		//기간 선택 팝업
		$(document).on("click", ".sch .sch_util .sch_sort a", function(){
			$('#schSortPop').show().addClass("active");
			$("body").css({"overflow":"hidden"});
		});

		$(document).on('click','.popup_box .button_list button',function(){
			$('.popup_box .button_list button').removeClass('on');
			$(this).addClass('on');
		});

		//팝업_닫기
		$('.popup_close').on("click",function(){
			$('.schSortPop').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});

		//210510_추가 : 토스트 팝업 button 클릭 시 팝업 닫기.
		$(document).on('click','.popup_box.schSortPop .button_list button',function(){
			$(this).parents('.popup_box.schSortPop').hide();
			$("body").css({"overflow":"visible"});
		});

		// 210813_ 추가 : 검색 결과 스크롤 이동 시, 필터 고정
		// 210819_ 스크립트 위치 이동 및 내용 보완 (공통아님, 카운터필터 사용할 경우에만)
		const schFilterOrg=$('.sch .sch_result .count_wrap').offset().top - 60;
		$(window).scroll(function (event) {
			var schScrollTop= $(window).scrollTop();
			var schFilterTop=$('.sch .sch_result .count_wrap').offset().top - 60;
			//console.log('schFilterOrg : '+ schFilterOrg);
			//console.log('schScrollTop : '+ schScrollTop);
			//console.log('schFilterTop : '+ schFilterTop);
			if (schFilterOrg >= schScrollTop){
				$('.sch .sch_result .count_wrap').removeClass('fixed');
				return false;
			} else if(schFilterTop < schScrollTop) {
				$('.sch .sch_result .count_wrap').addClass('fixed');
				return false;
			}
		});

		// 카테고리 필터 생성
		fnCreateCategoryFilter();

		//필터
		function filter(){
			var filterOpen=$(".open_filter");
			var filterClose=$(".filter_box .close");
			var filterPop=$(".filter_box");
			var filter=$(".filter_body > ul");
			var dap1=$(".filter_body > ul .daps1");
			var dap2=$(".filter_body > ul .daps2");
			var dap3=$(".filter_body > ul .daps3");
			var dap4=$(".filter_body > ul .daps4");
			var dap5=$(".filter_body > ul .daps5");
			var dap2A=$(".filter_body > ul .daps2 > li > a");
			var dap3A=$(".filter_body > ul .daps3 > li > a");
			var dap4A=$(".filter_body > ul .daps4 > li > a");
			var dap5A=$(".filter_body > ul .daps5 > li > a");

			/* 필터모달 > 열기,닫기 */
			filterOpen.on("click",function(){
				filterPop.addClass("active");
				$("body").css({"overflow":"hidden"});
			});

			filterClose.on("click",function(){
				filterPop.removeClass("active");
				$("body").css({"overflow":"visible"});
			});

			/* 필터메뉴 > 댑스열고, 닫기 */
			dap1.on("click",function(){
				if($(this).hasClass("on")){
					$(this).removeClass("on");
					$(this).next(dap2).slideUp();
				}else{
					$(this).addClass("on");
					$(this).next(dap2).slideDown();
					//210602_ 추가 : 필터 항목 아코디언 효과.
					$(this).parents("li").siblings("li").find(".daps2").slideUp();
					$(this).parents("li").siblings("li").find("> a").removeClass("on");
				}
			});

			dap2A.on("click",function(){
				if($(this).hasClass("on")){
					$(this).removeClass("on");
					$(this).next(dap3).slideUp();
				}else{
					$(this).addClass("on");
					$(this).next(dap3).slideDown();
				}
			});

			dap3A.on("click",function(){
				if($(this).hasClass("on")){
					$(this).removeClass("on");
					$(this).next(dap4).slideUp();
				}else{
					$(this).addClass("on");
					$(this).next(dap4).slideDown();
				}
			});

			dap4A.on("click",function(){
				if($(this).hasClass("on")){
					$(this).removeClass("on");
					$(this).next(dap5).slideUp();
				}else{
					$(this).addClass("on");
					$(this).next(dap5).slideDown();
				}
			});

			dap5A.on("click",function(){
				if($(this).hasClass("on")){
					$(this).removeClass("on");
					//$(this).next(dap6).slideUp();
				}else{
					$(this).addClass("on");
					//$(this).next(dap6).slideDown();
				}
			});
		}
		filter();

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

	});

	// 카테고리 필터 생성
	var fnCreateCategoryFilter = 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){
						$('#categoryArea').append(fnGetSearchCategoryList(item));
					}
				});
			});
		}
	}

	let fnGetSearchCategoryList = function (cate1){
		let tag = '';
		if(cate1 != null){
			tag += '<li>\n';
			tag += '	<a href="javascript:void(0)" data-depth="1" onclick="fnResetListIdx();fnSetMobCateFilter(this, \'\', \''+cate1.cate1No+'\');" cateFullNm="'+cate1.cate1Nm+'">'+cate1.cate1Nm+'</a>';
			if(cate1.leafYn == 'N' && cate1.cate2List.length > 0){
				tag += '	<ul class="daps3">\n';
				$.each(cate1.cate2List, function (idx2,cate2){
					tag += '		<li>\n';
					tag += '			<a href="javascript:void(0)" data-depth="2" onclick="fnResetListIdx();fnSetMobCateFilter(this,\'\', \''+cate1.cate1No+'\',\''+cate2.cate2No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'">'+cate2.cate2Nm+'</a>';
					if(cate2.leafYn == 'N' && cate2.cate3List.length > 0){
						tag += '	<ul class="daps4">\n';
						$.each(cate2.cate3List, function (idx3,cate3){
							tag += '<li>\n';
							tag += '<a href="javascript:void(0)" data-depth="3" onclick="fnResetListIdx();fnSetMobCateFilter(this,\'\',\''+cate1.cate1No+'\',\''+cate2.cate2No+'\',\''+cate3.cate3No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'>'+cate3.cate3Nm+'">'+cate3.cate3Nm+'</a>\n';
							if(cate3.leafYn == 'N' && cate3.cate4List.length >0){
								tag += '<ul class="daps5">\n';
								$.each(cate3.cate4List, function (idx4,cate4){
									tag += '<li><a href="javascript:void(0)" data-depth="4" onclick="fnResetListIdx();fnSetMobCateFilter(this,\'\',\''+cate1.cate1No+'\',\''+cate2.cate2No+'\',\''+cate3.cate3No+'\',\''+cate4.cate4No+'\');" cateFullNm="'+cate1.cate1Nm+'>'+cate2.cate2Nm+'>'+cate3.cate3Nm+'>'+cate4.cate4Nm+'">'+cate4.cate4Nm+'</a></li>\n';
								});
								tag += '</ul>\n';
							}
						});
						tag += '</li>\n';
						tag += '	</ul>\n';
					}
				});
				tag += '		</li>\n';
				tag += '	</ul>\n';
			}
			tag += '</li>\n';
		}
		return tag;
	}

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

		$.getJSON('/display/recommend/item/list', data, function (result){
			$("#recommendItemArea").html('');
			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">관심상품 추가</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';
				});
			}else{
				$('#recomArea').hide();
			}
			$("#recommendItemArea").append(html);

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

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

	//TabWrap, TabIndex
	$(document).on('click', '.tabIndex li a', function() {
		var $this = $(this),
				$tabList = $this.parents('ul'),
				_idx = $this.closest('li').index();

		$tabList.children().eq(_idx).addClass('active').siblings().removeClass('active');
		$tabList.next().children().eq(_idx).addClass('active').siblings().removeClass('active');
	});

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



	/*]]>*/
</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', '[[${params.keyword}]]']);
		_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>
