<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsSizeStockForm.html
 * @desc    : 상품 옵셥/재고 화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.10.26   eskim       수정
 *******************************************************************************
 -->
	<table class="frmStyle" th:with="uploadGoodsUrl=${@environment.getProperty('upload.goods.view')},uxImgUrl=${@environment.getProperty('domain.uximage')}">
		<colgroup>
			<col width="100px"/>
			<col width="100px"/>
			<col width="10%"/>
			<col width="100px"/>
			<col width="100px"/>
			<col/>
		</colgroup>
		<tr>
			<th>번호</th>
			<th>대표색상</th>
			<th>이미지</th>
			<th>색상코드</th>
			<th>색상</th>
			<th>이미지관리</th>
		</tr>
		<tbody id="colorList" >
		<th:block  th:if="${goodsColorList}" th:each="goodsColor, sizeStatus : ${goodsColorList}">
		<tr>
			<td class="aC" th:text="${sizeStatus.count}">1</td>
			<td class="aC"><label class="rdoBtn"><input type="radio" name="basicColor" th:value="${goodsColor.optCd1}"  th:checked="${goodsColor.mainColorYn =='Y'}" /></label></td>
			<td class="aC">
				<img width="60" th:src="${uploadGoodsUrl+'/'+goodsColor.sysImgNm+'?RS=60'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/image/no.png'}+'\';'" alt="">
				<input type="hidden" name="sysImgNmOrg" id="sysImgNmOrg" th:value="${goodsColor.sysImgNm}"/>
			</td>	
			<td class="aC" ><th:block th:text="${goodsColor.optCd1}">BK</th:block> 
				<input type="hidden" name="colorCd" id="colorCd" th:value="${goodsColor.optCd1}"/>
			</td>
			<td class="aC" ><th:block th:text="${goodsColor.colorEnm}">BLACK</th:block>  
				<input type="hidden" name="colorNm" id="colorNm" th:value="${goodsColor.colorEnm}"/>
			</td>
			<td><button type="button" class="btn btn-base btn-lg" onclick="fnGoodsDetailImg(this)" th:text="${#strings.isEmpty(goodsColor.sysImgNm) ?'등록':'수정'}">등록</button></td>
		</tr>
		</th:block>
		</tbody>
	</table>
	<ul class="panelBar">
		<li>
			<h3 class="marL10 cRed"><i class="fa fa-info-circle" aria-hidden="true"></i>옵션추가시 옵션1, 옵션2를 정확히 입력해주세요. 저장 후 수정할수 없습니다.</h3>
		</li>	
		<li class="right">
			<th:block th:if="${goods.selfGoodsYn == 'N' and sessionInfo.roleCd == 'G001_B000' and goods.goodsType == 'G056_N'}">
			<button type="button" class="btn btn-info btn-lg" id="btnOptionAdd" >옵션추가</button>
			</th:block>
		</li>
	</ul>
	<table class="frmStyle">
		<colgroup>
			<col width="10%"/>
			<col width="10%"/>
			<col/>
			<col width="10%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="7%"/>
			<col width="5%"/>
		</colgroup>
		<tr th:if="${goods.selfGoodsYn == 'Y' and goods.goodsType == 'G056_N'}">
			<th colspan="2">ERP재고연동여부<em class="required" title="필수"></em></th>
			<td colspan="2">
				<label class="rdoBtn"><input type="radio" name="erpStockLinkYn" id="erpStockLinkYnY" value="Y" th:checked="${goods.erpStockLinkYn == 'Y'}"/>Y</label>
				<label class="rdoBtn"><input type="radio" name="erpStockLinkYn" id="erpStockLinkYnN" value="N" th:checked="${goods.erpStockLinkYn == 'N'}"/>N</label>
				<input type="hidden" id="erpStockLinkYnOrg" name="erpStockLinkYnOrg" th:value="${goods.erpStockLinkYn}"/>
			</td>
			<td colspan="7"></td>
		</tr>
		<th:block th:if="${goods.selfGoodsYn == 'N' or goods.goodsType != 'G056_N'}">
			<input type="hidden" id="erpStockLinkYnOrg" name="erpStockLinkYnOrg" th:value="${goods.erpStockLinkYn}"/>
			<input type="hidden" id="erpStockLinkYn" name="erpStockLinkYn"  th:value="${goods.erpStockLinkYn}"/>
		</th:block>
		<tr>
			<th>상품코드</th>
			<th>옵션1(색상)</th>
			<th>옵션2(사이즈)</th>
			<th>추가가격</th>
			<th>노출순서</th>
			<th>노출여부</th>
			<th>가용재고</th>
			<th>안전재고</th>
			<th>출고대기</th>
			<th>판매가능재고</th>
			<th>품절여부</th>
			<th></th>
		</tr>
		<tbody id="optionList" >
		<th:block  th:if="${goodsSizeList}" th:each="goodsSize, sizeStatus : ${goodsSizeList}">
		<tr>
			<td th:rowspan="${goodsSize.rcount}" th:text="${goodsSize.compsGoodsCd}" th:if="${goodsSize.rnum == 1}"></td>
			<td><th:block th:text="${goodsSize.optCd1}"></th:block>
				<input type="hidden" name="compsGoodsCd" th:value="${goodsSize.compsGoodsCd}" />
				<input type="hidden" name="optCd" th:value="${goodsSize.optCd}" />
				<input type="hidden" name="optCd1" th:value="${goodsSize.optCd1}" />
				<input type="hidden" name="hidOptCd1" th:value="${goodsSize.optCd1}" />
			</td>
			<td><th:block th:text="${goodsSize.optCd2}"></th:block>
				<input type="hidden" name="optCd2" th:value="${goodsSize.optCd2}" />
			</td>
			<td><input type="text" class="w100p aR" name="addPrice" th:value="${goodsSize.addPrice}"  maxlength="7"  data-valid-type="numeric"/>
				<input type="hidden" name="hidAddPrice" th:value="${goodsSize.addPrice}" />
			</td>
			<td><input type="text" class="w100p aC" name="dispOrd" th:value="${goodsSize.dispOrd}"  maxlength="7" data-valid-type="numeric"/>
				<input type="hidden" name="hidDispOrd" th:value="${goodsSize.dispOrd}" />
			</td>
			<td><select name="dispYn" class="w100p aC">
					<option th:if="${useYnList}" th:each="oneData, status : ${useYnList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}" th:selected="${goodsSize.dispYn == oneData.cd}"></option>
				</select>
				<input type="hidden" name="hidDispYn" th:value="${goodsSize.dispYn}"/>
			</td>
			<td><input type="text" class="w100p aC" name="editCurrStockQty" th:value="${goodsSize.currStockQty}" maxlength="10" data-valid-type="numeric" th:disabled="${goods.selfGoodsYn == 'Y'}"/>
				<input type="hidden" name="currStockQty" th:value="${goodsSize.currStockQty}"/>
			</td>
			<td><input type="text" class="w100p aC"  name="baseStockQty" th:value="${goodsSize.baseStockQty}" maxlength="7" data-valid-type="integer">
				<input type="hidden" name="hidBaseStockQty" th:value="${goodsSize.baseStockQty}"/>
			</td>
			<td><input type="text" class="w100p aC" name="saleStockQty" th:value="${goodsSize.saleStockQty}" maxlength="17" data-valid-type="numeric" th:disabled="disabled"/>
			</td>
			<td><input type="text" class="w100p aC"  name="ableStockQty" maxlength="7" data-valid-type="numeric" th:disabled="disabled" th:value="${goodsSize.ableStockQty}" /></td>
			<td><select name="soldoutYn" class="w100p aC" >
					<option th:if="${useYnList}" th:each="oneData, status : ${useYnList}" th:value="${oneData.cd}" th:text="${oneData.cdNm}" th:selected="${goodsSize.soldoutYn == oneData.cd}"></option>
				</select>
				<input type="hidden" name="hidSoldoutYn" th:value="${goodsSize.soldoutYn}"/>
				<input type="hidden" name="storeMaxQty" th:value="${goodsSize.storeMaxQty}"/>
			</td>
			<td></td>
		</tr>
		</th:block>
	</table>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var fnGoodsDetailImg = function(obj){
		var mode= 'U';
		var goodsCd = $('#goodsDetailForm input[name=goodsCd]').val();
		var colorCd = $(obj).parent().parent().find("input[name=colorCd]").val();
		var colorNm = $(obj).parent().parent().find("input[name=colorNm]").val();
		
		if (gagajf.isNull($(obj).parent().parent().find("input[name=sysImgNmOrg]").val())){
			mode = "C";
		}
		
		cfnOpenGoodsImagePopup(goodsCd, colorCd, colorNm, mode);
		
	}
	
	//옵션추가버튼 클릭 시
	$('#btnOptionAdd').click(function() {
		
		var len =   $('#goodsDetailForm').find('#optionList tr').length;
		var goodsCd = $('#goodsDetailForm input[name=goodsCd]').val();
		
		var addOptionHtml = "";
		addOptionHtml += '<tr>\n';
		addOptionHtml += '	<td>\n';
		addOptionHtml += '		<input type="hidden" name="compsGoodsCd" value="'+ goodsCd +'"/>\n';
		addOptionHtml += '		<input type="hidden" name="optCd"/>\n';
		addOptionHtml += '		<input type="hidden" name="hidOptCd1"/>\n';
		addOptionHtml += '		<input type="text" name="optCd1" class="W100" maxlength="30"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" name="optCd2" class="W100" maxlength="30"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aR" name="addPrice"  maxlength="7"  data-valid-type="numeric" value="0"/>\n';
		addOptionHtml += '		<input type="hidden" name="hidAddPrice" />\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aC" name="dispOrd" maxlength="7" data-valid-type="numeric" value="'+ (len+1)+'"/>\n';
		addOptionHtml += '		<input type="hidden" name="hidDispOrd"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><select name="dispYn" class="w100p aC">\n';
		addOptionHtml += '			<option value="Y" selected>Yes</option>\n';
		addOptionHtml += '			<option value="N">No</option>\n';
		addOptionHtml += '		</select>\n';
		addOptionHtml += '		<input type="hidden" name="hidDispYn"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aC" name="editCurrStockQty"  maxlength="7" data-valid-type="numeric" value="0"/>\n';
		addOptionHtml += '		<input type="hidden" name="currStockQty" />\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aC"  name="baseStockQty" maxlength="7" data-valid-type="integer" value="0">\n';
		addOptionHtml += '		<input type="hidden" name="hidBaseStockQty" />\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aC" name="saleStockQty" maxlength="7" data-valid-type="numeric" disabled="disabled"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><input type="text" class="w100p aC"  name="ableStockQty" maxlength="7" data-valid-type="numeric" disabled="disabled"/></td>\n';
		addOptionHtml += '	<td><select name="soldoutYn" class="w100p aC" >\n';
		addOptionHtml += '			<option value="Y">Yes</option>\n';
		addOptionHtml += '			<option value="N" selected>No</option>\n';
		addOptionHtml += '		</select>\n';
		addOptionHtml += '		<input type="hidden" name="hidSoldoutYn"/>\n';
		addOptionHtml += '	</td>\n';
		addOptionHtml += '	<td><button type="button" class="btn icn" onclick="$(this).parent().parent().remove();return false;"><i class="fa fa-times" aria-hidden="true" ></i></button></td>\n';
		addOptionHtml += '</tr>\n';
		
		$('#optionList').append(addOptionHtml);
	});
	
	$(document).ready(function() {
		
		//옵션/재고 변경여부
		$('#goodsDetailForm').find('#goodstab2').find("input, select, textarea").on('change', function() {
			$('#goodsDetailForm').find('.tabs .tabsNav li:eq(1) a').attr("style", "color:red;");
		});
		
	});
	
/*]]>*/
</script>
</html>