<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsDealListForm.html
 * @desc	: 딜 구성상품 상세정보 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.24   eskim		최초 작성
 *******************************************************************************
 -->
<div class="full_popup_wrap" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}">
	<h5 class="sr-only">개별상품 상세정보 안내</h5>
	<div class="btn_close">
		<a href="javascript:void(0)" onclick="cfCloseFullLayer('layer_goods_deal_detail');">닫기버튼</a>
	</div>
	<div class="full_pop_header">
		<!-- 아이템선택 -->
		<div class="form_field">
			<div class="select_custom deal_opt_item">
				<div class="combo">
					<div class="select">
						<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>
									<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
									<div class="itemName" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</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')}">149,000</span>
										<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
									</p>
								</a>
							</div>
						</div>
					</div>
					<ul class="list" th:if="${goodsDealComposeList  != null and !goodsDealComposeList.empty}">
						<li class="selected" th:each="goodsInfo, status : ${goodsDealComposeList}" >
							<div class="item_prod">
								<div class="item_state">
									<a href="javascript:void(0);" class="itemLink" th:onclick="fnGoodsDealDesc([[${goodsInfo.compsGoodsCd}]])">
										<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>
										<p class="itemBrand" th:text="${goodsInfo.brandGroupNm}">NBA 키즈</p>
										<div class="itemName" th:text="${goodsInfo.goodsFullNm}">유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업 유니 삼단블록 플리스 집업</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')}">149,000</span>
											<span class="itemPercent" th:if="${goodsInfo.dcRate > 0}" th:text="|${#numbers.formatDecimal(goodsInfo.dcRate,0,0)}%|">30%</span>
										</p>
									</a>
								</div>
							</div>
						</li> 
					</ul>
				</div>
			</div>
		</div>
		<!-- //아이템선택 -->
	</div>
	<div class="full_pop_container" id="goodsDealDetail">
		<!-- 개별상품 상세정보 팝업 내용 -->
	</div>
	<div class="full_pop_fix_r">
		<div class="option_box">
			<div class="opt_select">
				<div class="form_field">
					<div class="select_custom deal_opt1">
						<div class="combo">
							<div class="select">선택</div>
							<ul class="list">
								<li class="selected">선택</li> 
								<li aria-disabled="true" data-soldout="true">
									<div>상품옵션07</div>
									<div>120,000원</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="form_field">
					<div class="select_custom deal_opt2" disabled>
						<div class="combo">
							<div class="select">선택</div>
							<ul class="list">
								<!-- 선택처리 class="selected" / 선택불가 aria-disabled="true" / 품절표기 data-soldout="true" 추가  -->
								<li class="selected">선택</li> 
								<li aria-disabled="true" data-soldout="true">
									<div>상품옵션17</div>
									<div>120,000원</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="opt_result">
				
			</div>
		</div>
		<div class="price_box">
			<p class="number">
				총&nbsp;<span>0</span>개
			</p>
			<p class="price">
				<span>
					0<em>원</em>
				</span>
			</p>
		</div>
		<div class="btn_box">
			<div class="btn_group_block ui_row">
				<div class="ui_col_6">
					<button id="btn_add_cart" class="btn btn_dark btn_block" ><span>쇼핑백</span></button>
				</div>
				<div class="ui_col_6">
					<button class="btn btn_primary btn_block" id=""><span>바로구매</span></button>
				</div>
			</div>
			<div class="btn_group_block ui_row">
				<div class="ui_col_12">
					<button class="btn btn_dark btn_block" id="" disabled><span>SOLD OUT</span></button>
				</div>
			</div>
		</div>
	</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var pop_desc_option01 = new sCombo('.pd_descrp_pop .select_custom.deal_opt_item');
	
	// 구성 상품 상세 
	var fnGoodsDealDetail = function(params) {
		gagajf.ajaxSubmit("/goods/deal/detail/info/frame", "html", "goodsDealDetail", params);
	}
	
	// 상품선택시
	var fnGoodsDealDesc = function(goodsCd){
		var params = new Object();
		params.goodsCd = goodsCd;
		fnGoodsDealDetail(params);  // ajax html
	}
	
	$(document).ready( function() {

		var params = new Object();
		params.goodsCd = [[${params.compsGoodsCd}]];
		params.adminYn = [[${params.adminYn}]];
		fnGoodsDealDetail(params);  // ajax html
		
		let $obj = $('.pd_detail .opt_result'); 
		let $taget = $('.full_pop_fix_r .opt_result');
		$taget.html($obj.html());
		
		fnSetTotalPrice();
		
	});
	
	
/*]]>*/
</script>

 </html>