<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source: GoodsIncludeFormMob.html
 * @desc: 상품상세 Include Page - 공용
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VERDATE AUTHORDESCRIPTION
 * =====================================================================
 * 1.02021.03.02 eskim	 최초 작성
 *******************************************************************************
 -->

<!-- 상품상세 SNS-->
<th:block th:fragment="goodsSnsForm" >
<!-- toggle contents -->
<div class="modal-body">
	<!-- toggle contents -->
	<div id="layerShare" class="setShare open"  th:with="stylelUrl=${@environment.getProperty('domain.front')}, imgGoodsUrl=${@environment.getProperty('upload.goods.view')}">
		<span>
			<button type="button" id="kakao-link-btn" class="kk" th:attr="onclick=|cfnSendToKakao('${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '${imgGoodsUrl+ '/'+goodsInfo.sysImgNm}');|"><span>카카오톡</span></button>
			<button type="button" class="fb" th:attr="onclick=|sendSns('facebook', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm}', '', '');|"><span>페이스북</span></button>
			<button type="button" class="tw" th:attr="onclick=|sendSns('twitter', '${stylelUrl+'/goods/detail/form?goodsCd='+goodsInfo.goodsCd}', '${goodsInfo.goodsFullNm+ '#style24몰'}', '', '');|"><span>트위터</span></button>
			<button type="button" class="url btn_copy" onclick="copyToClipboard();"><span>URL</span></button>
		</span>
	</div>
</div>
</th:block>

<!-- 딜 상품 상품소개영역 -->
<th:block th:fragment="goodsDealComposeForm">
<!-- ***** 상품소개영역 ***** -->
<div class="inner wide" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
	<div class="pd_desc_wrap">
		<div class="tab_detail_nav">
			<ul>
				<li class="active"><a href="javascript:void(0)">상세정보</a></li>
				<li><a href="javascript:void(0)">리뷰<em><th:block  th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA')  : '9,999+'}"></th:block></em></a></li>
				<li><a href="javascript:void(0)">문의<em><th:block  th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block></em></a></li>
				<li class=""><a href="javascript:void(0)">배송/반품</a></li>
			</ul>
		</div>
		<!-- 상품상세정보 -->
		<div class="tab_detail_cont pd_dealitem" style=display:block;>
			<div class="itemsGrp" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
				<div class="item_prod" th:each="goodsInfo, status : ${goodsDealComposeList}">
					<div class="item_state">
						<a href="javascript:void(0);" class="itemLink" th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]],[[${goodsInfo.compsGoodsCd}]])">
							<div class="shape dealdetail"><span>상품<br/><th:block th:text="${#numbers.formatInteger(status.count,2)}">01</th:block> </span></div>
							<div class="itemPic">
								<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=156'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
							</div>
							<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
							<div class="itemName" th:text="${goodsInfo.goodsFullNm}">남성 </div>
							<p class="itemPrice">
								<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
								<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
								<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
							</p>
						</a>
						<button type="button" class="btn btn_default" th:onclick="fnGoodsDealOptionOpen([[${goodsInfo.compsGoodsCd}]])">옵션 선택</button>
					</div>
				</div>
			</div>
		</div>
		<!-- //상품상세정보 -->
		<!-- 상품리뷰 리스트 -->
		<div class="tab_detail_cont pd_review">
			<div class="cont_head">
				<h3 class="sr-only">상품리뷰 목록</h3>
				<div class="deal_listReview_open">
					<!-- 아이템 -->
					<div class="item_blk">
						<div class="item_prod">
							<div class="item_state">
								<a href="javascript:void(0)" class="itemLink">
								<div class="itemPic">
									<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
								</div>
								<div class="itemName">선택</div>
							</a>
							</div>
						</div>
					</div>
					<!-- //아이템 -->
				</div>
			</div>
			<div class="cont_body" id="goodsDealReview"></div>
		</div>
		<!-- //상품리뷰 리스트 -->
		<!-- 상품문의 리스트 -->
		<div class="tab_detail_cont pd_qnalist">
			<div class="cont_head">
				<h3 class="sr-only">상품문의 목록</h3>
			<div class="deal_listQna_open">
				 <!-- 아이템 -->
				<div class="item_blk">
					<div class="item_prod">
						<div class="item_state">
							<a href="javascript:void(0)" class="itemLink">
								<div class="itemPic">
									<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
								</div>
								<div class="itemName">선택</div>
							</a>
						</div>
					</div>
				</div>
				<!-- //아이템 -->
			</div>
			</div>
		<div class="cont_body"  id="goodsDealQna"></div>
		</div>
		<!-- //상품문의 리스트 -->
		<!-- 배송/교환/반품 정보 -->
		<div class="tab_detail_cont pd_delivery">
			<div class="cont_head">
				<h3 class="sr-only">배송/교환/반품 정보</h3>
			<div class="deal_listDelivery_open">
				<!-- 아이템 -->
				<div class="item_blk">
					<div class="item_prod">
						<div class="item_state">
							<a href="javascript:void(0)" class="itemLink">
								<div class="itemPic">
									<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=80'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
								</div>
								<div class="itemName">선택</div>
							</a>
						</div>
					</div>
				</div>
				<!-- //아이템 -->
			</div>
			</div>
		<div class="cont_body" id="goodsDealDelivery" ></div>
		</div>
		<!-- //배송/교환/반품 정보 -->
	</div>
