<!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  : LookbookMainFormWeb.html
 * @desc    : 룩북메인 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.30   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div id="container" class="container dp">
		<div class="breadcrumb">
			<ul>
				<li class="bread_home"><a href="javascript:void(0);" id="navHome">홈</a></li>
				<li class="bread_home" id="brandLi" th:if="${lbInfo.lookbookGb=='BL'}" th:text="${brandGroupInfo.brandGroupNm}"></li>
				<li class="bread_2depth">룩북</li>
			</ul>
		</div>
		<div class="wrap">
			<div class="content">
				<div class="cont_head">
					<div>
						<h3>룩북</h3>
					</div>
					</dziv>
					<div class="cont_body">
						<div class="event_list" id="changeClass">
							<div class="event_top">
								<div class="ui_row">
									<div class="count">
										<span id="lookbookTotCnt"></span>개의 이벤트
									</div>
									<div class="ui_col_12">
										<div class="btn_group">
											<!-- <div class="btn_group open"> -->
											<a href="javascript:void(0);" data-toggle="dropdown" class="btn btn_default tgl_dropdown" aria-expanded="true" id="brandBox">브랜드 선택<span class="caret"></span></a>
											<div class="dropdown_menu">
												<ul id="brandArea">

												</ul>
												<div class="ui_row">
													<button type="button" class="fillter_reset" onclick="fnLookbookReset();"><span>초기화</span></button>
													<button type="button" class="fillter_apply" onclick="fnGetBrandLookbookList();"><span>적용</span></button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="list">
								<section id="infiniteContainer">
									<div id="listBoxOuter">
										<ul class="clear event_con" id="listBox"> <!--id="lookbookArea"-->

										</ul>
									</div>
								</section>
								<div class="last_page" id="divLastPage" style="display: none;">
									<span>마지막 페이지입니다.</span>
								</div>
							</div>

							<div class="nodata" id="divLookbookNoData" style="display: none;">
								<div class="txt_box">
									<p>
										등록된 룩북이 없습니다.
									</p>
								</div>
								<div class="btn_box">
									<button class="btn btn_default" th:unless="${lbInfo.lookbookGb=='BL'}" onclick="cfnGoToPage(_PAGE_MAIN);"><span>홈으로 가기</span></button>
									<button class="btn btn_default" th:if="${lbInfo.lookbookGb=='BL'}" th:onclick="cfnGoToBrandMain([[${lbInfo.brandCd}]]);"><span th:text="${brandGroupInfo.brandGroupNm+' 홈으로 가기'}"><em>TBJ</em>&nbsp;홈으로 가기 </span></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<form id="lbMainForm" name="lbMainForm">
			<input type="hidden" name="pageNo" id="pageNo" value ="1"/>
			<input type="hidden" name="pageSize" value ="50"/>
			<input type="hidden" name="lookbookGb" th:value="${lbInfo.lookbookGb}"/>
			<input type="hidden" name="brandCd" th:value="${lbInfo.brandCd}">
			<input type="hidden" name="frontYn" value="Y"/>
			<input type="hidden" name="totalCnt" />
		</form>

<script src="/ux/plugins/gaga/gaga.infinite.scrollSession.js"></script>
<script src="/ux/plugins/jquery/jquery.history.min.js"></script>

