<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsImageMassForm.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="1280">
		<!-- PANELSTYLE -->
			<div class="panelStyle">
				<!-- TITLE -->
				<div class="panelTitle">
					<h2>상품 이미지 <th:block th:text="${goodsImg.mode =='U'}? '상세':'등록'"></th:block>&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">
				<input type="hidden" name="goodsCd" th:value="${goodsImg.goodsCd}"/>
				<input type="hidden" name="colorCd" th:value="${goodsImg.colorCd}"/>
<!-- 				<input type="hidden" name="goodsCd" th:value="14373767"/>
				<input type="hidden" name="colorCd" th:value="IV"/>
 -->				
					<ul class="notice">
						<li>[업로드/수정] 버튼 클릭 하면 프론트에 바로 적용되므로 최종 확인 후 전송을 권장합니다.</li>
						<li>이미지 미리보기 리스트는 <em>업로드 후</em> 확인 할 수 있습니다.</li>
						<li>이미지보기 버튼은 이미지 파일 <em>등록 후</em> 확인 할 수 있습니다. 이미 <em>업로드 된</em> 파일은 확인 할 수 없습니다.(파일 크기 옆 화살표로 구분 가능합니다.)</li>
					</ul>
					<table class="frmStyle">
						<colgroup>
							<col width="7%"/>
							<col width="25%"/>
							<col width="8%"/>
							<col width="10%"/>
							<col width="8%"/>
							<col width="10%"/>
							<col width="8%"/>
							<col/>
						</colgroup>
						<tr>
							<th>상품코드</th>
							<td th:text="${goodsImg.goodsCd}">14373767</td>
							<th>컬러명</th>
							<td th:text="${goodsImg.colorNm}">PINK</td>
							<th>대표 이미지순번</th>
							<td><input type="text" class="text-right" name="defaultImgOrd" maxlength="3" th:value="${defaultImgOrd}" required="required" data-valid-type="number" data-valid-name="대표이미지순번"/></td>
							<td colspan="2"></td>
						</tr>
						<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: 450px;"></div>
									<!-- //덱스터 테이블 -->
									<li>
								</ul>
								<!-- //덱스터 테이블 영역 -->

							</td>
							<td colspan="6" class="verticalTop">

								<!-- 이미지 카드 영역 -->
								<div class="cardArea" id="dx5CardArea">
									<!-- 이미지 카드 -->
								</div>
								<!-- //이미지 카드 영역 -->
							</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 = [[${goodsImgList}]];
	
	//--------------------------------------------------------------------------
	// 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.goodsCd = $('#goodsImgForm input[name=goodsCd]').val();
				params.colorCd = $('#goodsImgForm input[name=colorCd]').val();
				params.dispOrd = idx + 1;
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				params.sysImgUrl = item.url;
				params.defaultImgYn = 'N';
				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.goodsCd = $('#goodsImgForm input[name=goodsCd]').val();
				params.colorCd = $('#goodsImgForm input[name=colorCd]').val();
				params.dispOrd = i + 1;
				params.orgImgNm = item.name;
				params.sysImgNm = item.name;
				params.sysImgUrl = item.url;
				params.defaultImgYn = ($('#goodsImgForm input[name=defaultImgOrd]').val() == (i + 1)) ? 'Y' : 'N';
				updatedData.push(params);
			}
		}

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

		gagajf.ajaxJsonSubmit('/goods/thumbnail/image/save', jsonData, fnUploadCallback);
	}

	// 콜백함수
	var fnUploadCallback = function(result) {
		// 기본이미지명 조회
		//var actionUrl = '/goods/default/image/url'
		//		+ '?goodsCd=' + $('#goodsImgForm input[name=goodsCd]').val()
		//		+ '&colorCd=' + $('#goodsImgForm input[name=colorCd]').val();

		//$.get(actionUrl
		//	, function(url) {
		//		console.log(url);
		//		//opener.setImg($('#goodsImgForm input[name=defaultImgOrd]').val(), result.defaultImgNm);
		//		fnGoodsImgFormClose();
		//	});
		fnGoodsImgFormClose();
	}

	// 더블클릭시 썸네일 지정 후 첫번째로 이동
	function onDX5ItemDoubleClick(id, itemIndex, itemId, itemType) {
		var dx = dx5.get(id);
		var gubun = $("#gubun").val();

		gagaAlert.confirm('선택하신 이미지를 대표이미지로 선택하시겠습니까?', function() {
			firstMoveUp(itemIndex);
			return false;
		});
	}

	// 선택 항목을 첫번째로 이동
	function firstMoveUp(selIndex){
		ti = parseInt(selIndex, 10);
		for(var i = ti; i > 0; i--) {
			dx5.get("dext5").moveItemUp(i);
		}
	}

	//창종료
	var fnGoodsImgFormClose = function(){
		$('.dx5-pop-up').remove();
		$('.dx5-pop-dn').remove();
		$('.dx5-pop-pv').remove();
		$('.dx5-pop-cp').remove();
		$('.dx5-pop-ud').remove();
		uifnPopupClose('popupGoodsImage');
	}

	//안내팝업
	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>M1</b>.jpg ~ 상품코드_<b>M5</b>.jpg</li>';
		str = str + '<li><b>상품상세컷</b> : 상품코드_<b>D1</b>.jpg ~ 상품코드_<b>D5</b>.jpg</li>';
		str = str + '<li><b>상품소재컷</b> : 상품코드_<b>S1</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>