</div>

<!-- 딜리뷰제품리스트팝업 -->
<div class="pd_pop list_pop pd_pop pd_listReview_pop" id="listReviewPop">
	<div class="modal_content">
		<div class="close">닫기</div>
		<div class="listpop_body">
			<!-- 아이템선택 -->
			<div class="deal_list_select">
				<ul class="list">
					<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
						th:onclick="fnSelGoodsDealReview([[${goodsInfo.compsGoodsCd}]])">
						<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
							<div class="item_state active">
								<a href="javascript:void(0);" class="itemLink">
									<div class="itemPic">
										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=331'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
									</div>
									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
									<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+'] '}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
									<div class="itemText">
										<span class="tx1">(리뷰 <th:block  th:text="${(goodsInfo.reviewRegCnt <= 9999) ? #numbers.formatInteger(goodsInfo.reviewRegCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</span>
									</div>
								</a>
								<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}"  th:attr="currPrice=${goodsInfo.currPrice}, selfGoodsYn=${goodsInfo.selfGoodsYn}"/>
							</div>
						</div>
					</li> 
				</ul>
			</div>
			<!-- //아이템선택 -->
		</div>
	</div>
</div>
<!-- //딜리뷰제품리스트팝업 -->

<!-- 딜문의제품리스트팝업 -->
<div class="pd_pop list_pop pd_pop pd_listQna_pop" id="listQnaPop">
	<div class="modal_content">
		<div class="close">닫기</div>
		<div class="listpop_body">
			<!-- 아이템선택 -->
			<div class="deal_list_select">
				<ul class="list">
					<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
						th:onclick="fnSelGoodsDealQna([[${goodsInfo.compsGoodsCd}]])">
						<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
							<div class="item_state active">
								<a href="javascript:void(0);" class="itemLink">
									<div class="itemPic">
										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=331'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
									</div>
									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
									<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+'] '}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
									<div class="itemText">
										<span class="tx1">(문의 <th:block  th:text="${(goodsInfo.goodsQnaCnt <= 9999) ? #numbers.formatInteger(goodsInfo.goodsQnaCnt, 0,'COMMA')  : '9,999+'}"></th:block>)</span>
									</div>
								</a>
								<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
							</div>
						</div>
					</li>  
				</ul>
			</div>
			<!-- //아이템선택 -->
		</div>
	</div>
</div>
<!-- //딜문의제품리스트팝업 -->

<!-- 딜배송제품리스트팝업 -->
<div class="pd_pop list_pop pd_pop pd_listDelivery_pop" id="listDeliveryPop">
	<div class="modal_content">
		<div class="close">닫기</div>
		<div class="listpop_body">
			<!-- 아이템선택 -->
			<div class="deal_list_select">
				<ul class="list">
					<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
						th:onclick="fnSelGoodsDealDelivery([[${goodsInfo.compsGoodsCd}]])">
						<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
							<div class="item_state active">
								<a href="javascript:void(0);" class="itemLink">
									<div class="itemPic">
										<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=331'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
									</div>
									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
									<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+'] '}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block> </div>
								</a>
								<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
							</div>
						</div>
					</li> 
				</ul>
			</div>
			<!-- //아이템선택 -->
		</div>
	</div>
</div>
<!-- //딜배송제품리스트팝업 -->