<script th:inline="javascript">
/*<![CDATA[*/
	var lookbookGb = [[${lbInfo.lookbookGb}]];
	if(lookbookGb != 'BL'){
		lookbookGb = 'L';
	}
	var brandCd = [[${lbInfo.brandCd}]];

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

	var totalCnt = 0;
	var idx = 1;
	var fnGetInfiniteScrollDataList = function (pageNum){
		$("#lbMainForm input[name=pageNo]").val(pageNum+1);
		// if(idx==1 || totalCnt > Number($("#lbMainForm").find("input[name=pageSize]").val())){
		// 	idx++;
			gagajf.ajaxFormSubmit("/display/lookbook/main/list", document.lbMainForm,  gagaInfiniteScroll.jsonToHtml);
		// }
	}

	var fnDrawInfiniteScrollData = function (result){
		$("#brandBox").show();
		totalCnt = result.paging.totalCount;
		$("#lookbookTotCnt").text(totalCnt);
		$("#lbMainForm").find("input[name=totalCnt]").val(totalCnt);
		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;

		if (result.dataList != null && result.dataList.length > 0) {
			$(".nodata").hide();
			let lastPage = result.paging.pageNo;
			let endRow = result.paging.endRow - result.paging.pageSize;

			var htm = fnGetLookbookList(result);
			gagaInfiniteScroll.draw(htm);
		}else{
			if(totalCnt > Number($("#lbMainForm").find("input[name=pageSize]").val())){
				if($("#lbMainForm input[name=pageNo]").val()==1){
					$("#divLookbookNoData").show();
					$("#brandBox").hide();
				}else{
					$("#divLastPage").show();
				}
			}else{
				if($("#lbMainForm input[name=pageNo]").val()==1){
					$("#divLookbookNoData").show();
					$("#brandBox").hide();
				}
			}

			gagaInfiniteScroll.draw('not');
		}
	}

	let fnGetLookbookList = function (result){
		var html = '';

		$.each(result.dataList, function (idx, item){
			html += '<li>';
			html += '	<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">';
			html += '		<div class="ev_img">';
			html += '			<img src="' + _imgUrl + item.orgTnfileNm + '" alt="" style="height:100%">';
			html += '		</div>';
			html += '		<div class="txt">';
			if(lookbookGb != 'BL') {
				html += '			<span class="brand">' + item.brandNm + '</span>';
			}
			html += '			<p class="tit">'+item.title+'</p>';
			html += '		</div>';
			html += '	</a>';
			html += '</li>';
		});
		return html;
	}

	// 브랜드 리스트 가져오기
	let fnGetBrandList = function (){
		let actionUrl = '/display/lookbook/main/brand/list?frontYn=Y';
		$.getJSON(actionUrl, function(result, status){
			if(result.length > 0){
				$('#brandArea').html('');
				let tag = '';
				$.each(result, function(idx, item) {
					tag += '<li>';
					tag += '	<label class="brand_btn">';
					tag += '		<input type="checkbox" group="filterValue" id="chkFilterBrand'+idx+'" data-name="chkFilterBrand'+idx+'" name="filterBrandCds" value="'+item.brandCd+'"><span>'+item.brandNm+'</span>';
					tag += '	</label>';
					tag += '</li>';
				});
				$('#brandArea').html(tag);
			}
		});
	}

	// 브랜드 선택 적용
	var fnGetBrandLookbookList = function (){
		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
		var tag = '';
		$("input:checkbox:checked").each(function (index) {
			tag += '<input type="hidden" name="multiBrandCd" value="'+$(this).val()+'" />';
			$("#lbMainForm").append(tag);
		});

		fnLookbookInfiniteScrollInit();
		fnLookbookListSearch();
	}

	// 브랜드 선택 초기화
	var fnLookbookReset = function (){
		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();

		$("#brandArea").find('input[name=filterBrandCds]').each(function(idx, item){
			$(this).prop("checked",false);
		});

		fnLookbookInfiniteScrollInit();
		fnLookbookListSearch();
	}

	// 인피니티 스크롤 초기화
	var fnLookbookInfiniteScrollInit = function (){
		sessionStorage.removeItem(document.location.href);
		$("#listBox").html("");
	}

	$(document).ready(function() {
		//$("#container .wrap .content .cont_body .event_list .event_top .ui_row .count").find('span').text(totalCnt.addComma());
		//fnGetLookbookList(lookbookGb,brandCd);
		//fnLookbookListSearch();
		fnLookbookReset();

		if(lookbookGb=='BL'){
			$("#brandBox").hide();
			$("#navHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
			$(".br_header").css('background-color','#fff');
		}else{
			$("#navHome").attr('href', '/');
			fnGetBrandList();
		}

		if(!gagajf.isNull($("#lbMainForm").find("input[name=totalCnt]").val())){
			$("#lookbookTotCnt").text($("#lbMainForm").find("input[name=totalCnt]").val());
		}
	});

/*]]>*/
</script>

</th:block>

</body>
</html>
