<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageMassForm.html
 * @desc    : 상품 이미지 보기 화면(대량등록)
 *============================================================================
 * STYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.11.27   eskim       최초 작성
 *******************************************************************************
 -->
	<div class="modalPopup" data-width="1500" data-height="800">
	<!-- PANELSTYLE -->
		<div class="panelStyle">
			<!-- TITLE -->
			<div class="panelTitle">
				<h2>상품 대량 이미지 등록&nbsp;<button type="button" class="btn icn" onclick="fnOpenCommentPopup('comment')" ><i class="fa fa-cog" aria-hidden="true"></i></button></h2>
				<button type="button" class="close" onclick="fnGoodsImgFormClose()"><i class="fa fa-times"></i></button>
			</div>
			<!-- //TITLE -->
			<!-- CONTENT -->
			<div class="panelContent">
			<form id="goodsImgForm" name="goodsImgForm" action="#" th:method="post">
				<ul class="notice">
					<li><em>최초 상품이미지</em> 적용만 권장합니다. 그 외 이미지 변경건은 상품상세에서 진행해 주세요.</li>
					<li><em>상품 파일명 기준</em>의 첫번째 이미지파일이 <em>디폴트 이미지</em> , 두번째 이미지파일이 <em>마우스오버 이미지</em> 입니다. 확인해주세요!</li>
					<li>상품이미지 업로드시 오류가 발생하면 <em>전체 삭제 처리</em> 후 파일 추가작업을 다시 해주세요.</li>
					<li>자사 상품의 <em>셋트/딜 상품</em> 이미지 등록시 파일명의 색상코드는 <em>'XX'</em>로 생성하여 진행해 주세요.</li>
					<li>자사 상품의 <em>외부몰용</em> 상품이미지의 사이는 1000 x 1000 입니다.</li>
				</ul>
				<table class="frmStyle">
					<colgroup>
						<col width="10%"/>
						<col/>
						<col width="30%"/>
					</colgroup>
					<tr>
						<th>이미지등록</th>
						<td class="dexterArea">

							<!-- 덱스터 테이블 영역 -->
							<ul class="dexterTable">
								<li class="dexterNo" id="dx5Index">
									<!-- 덱스터 테이블 번호 -->
									<!-- //덱스터 테이블 번호 -->
								</li>
								<li>
								<!-- 덱스터 테이블 삽입 -->
									<!-- 덱스터 테이블 삽입<br/>공간은 테이블 넓이에 따라 자동으로 넓어집니다.<br/>
									(최소 넓이 : 350px로 설정됨)<br/> -->
									<div id="dext5-container" style="width: 100%; height: 580px;"></div>
								<!-- //덱스터 테이블 -->
								<li>
							</ul>
							<!-- //덱스터 테이블 영역 -->
						</td>
						<td>
							<ul class="notice ">
								<em><b>* 자사 상품 이미지 파일명</b></em>
								<li><b>상품메인컷</b> : 상품코드_색상코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_색상코드_<b>02</b>.jpg<em>(뒤)</em></li>
								<li><b>상품모델컷</b> : 상품코드_색상코드_<b>C1</b>.jpg ~ 상품코드_색상코드_<b>C5</b>.jpg</li>
								<li><b>상품상세컷</b> : 상품코드_색상코드_<b>D1</b>.jpg ~ 상품코드_색상코드_<b>D20</b>.jpg</li>
								<li><b>상품소재컷</b> : 상품코드_색상코드_<b>F1</b>.jpg</li>
								<li><b>상품라벨컷</b> : 상품코드_색상코드_<b>L1</b>.jpg, (상품코드_색상코드_<b>L2</b>.jpg)</li>
								<li><b>상품외부몰용</b> : 상품코드_색상코드_<b>X1</b>.jpg</li><br>
								<em><b>* 입점 상품 이미지 파일명</b></em>
								<li><b>상품메인컷</b> : 상품코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_<b>02</b>.jpg<em>(뒤)</em></li>
								<li><b>상품모델컷</b> : 상품코드_<b>C1</b>.jpg ~ 상품코드_<b>C5</b>.jpg</li>
								<li><b>상품상세컷</b> : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D20</b>.jpg</li>
								<li><b>상품소재컷</b> : 상품코드_<b>F1</b>.jpg</li>
								<li><b>상품라벨컷</b> : 상품코드_<b>L1</b>.jpg, (상품코드_<b>L2</b>.jpg)</li>
							</ul>
						</td>
					</tr>
				</table>
			</form>	
			</div>
			<!-- 버튼 배치 영역 -->
			<ul class="panelBar marT10">
				<li class="center">
					<button type="button" class="btn btn-base btn-sm" id="btnAddFiles">파일 추가</button>
					<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteChooseFile();">선택 삭제</button>
					<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteAllFiles();">전체 삭제</button>
					<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(true);">위로 이동</button>
					<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(false);">아래로 이동</button>
					<!-- <button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.previewImage();">이미지 보기</button> -->
					<button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.uploadFiles();">업로드/수정</button>
				</li>
			</ul>
			<!-- //버튼 배치 영역 -->
		</div>