<!-- 딜제품상세보기팝업 -->
<div class="modal pop_full fade pd_pop pd_descrp_pop" id="pdDescrpPop" tabindex="-1" role="dialog" aria-labelledby="exampleFullLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<div class="deal_listDescrp_open">상품 1</div>
			</div>
			<div class="modal-body">
				<!-- 아이템 -->
				<div class="item_blk">
					<div class="item_prod">
						<div class="item_state">
							<a href="#none" class="itemLink">
								<div class="itemPic">
									<img alt="" class="vLHTC pd_img" src="/images/pc/thumb/tmp_pdDetail1.jpg">
								</div>
								<p class="itemBrand">NBA 키즈</p>
								<div class="itemName"><span class="tit_option">[상품1]</span>유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</div>
								<p class="itemPrice">
									134,100
									<span class="itemPrice_original">149,000</span>
									<span class="itemPercent">30%</span>
								</p>
							</a>
						</div>
					</div>
				</div>
				<!-- 아이템 -->
				<div class="pop_cont" id="goodsDealDetail"></div>
				<!-- 상세정보리스트팝업 -->
				<div class="pd_pop list_pop pd_pop pd_listDescrp_pop" id="listDescrpPop">
					<div class="modal_content">
						<!-- <div class="close">닫기</div> -->
						<div class="listpop_body">
							<!-- 아이템선택 -->
							<div class="deal_list_select">
								<ul class="list">
									<li th:each="goodsInfo, status : ${goodsDealComposeList}" 
										th:onclick="fnOpenGoodsDealDetail([[${goodsInfo.goodsCd}]], [[${goodsInfo.compsGoodsCd}]])"
										 class="selected">
										<div class="item_prod" th:attr="goodsCd=${goodsInfo.compsGoodsCd}">
											<div class="item_state active">
												<a href="javascript:void(0);" class="itemLink">
													<div class="itemPic">
														<img alt="" class="vLHTC pd_img" th:src="${imgGoodsUrl+'/'+goodsInfo.sysImgNm+'?RS=331'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'">
													</div>
													<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">BRAND NAME1</p>
													<div class="itemName" ><span class="tit_option" th:text="${'[상품'+status.count+'] '}">[상품1]</span><th:block th:text="${goodsInfo.goodsFullNm}"></th:block></div>
													<p class="itemPrice">
														<th:block th:text="${#numbers.formatInteger(goodsInfo.currPrice, 0,'COMMA')}"> 134,100</th:block>
														<span class="itemPrice_original" th:if="${goodsInfo.listPrice > goodsInfo.currPrice}" th:text="${#numbers.formatInteger(goodsInfo.listPrice, 0,'COMMA')}">89,000</span>
														<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">10%</span>
													</p>
												</a>
												<input type="hidden" name="selectGoods" th:value="${goodsInfo.compsGoodsCd}" />
											</div>
										</div>
									</li>
								</ul>
							</div>
							<!-- //아이템선택 -->
						</div>
					</div>
				</div>
				<!-- //상세정보리스트팝업 -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn_primary" id="btn_deal_purchase">구매하기</button>
			</div>
		</div>
	</div>
</div>
<!-- //딜제품상세보기팝업 -->

