<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageForm.html
 * @desc    : 상품 이미지 관리 화면(입점)
 *============================================================================
 * SISUN
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.27   eskim       최초 작성
  *******************************************************************************
 -->
	<div class="modalPopup"  data-width="650">
		<!-- PANELSTYLE -->
		<div class="panelStyle">
			<div class="panelTitle">
				<strong>상품 이미지 보기&nbsp;<button type="button" class="btn icn" onclick="fnOpenCommentPopup('comment')" ><i class="fa fa-cog" aria-hidden="true"></i></button></strong>
				<button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
			</div>
			<div class="panelContent">
			<form id="goodsImgForm" name="goodsImgForm" th:method="post">
			<input type="hidden" id="goodsCd" name="goodsCd" th:value="${params.goodsCd}"/>
				<table class="frmStyle" th:with="uploadGoodsUrl=${@environment.getProperty('upload.goods.view')},uxImgUrl=${@environment.getProperty('domain.uximage')}">
					<colgroup>
						<col width="75%"/>
						<col width="25%"/>
					</colgroup>
					<tbody id="goodsImgList">
						<tr>
							<th class="aL vaT">imgPath1 : <th:block th:utext="${'필수: 상품코드_01.jpg<i class=star></i>'}"></th:block>
								<hr/>
								<input type="text" class="w100p" id="imgPath1" name="imgPath1" />
							</th>
							<td>
								<img  src="http://image.istyle24.com/Upload/ProductImage/0000004766/20200826/14505664_L.jpg?RS=560" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/image/no.gif'}+'\';'" width="200px"/>
							</td>
						</tr>
					</tbody>
				</table>
			</form>
			</div>
			<ul class="panelBar">
				<li class="right">
				<th:block th:if="${sessionInfo.roleCd == 'G001_B000'}">
				<button type="button" class="btn btnRight btn-success btn-lg" id="btnGoodsDetailImgSave">저장</button>
				</th:block>
				</li>
			</ul>
		</div>
	</div>
<script th:inline="javascript">
/*<![CDATA[*/
	var fileExtension = [[${@environment.getProperty('upload.goods.allow.extension')}]];

	//상품이미지 저정버튼 클릭 시
	$('#btnGoodsDetailImgSave').click(function(e) {
		if ($("#goodsImgForm").find("#goodsImgList tr").length == 0){
			/* mcxDialog.alert('', function(){

			});
			return false; */
		}
		var optCheck = false;
		var imgType = $('#goodsImgForm input[name=imgType]').val();
		
		$("#goodsImgForm").find("#goodsImgList tr").each(function() {
			var size = 30;

			for(i=0;i<size;i++){
				var imgVal = $("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1) +"]").val();
				
				if(!gagajf.isNull(imgVal)){
					var reg = "\.("+fileExtension+")$";
					if(!(new RegExp(reg, "i")).test(imgVal)) {
						optCheck = true;
						mcxDialog.alertC('이미지는 ['+ fileExtension + '] 파일만 가능합니다.', {
							sureBtnText: "확인",
							sureBtnClick: function() {
								$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
							}
						});
						return false;
					}

					if (imgVal.indexOf('\\"') > -1){
							optCheck = true;
							mcxDialog.alertC('["]는 입력할 수 없습니다.', {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}
							});
							return false;
					}
					if (imgVal.indexOf("\\'") > -1){
							optCheck = true;
							mcxDialog.alertC("[\\']는 입력할 수 없습니다.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
					}
					if (imgType == "A"){
						if (imgVal.indexOf("http") > -1){
							optCheck = true;
							mcxDialog.alertC("이미지 도메인은 입력할 수 없습니다.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
						}
					}else{
						if (imgVal.indexOf("https") <= -1){
							optCheck = true;
							mcxDialog.alertC("이미지 도메인을 입력해 주세요.", {
								sureBtnText: "확인",
								sureBtnClick: function() {
									$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
								}

							});
							return false;
						}
					}
				}else{
					if(i == 0){
						optCheck = true;
						mcxDialog.alertC("필수 상품이미지 입니다.", {
							sureBtnText: "확인",
							sureBtnClick: function() {
								$("#goodsImgForm").find("#goodsImgList tr").find("input[name=imgPath"+ (i+1)+"]").focus();
							}

						});
						return false;
					}
				}
			}
		});

		if(optCheck) {
			return false;
		}

		mcxDialog.confirm('저장하시겠습니까?', {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function(){
				gagajf.ajaxFormSubmit("/goods/img/save", "#goodsImgForm", fnGoodsImgFormClose);
			}
		});
	});

	//창종료
	var fnGoodsImgFormClose = function(){
		uifnPopupClose('popupGoodsImage');
	}

	//안내팝업
	var fnOpenCommentPopup = function(id) {
		var str = '<div class="popupWrap" id="'+id+'" style="z-index:30">';
		str = str + '<div class="popup modeless ui-widget-content ui-draggable ui-draggable-handle" style="display: block;  position: relative;">';
		str = str + '<button type="button" class="close" onclick="uifnPopClose(\''+id+'\')"><i class="fa fa-times"></i></button>';
		str = str + '<div class="mdPopContent">';
		str = str + '<ul class="notice ">';
		str = str + '<em><b>* 이미지 타입</b></em>';
		str = str + '<li> <b>A</b> : <b>자사전용</b>(이미지 도메인명 없음)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) /P/PQS/PQS11TM24M_BU/1000/PQS11TM24M_BU_01.jpg';
		str = str + '<li> <b>B</b> : <b>입점전용</b>(https를 포함한 이미지 전체 경로)</li>';
		str = str + '  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ex) <em>https:</em>//pastel.jpg2.kr/goods/LCCAJ334_IV_1.jpg';
		str = str + '<li><b>IMG_PATH1 (<em>필수</em>)</b> : 상품코드_<b>01.jpg</li>';
		str = str + '<li><b>IMG_PATH2 ~ IMG_PATH5</b> (선택) : 상품코드_<b>02</b>.jpg ~ 상품코드_<b>05</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH6 ~ IMG_PATH10</b> (선택, 화보컷) : 상품코드_<b>M1</b>.jpg ~ 상품코드_<b>M5</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH11 ~ IMG_PATH25</b> (선택, 상세컷) : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D15</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH26 ~ IMG_PATH27</b> (선택, 라벨컷) : 상품코드_<b>R1</b>.jpg ~ 상품코드_<b>R2</b>.jpg</li>';
		str = str + '<li><b>IMG_PATH28 ~ IMG_PATH30</b> (선택, 기타컷) : 상품코드_<b>E1</b>.jpg ~ 상품코드_<b>E3</b>.jpg</li>';
		str = str + '</ul>';
		str = str + '</div></div></div>';

		if ($('#'+ id).length == 0) {
			$('body').append(str);
		}
		$("#"+id).css({display:"block"});
	}
/*]]>*/
</script>
</html>