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

<th:block layout:fragment="content">
	<main role="" id="" class="container dp">
		<section class="content dp_submain">
			<th:block th:if="${cateMainLayoutList}" th:each="mainLayoutData, mainStat : ${cateMainLayoutList}" th:with="contentsLoc=${#strings.replace(mainLayoutData.contentsLoc,'SCM','')},contentsTitle=${mainLayoutData.contentsTitle}">
				<th:block th:if="${contentsLoc=='001'}">
					<div class="inner wide" th:if="${planningList != null and !planningList.empty}">
						<div class="submain_visual">
							<div class="swiper-container">
								<div class="swiper-wrapper">
									<div class="swiper-slide" th:each="item, status : ${planningList}">
										<a th:href="${item.strVar1}">
											<div class="img">
												<img th:src="${@environment.getProperty('domain.image') + '/' + item.imgPath1}" alt="">
											</div>
											<div class="txtWrap" th:classAppend="${(item.strVar7 == 'BLACK') ? '' :'w'}">
												<p class="bText">
													<input type="hidden" name="bannerTitle" th:value="${item.strTitle1}">
												</p>
												<p class="txt_xs" th:text="${item.subText1}">나만의 겨울 스타일 찾기</p>
											</div>
										</a>
									</div>
								</div>
								<div class="swiper-pagination"></div>
							</div>
						</div>
					</div>
				</th:block>

<!--				<th:block th:if="${contentsLoc=='004'}">-->
				<th:block th:if="${mainStat.index==1}" th:style="${'display:block'}" th:data="${mainStat.index}">
					<div class="inner bg_gray" >
						<div class="sub_category">
							<div class="cate_wrap">
							</div>
							<!-- 카테고리 3줄 이상일 경우 노출 -->
							<div class="more_btn">
								<button type="button" class="btn"><span>더보기</span></button>
							</div>
						</div>
					</div>
				</th:block>

<!--				</th:block>-->

				<th:block th:if="${contentsLoc=='002'}">
					<div class="inner wide" th:if="${newGoodsList != null}">
						<div class="new_item">
							<h2 class="dp_subtitle" th:text="${contentsTitle}">신상품</h2>
							<div class="swiper-container item_list">
								<div class="swiper-wrapper">
									<div class="swiper-slide" th:each="item, status : ${newGoodsList}">
										<div class="item_prod" th:if="${status.count<21}">
											<div class="item_state">
												<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, goodsNm=${item.goodsFullNm}, ithrCd='', contentsLoc='SCM001', planDtlSq=''">관심상품 추가</button>
												<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM001');">
													<div class="itemPic">
														<th:block th:each="option,idx:${item.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
															<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
															<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
														</th:block>
														<img alt="BLACK-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm}" onerror="noneImg(this)">
													</div>
													<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
													<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
													<div class="itemName" th:text="${item.goodsFullNm}">남성 로고 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건 자카드 방풍 패딩 스웨터 가디건</div>
