<!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/DefaultLayoutMob">
<!--
 *******************************************************************************
 * @source  : LookbookMainFormMob.html
 * @desc    : 룩북리스트 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.09   bin2107     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<main role="" id="" class="container br">
		<section class="content br_lookbook">
			<div class="inner">
				<p class="title"><span id="lookbookTotCnt"></span>개 룩북</p>
				<div class="collection_wrap">
					<div class="collection_list" id="listBox">
					</div>
					<p class="last_page" id="divLastPage" style="display: none;">마지막 페이지입니다.</p>
				</div>
				<div class="no_lb_wrap" id="divLookbookNoData" style="display: none;">
					<p>등록된 룩북이 없습니다.</p>
					<button type="button" class="btn" th:if="${lbInfo.lookbookGb=='BL'}" th:onclick="cfnGoToBrandMain([[${lbInfo.brandCd}]]);"><span th:text="${brandGroupInfo.brandGroupNm+' 홈으로 가기'}"></span></button>
				</div>
			</div>
		</section>

	</main>

	<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 currUrl = document.location.href;

	var lookbookGb = [[${lbInfo.lookbookGb}]];
	if(lookbookGb != 'BL'){
		lookbookGb = 'L';
	}else{
		$(".dp_util .open_categori").hide();
		$("#filterChkArea").hide();
	}
	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){
		totalCnt = result.paging.totalCount;
		$("#lookbookTotCnt").text(totalCnt);
		$("#lbMainForm").find("input[name=totalCnt]").val(totalCnt);
		gagaInfiniteScroll.pageStatus.totalCount = totalCnt;
		console.log(result.dataList.length);

		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();
				}else{
					$("#divLastPage").show();
				}
			}else{
				if($("#lbMainForm input[name=pageNo]").val()==1){
					$("#divLookbookNoData").show();
				}
			}

			gagaInfiniteScroll.draw('not');
		}
	}

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

		$.each(result.dataList, function (idx, item){
			html += '<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">\n';
			html += '	<div class="collection">\n';
			html += '		<figure>\n';
			html += '			<img src="' + _imgUrl + item.orgTnfileNm + '" alt="">\n';
			html += '		</figure>\n';
			html += '		<p>'+item.title+'</p>\n';
			html += '	</div>\n';
			html += '</a>\n';
		});
		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 = '';
				tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
				$.each(result, function(idx, item) {
					tag += '<button type="button" id="chkFilterBrand'+idx+'" data-name="'+item.brandCd+'" onclick="fnAddBrand(\''+item.brandCd+'\');"><span>'+item.brandNm+'</span></button>\n';
				});
				$('#brandArea').html(tag);
			}
		});
	}

	// 브랜드 선택 적용
	var fnGetBrandLookbookList = function (){
		$("#lbMainForm input:hidden[name=multiBrandCd]").remove();
		var tag = '';
		var tag2 = '';
		$('#chkBrand').html('');
		$(".button_list button").each(function (index) {
			if($(this).hasClass("on")){
				if(!gagajf.isNull($(this).attr('data-name'))){
					tag += '<input type="hidden" name="multiBrandCd" value="'+$(this).attr('data-name')+'" />';
					$("#lbMainForm").append(tag);

					var brandCd = $(this).attr("data-name");
					var brandNm = $(this).find('span').text();
					tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\''+brandCd+'\');">'+brandNm+'</a>';
					$('#chkBrand').html(tag2);
				}else{
					$(this).addClass("on");
					tag2 += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>';
					$('#chkBrand').html(tag2);
				}
			}
		});

		var chkLen = $("#chkBrand").find('a').length;
		if(chkLen < 1){
			$('#chkBrand').html('<a href="javascript:void(0);" onclick="fnDeleteBrandFilter("");">전체</a>');
			$(".button_list button").each(function (index) {
				if(gagajf.isNull($(this).attr('data-name'))){
					$(this).addClass("on");
				}
			});
		}

		fnLookbookInfiniteScrollInit();
		fnLookbookListSearch();
	}

	// 브랜드 선택 초기화
	var fnLookbookReset = function (){
		fnLookbookInfiniteScrollInit();
		fnLookbookListSearch();
		//fnGetBrandLookbookList();
	}

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

	let fnGetLookbookList2 = function (lookbookGb, brandGroupNo){
		let actionUrl = '/display/lookbook/main/list?lookbookGb='+lookbookGb;
		if (!gagajf.isNull(brandGroupNo)) actionUrl += '&multiBrandCd=' + brandGroupNo;

		$.getJSON(actionUrl , function (result, status){
			if (status == 'success'){
				if (result.length > 0){
					$("#totCnt").html('<span>' + result.length.addComma() + '</span>');

					if (gagajf.isNull(brandGroupNo)){
						$('#brandArea').html('');
						let tag = '';
						let tag3 = '';
						let brandArr = [];
						tag += '<button type="button" data-name="" id="chkFilterBrand" class="on" onclick="fnAddBrand(\'\');"><span>전체</span></button>\n';
						$.each(result, function(idx, item) {
							if(!brandArr.includes(item.brandCd)){
								brandArr.push(item.brandCd);
								tag += '<button type="button" id="chkFilterBrand'+idx+'" data-name="'+item.brandCd+'" onclick="fnAddBrand(\''+item.brandCd+'\');"><span>'+item.brandNm+'</span></button>\n';
							}
						});
						$('#brandArea').html(tag);
					}else{
						var html = '';
						let onCnt = 0;
						$(".button_list button").each(function (index) {
							if($(this).hasClass("on")){
								var brandCd = $(this).attr("data-name");
								var brandNm = $(this).find('span').text();
								html += '<a href="javascript:void(0);" onclick="fnDeleteBrandFilter(\''+brandCd+'\');">'+brandNm+'</a>';
								$('#chkBrand').html(html);
								onCnt++;
							}
						});

						if(onCnt<1){
							$(".button_list button").each(function (index) {
								if(gagajf.isNull($(this).attr('data-name'))){
									$(this).addClass("on");
								}
							});
							$('#chkBrand').html('<a href="javascript:void(0);" onclick="fnReset();">전체</a>');
						}
					}

					var tag2 = '';
					$.each(result, function(idx, item){
						tag2 += '<li>\n';
						tag2 += '	<a href="javascript:void(0);" onclick="cfnGoToLookbookDetail(\''+lookbookGb+'\','+item.lookbookSq+','+item.brandCd+')">\n';
						tag2 += '		<div class="ev_img">\n';
						tag2 += '			<img src="' + _imgUrl + item.orgTnfileNm + '" alt="">\n';
						tag2 += '		</div>\n';
						tag2 += '		<div class="ev_txt">\n';
						if(lookbookGb != 'BL') {
							tag2 += '			<p class="brand">' + item.brandNm + '</p>\n';
						}
						tag2 += '			<p class="tit">'+item.title+'</p>\n';
						tag2 += '		</div>\n';
						tag2 += '	</a>\n';
						tag2 += '</li>\n';
					});
					$('#lookbookArea').html(tag2);
					$('#divLookbookNoData').hide();
					$('#lookbookArea').show();
				}else{
					$("#totCnt").html('<span>0</span>');
					//document.getElementById("changeClass").class = "event_list no_data";
					$('#lookbookArea').hide();
					$('#divLookbookNoData').show();
				}
			}
			//document.getElementById("brandBox").class = "btn btn_default tgl_dropdown";
			$('.dropdown_menu').hide();
		});
	}

	// 필터 브랜드 선택시
	var fnAddBrand = function (obj){
		$(".button_list button").each(function (index) {
			if(gagajf.isNull(obj)){
				if($(this).attr('data-name') != ''){
					$(this).removeClass();
				}
			}else{
				if($(this).attr('data-name') == ''){
					$(this).removeClass();
				}
			}
		});
	}

	// 초기화버튼
	var fnReset = function (){
		$('.reset').click();
	}

	// 리스트상단 필터 리스트에서 삭제 시
	var fnDeleteBrandFilter = function (brandGroupNo){
		$(".button_list button").each(function (index) {
			if($(this).hasClass("on")){
				if(brandGroupNo == $(this).attr('data-name')){
					$(this).removeClass();
				}
			}
		});

		fnGetBrandLookbookList();
	}

	$(document).ready(function(){
		// fnGetLookbookList(lookbookGb,brandCd);
		//fnLookbookListSearch();
		fnLookbookReset();

		if(lookbookGb=='BL'){
			$("#btnHome").attr('onclick', 'cfnGoToBrandMain('+brandCd+');');
		}else{
			$("#btnHome").attr('href', '/');
			fnGetBrandList();
		}

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

		$(document).on('click','.sub_category .more_btn',function(){
			$(this).toggleClass('on');
			$('.sub_category .cate_wrap').toggleClass('on');
			if($(this).hasClass('on')){
				$(this).find('span').text('접기');
			}else{
				$(this).find('span').text('더보기');
			}
		});

		// 210415_팝업관련 추가
		//기간 선택 팝업
		$(document).on("click", ".open_categori", function(){
			$('#odDatePop').show().addClass("active");
			$("body").css({"overflow":"hidden"});
		});
		//팝업_닫기
		$('.popup_close').on("click",function(){
			$('.popup_box').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});
		// 210415_팝업 테두리 선택 추가
		$(document).ready(function(){
			$(document).on('click','.popup_box .button_list button',function(){
				//$('.popup_box .button_list button').removeClass('on');
				$(this).toggleClass('on');
			})
		});
		$(document).on('click','.popup_box .button_list button',function(){
			$(this).parents('.popup_box').show().addClass('active');
			//$("body").css({"overflow":"visible"});
		});
		$(document).on('click','.brand_floormenu .refresh',function(){
			$('.popup_box .button_list button').removeClass('on');
			$('#chkFilterBrand').addClass('on');
		});
		$(document).on('click','.popup_box .buying',function(){
			$(this).parents('.popup_box').hide().removeClass('active');
			$("body").css({"overflow":"visible"});
		});

	});

	/*]]>*/
</script>

</th:block>

</body>
</html>