<script th:inline="javascript">
/*<![CDATA[*/
	
	
	// 구성 상품 상세 상품평
	var fnGoodsDetailReview = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/review/frame", "html", "goodsDealReview", params);
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/review/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealReview").css("display", "block");
					$("#goodsDealReview").html(result);
				}
			}
		});
		
	}
	
	// 상품평 상품선택시
	var fnSelGoodsDealReview = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailReview(params);  // ajax html
		
		$('.pd_pop.pd_listReview_pop').find('.deal_list_select .list li').each(function() { 
			$(this).removeClass('selected');
			if (goodsCd == $(this).find('input[name=selectGoods]').val()){
				$(this).addClass('selected');
				//let tag = $(this).find('.item_prod').parent().html();
				let tag = $(this).html();
				$('.tab_detail_cont.pd_review .item_blk').html(tag);
			}
		});

	}
	
	// 구성 상품 상세 문의
	var fnGoodsDetailQna = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/qna/frame", "html", "goodsDealQna", params);
		
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/qna/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealQna").css("display", "block");
					$("#goodsDealQna").html(result);
					fnGoodsQnaList();
				}
			}
		});
	}
	
	// 문의 상품선택시
	var fnSelGoodsDealQna = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailQna(params);  // ajax html
		
		$('.pd_pop.pd_listQna_pop').find('.deal_list_select .list li').each(function() { 
			if (goodsCd == $(this).find('input[name=selectGoods]').val()){
				$('.pd_pop.pd_listQna_pop').find('.deal_list_select .list li').removeClass('selected');
				$(this).addClass('selected');
				let tag = $(this).html();
				$('.tab_detail_cont.pd_qnalist .item_blk').html(tag);
			}
		});

	}
	
	// 구성 상품 상세 배송정보
	var fnGoodsDetailDelivery = function(params) {
		//gagajf.ajaxSubmit("/goods/detail/delivery/frame", "html", "goodsDealDelivery", params);
		$.ajax( {
			type		: "POST",
			url 		: '/goods/detail/delivery/frame',
			data		: JSON.stringify(params),
			dataType 	: 'html',
			beforeSend : function(xhr, settings) {
				xhr.setRequestHeader("AJAX"			, "true");
				xhr.setRequestHeader('Accept'		, 'application/json');
				xhr.setRequestHeader('Content-Type'	, 'application/json');
			},
			success 	: function(result) {
				if (result != null) {
					$("#goodsDealDelivery").css("display", "block");
					$("#goodsDealDelivery").html(result);
				}
			}
		});	
	}
	
	// 배송정보 상품선택시
	var fnSelGoodsDealDelivery = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDetailDelivery(params);  // ajax html
		
		$('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').each(function() { 
			
			if (goodsCd == $(this).find('input[name=selectGoods]').val()){
				$('.pd_pop.pd_listDelivery_pop').find('.deal_list_select .list li').removeClass('selected');
				$(this).addClass('selected');
				let tag = $(this).html();
				$('.tab_detail_cont.pd_delivery .item_blk').html(tag);
			}
		});
	}
	
	// 상품선택시 상품상세내용 변경
	var fnOpenGoodsDealDetail = function(goodsCd, compsGoodsCd){
		
		// 탭별 선택시 기본 상품 설정
		let selIdx = 0;
		let selfGoodsYn = '';
		let currPrice = 0;
		let soldoutYn = "N";
		$('#listDescrpPop').find('.deal_list_select .list li').each(function() { 
			if (compsGoodsCd == $(this).find('input[name=selectGoods]').val()){
				$('#listDescrpPop').find('.deal_list_select .list li').removeClass('selected');
				$(this).addClass('selected');
				let tag = $(this).html();
				$('#pdDescrpPop').find('.item_blk').html(tag);
				$('.deal_listDescrp_open').html('상품'+ (selIdx+1));
			}
			selIdx ++;
		});
		
		//$selObj.find('.combo .list li').eq(selIdx).trigger("click");
		
		// 상세노출
		fnGoodsDealDesc(compsGoodsCd);
/* 		
		if (!soldout){
			// 옵션1 처리
			fnOption1("layer", compsGoodsCd, currPrice, selfGoodsYn);	
		}
 */		
		
	/* 	let $obj = $('.pd_detail .opt_result'); 
		let $taget = $('.full_pop_fix_r .opt_result');
		$taget.html($obj.html());
		
		fnSetTotalPrice();
		
		$('body').addClass('lock');
		$("#layer_goods_deal_detail").show();  */
		
	}
	
	// 레이어에서 상품선택시
	var fnGoodsDealDesc = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		params.adminYn = "Y";
		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
		$("#pdDescrpPop").modal("show");
		
		//개별 상품 상세에서 상품 선택 Select가 펼쳐진 상태에서 팝업을 닫은 다음 재진입한 경우 상품 선택 Select가 닫힌 상태로 노출
		$("#pdDescrpPop .deal_listDescrp_open").removeClass("active");
		$("#listDescrpPop").hide(); 
	}
	
	//팝업 - 딜상세팝업 구매하기버튼
	$(document).on('click','#btn_deal_purchase',function(e){
		let selGoodsCd = $('#pdDescrpPop').find('input[name=selectGoods]').val();
		fnGoodsDealSaleOpen(selGoodsCd);
	});
	

	$(document).ready( function() {
		
	});
	
	
/*]]>*/
</script>
</th:block>

</html>