<!--													<p class="itemPrice" th:text="${#numbers.formatInteger(item.currPrice,3,'COMMA')}">80,100</p>-->
													<p th:unless="${item.goodsType=='G056_D'}" class="itemPrice"><span class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(item.currPrice,1,'COMMA')}]]
														<span class=" itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
													</p>
													<p th:if="${item.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(item.currPrice,1,'COMMA')} + ' ~']]
													</p>
												</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

				<th:block th:if="${contentsLoc=='003'}">
					<div class="inner" th:if="${bestGoodsList != null}">
						<div class="best_item">
							<h2 class="dp_subtitle" th:text="${contentsTitle}">베스트 상품</h2>
							<div class="item_list">
								<div class="itemsGrp">
									<div class=" item_prod" th:each="item, status : ${bestGoodsList}">
										<div class="item_state">
											<button type="button" class="itemLike" th:classappend="${item.likeIt == 'likeit'}? 'likeit' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${item.goodsCd}, goodsNm=${item.goodsFullNm}, ithrCd='', contentsLoc='SCM002', planDtlSq=''">관심상품 추가</button>
											<a href="javascript:void(0);" class="itemLink" th:onclick="cfnGoToGoodsDetail([[${item.goodsCd}]], '', '', 'SCM002');">
												<div class="shape" th:classappend="${status.count==1}?'ranker'"><span th:text="${status.index+1}"></span></div>
												<div class=" itemPic">
													<th:block th:each="option,idx:${item.videos}" th:with="videoArr=${#strings.arraySplit(idx.current,':')}">
														<iframe th:if="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${'https://www.youtube.com/embed/'+videoArr[1]+'?autoplay=1&mute=1'}"></iframe>
														<iframe th:unless="${videoArr[0]=='Y'}" id="pdThumbVideo" class="pd_mov" th:src="${kollusMediaUrl+'/'+videoArr[1]+'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" allow="fullscreen" allowFullScreen></iframe>
													</th:block>
													<img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + item.sysImgNm.replace('https:', '').replace('//image.istyle24.com/Upload/ProductImage/','')}" onerror="noneImg(this)">
												</div>
												<p class="itemBrand" th:text="${item.brandGroupNm}">BRAND NAME</p>
												<div class="itemComment" th:if="${not #strings.isEmpty(item.goodsTnm)}" th:text="${item.goodsTnm}">#주문 폭주 상품</div>
												<div class="itemName" th:text="${item.goodsFullNm}">여성 체인 프린트 큐롯 스커트 프린트 큐롯 스커트</div>
												<p th:unless="${item.goodsType=='G056_D'}" class="itemPrice"><span class="itemPrice_original" th:if="${item.currPrice != item.listPrice}" th:text="${#numbers.formatInteger(item.listPrice,3,'COMMA')}">89,000</span>[[${#numbers.formatInteger(item.currPrice,1,'COMMA')}]]
													<span class=" itemPercent" th:if="${item.currPrice != item.listPrice}" th:text="${(item.listPrice == 0 ? 0 : #numbers.formatDecimal((item.listPrice - item.currPrice) / (item.listPrice * 1.0) * 100, 1, 0)) + '%'}">10%</span>
												</p>
												<p th:if="${item.goodsType=='G056_D'}" class="itemPrice">[[${#numbers.formatInteger(item.currPrice,1,'COMMA')} + ' ~']]
												</p>
												<div class="itemcolorchip">
													<th:block th:each="option, idx : ${item.colorArr}" th:with="colorArray=${#strings.arraySplit(idx.current,':')}">
														<span th:if="${colorArray[1]=='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';border:1px solid #aaa;'}" class="chip_color" th:value="${colorArray[0]}"></span>
														<span th:if="${colorArray[1]!='#FFFFFF'}" th:style="${'background-color:'+colorArray[1]+';'}" class="chip_color" th:value="${colorArray[0]}"></span>
													</th:block>
												</div>
												<p class="itemBadge">
													<th:block th:each="option, idx : ${item.benefitArr}" th:with="iconArray=${#strings.arraySplit(idx.current,':')}" >
														<span class="badge13" th:if="${idx.index<3}" th:value="${iconArray[0]}" th:text="${iconArray[1]}"></span>
													</th:block>
												</p>
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</th:block>

		</th:block>
		</section>
	</main>

	<script th:inline="javascript">
		$(document).ready(function () {
			fnSetCategory1Depts();

			//210728_ 수정 : 슬라이드 1개일때 자동롤링 멈춤.
			// 서브비주얼 슬라이드
			var subMainCont = $('.submain_visual .swiper-slide');
			var subMainLength = subMainCont.length;
			if (subMainLength < 2) {
				var swiper = new Swiper('.submain_visual .swiper-container', {
					observer: true,
					observeParents: true,
					loop:false,
					watchOverflow: true,
					speed:1000,
					a11y: {
						enabled: true,
						notificationClass: 'swiper-notification',
						prevSlideMessage: '이전 슬라이드',
						nextSlideMessage: '다음 슬라이드',
						firstSlideMessage: '첫번째 슬라이드 입니다',
						lastSlideMessage: '마지막 슬라이드 입니다',
						paginationBulletMessage: '슬라이드 {{index}}로 이동',
					},
					pagination: {
						el: '.submain_visual .swiper-pagination',
						type: 'fraction',
					},
				});
			}else{
				var swiper = new Swiper('.submain_visual .swiper-container', {
					observer: true,
					observeParents: true,
					loop:true,
					speed:1000,
					a11y: {
						enabled: true,
						notificationClass: 'swiper-notification',
						prevSlideMessage: '이전 슬라이드',
						nextSlideMessage: '다음 슬라이드',
						firstSlideMessage: '첫번째 슬라이드 입니다',
						lastSlideMessage: '마지막 슬라이드 입니다',
						paginationBulletMessage: '슬라이드 {{index}}로 이동',
					},
					autoplay : {
						delay : 3000,   // 시간 설정
						disableOnInteraction: false,
					},
					pagination: {
						el: '.submain_visual .swiper-pagination',
						type: 'fraction',
					},
				});
			}

			//210624_ 추가 : max-height 값 변경.
			var cate = this.querySelector('.cate_wrap');
			var moreOn = cate.clientHeight;
			if (moreOn < 137) {
				$('.sub_category .more_btn').css({"display": "none"});
			}else{
				$('.cate_wrap').css({"max-height": "14rem"});
				$('.sub_category .more_btn').css({"display": "block"});
			}

			$(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('더보기');
				}
			});

			var dp_newitem_slide = new Swiper('.new_item .swiper-container', {
				slidesPerView: 'auto',
				spaceBetween: 8,
				speed:1000,
				centerMode: true,
			});
		});

		// 카테고리1Depts 설정
		var fnSetCategory1Depts = function() {
			let allCate = [[${allCateList}]];
			$.each(allCate, function(idx1, cate1) {
				if ([[${params.cate1No}]] == cate1.cate1No) {
					let tag = '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate1.cateGb + '\', ' + cate1.cate1No + ');">전체</a>\n';
					if (cate1.leafYn == 'N' && cate1.cate2List.length > 0) {
						$.each(cate1.cate2List, function(idx2, cate2) {
							tag += '<a href="javascript:void(0);" onclick="cfnGoToGoodsList(0,\'' + cate2.cateGb + '\',' + cate2.cate1No + ',' + cate2.cate2No + ');">' + cate2.cate2Nm + '</a>\n';
						});
					}
					$('.cate_wrap').html(tag);
				}
			});
		}

		// 스크립트 제거
		function fnRemoveHTML(text){
			var reText = text.replace(/(<br>|<br\/>|<br \/>)/g, "\n");
			reText = reText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
			reText = reText.replace(/(?:\r\n|\r|\n)/g, '<br/>');
			return reText;
		}

		// 배너 슬라이더 <br> 처리
		$('.bText').each(function (){
			let tag = '';
			if(!gagajf.isNull($(this).find("input[name=bannerTitle]").val())){
				var brText = $(this).find("input[name=bannerTitle]").val();
				tag = fnRemoveHTML(brText);
				$(this).append(tag);
			}
		});

		function noneImg(noneSrc){
			$(noneSrc).parents('.itemPic').css({'background':'url(' + _uximgUrl + '/images/pc/thumb/bg_item_none.png)'});
			$(noneSrc).css({'opacity':'0'});
			//$(noneSrc).attr("src", no_src);
		}
	</script>

</th:block>

</body>
</html>