</div>
<script type="text/javascript" src="/dx5/dextuploadx5-configuration.js?v=2020122101"></script>
<script type="text/javascript" src="/dx5/dextuploadx5.js?v=2020122101"></script>
<script type="text/javascript" src="/ux/plugins/gaga/gaga.dx5.js?2020122101"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var goodsImgList = null;
	
	//--------------------------------------------------------------------------
	// Dextupload X5 이벤트 Start
	//--------------------------------------------------------------------------
	// Dextupload X5 생성
	gagaDx5.createDX5("dext5", "btnAddFiles", _goodsUrl, "goods");

	// Dextupload X5 생성 후 호출되는 이벤트
	var onDX5Created = function(id) {
		var actionUrl = '/dext/files/upload/goods';
		gagaDx5.onDX5Created(actionUrl, goodsImgList);
	}

	// Dextupload X5 에러 시 호출되는 이벤트
	var onDX5Error = function(id, code, msg) {
		mcxDialog.alert(id + " => " +  code + "\n" + msg);
	}

	// Dextupload X5 업로드 성공 시 호출되는 이벤트
	var onDX5UploadCompleted = function(id) {
		gagaDx5.uploadAfterProcess();
	}

	// Dextupload X5 이미지 등록이 완료된 후 호출되는 이벤트
	var onDX5ItemsAdded = function(id, count) {
		gagaDx5.resortDX5FileList();
	}
	//--------------------------------------------------------------------------
	// Dextupload X5 이벤트 End
	//--------------------------------------------------------------------------
	
	// 업로드 후처리. 반드시 구현해야 함. (gaga.dx5.js 파일에서 호출됨)
	var fnUploadAfterProcess = function(id, result) {
// 		if (typeof(result) != 'undefined') {
// 			if (!gagajf.isNull(result.error.message)) {
// 				gagaAlert.alert(result.error.message);
// 				return;
// 			}
// 		}

		//console.log(result);

		var dx = dx5.get(id);

		var updatedData = [];

		// 삭제한 파일 설정
		var deleteFiles = dx.getRemovedFiles();
		if (deleteFiles.length > 0) {
			$.each(deleteFiles, function(idx, item) {
				var params = new Object();
				params.mode = 'D';
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				updatedData.push(params);
			});
		}

		// 업로드한 파일 및 순서 변경한 파일 설정
		var totCnt = dx.getTotalItemCount();
		if (totCnt > 0) {
			for (var i = 0; i < totCnt; i++) {
				var item = dx.getItemByIndex(i);

				var params = new Object();
				params.mode = (item.type == 'FILE') ? 'C' : '';
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				updatedData.push(params);
			}
		}

		var jsonData = JSON.stringify(updatedData);
		//console.log(jsonData);

		gagajf.ajaxJsonSubmit('/goods/thumbnail/image/mass/save', jsonData, fnGoodsImgFormClose);
	}
	
	//창종료
	var fnGoodsImgFormClose = function(){
		$('.dx5-pop-up').remove();
		$('.dx5-pop-dn').remove();
		$('.dx5-pop-pv').remove();
		$('.dx5-pop-cp').remove();
		$('.dx5-pop-ud').remove();
		uifnPopupClose('popupGoodsMassImage');
	}
	
	//안내팝업
	var fnOpenCommentPopup = function(id) {
		var str = '<div class="popupWrap"  id="'+id+'" style="z-index:30">';
		str = str + '<div class="modalPopup" data-width="500">';
		str = str + '<div class="panelStyle">';
		str = str + '<div class="panelTitle"><button type="button" class="close" onclick="uifnPopupClose(\''+id+'\')"><i class="fa fa-times"></i></button></div>';
		str = str + '<div class="panelContent">';
		str = str + '<ul class="notice ">';
		str = str + '<em><b>* 자사 상품 이미지 파일명</b></em>';
		str = str + '<li><b>상품메인컷</b> : 상품코드_색상코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_색상코드_<b>02</b>.jpg<em>(뒤)</em></li>';
		str = str + '<li><b>상품모델컷</b> : 상품코드_색상코드_<b>C1</b>.jpg ~ 상품코드_색상코드_<b>C5</b>.jpg</li>';
		str = str + '<li><b>상품상세컷</b> : 상품코드_색상코드_<b>D1</b>.jpg ~ 상품코드_색상코드_<b>D20</b>.jpg</li>';
		str = str + '<li><b>상품소재컷</b> : 상품코드_색상코드_<b>F1</b>.jpg</li>';
		str = str + '<li><b>상품라벨컷</b> : 상품코드_색상코드_<b>L1</b>.jpg, (상품코드_색상코드_<b>L2</b>.jpg)</li>';
		str = str + '<li><b>상품외부몰용</b> : 상품코드_색상코드_<b>X1</b>.jpg</li>';
		str = str + '<br/>';
		str = str + '<em><b>* 입점 상품 이미지 파일명</b></em>';
		str = str + '<li><b>상품메인컷</b> : 상품코드_<b>01</b>.jpg<em>(앞)</em>,상품코드_<b>02</b>.jpg<em>(뒤)</em></li>';
		str = str + '<li><b>상품모델컷</b> : 상품코드_<b>C1</b>.jpg ~ 상품코드_<b>C5</b>.jpg</li>';
		str = str + '<li><b>상품상세컷</b> : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D20</b>.jpg</li>';
		str = str + '<li><b>상품소재컷</b> : 상품코드_<b>F1</b>.jpg</li>';
		str = str + '<li><b>상품라벨컷</b> : 상품코드_<b>L1</b>.jpg, (상품코드_<b>L2</b>.jpg)</li>';
		str = str + '</ul>';
		str = str + '</div></div></div></div>';

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