<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : GoodsReviewPhotoFormWeb.html
 * @desc	: 상품평 - 포토/영상 리스트 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.02   eskim		최초 작성
 *******************************************************************************
 -->
<div class="modal-dialog" role="document">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="pdPhotoReviewListLabel">포토/영상 리뷰</h5>
		</div>
		<div class="modal-body">
			<div class="pop_cont">
				<div class="photo_list">
					<ul id="ulGoodsReviewPhoto">
					</ul>
				</div>
				<div class="ui_row">
					<ul class="pageNav"  id="reviewPhtoPageNav">
					</ul>
				</div>
			</div>
		</div>
	<!-- 포토영상 리뷰 자세히보기 팝업 내용 -->
	</div>
	<form id="goodsReviewPhotoForm" name="goodsReviewPhotoForm" action="#" th:action="@{'/goods/review/list'}">
		<input type="hidden" name="pageNo" value ="1"/>
		<input type="hidden" name="pageSize" value ="18"/>
		<input type="hidden" name="photoYn" value ="Y"/>
		<input type="hidden" name="goodsCd" th:value ="${params.goodsCd}"/>
	</form>
</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_photo')" class="close-modal">Close</a>
<script th:inline="javascript">
/*<![CDATA[*/
	
	var fnReviewPhotoGetList = function() {

	// Initialize a pagination
		gagaPaging.init('goodsReviewPhotoForm', fnReviewPhotoGetListCallback, 'reviewPhtoPageNav', 18);

		// Load data
		gagaPaging.load(1);
	}
	
	var fnReviewPhotoGetListCallback = function(result) {
		$('#ulGoodsReviewPhoto').html('');
	
		// 목록
		if (result.dataList != null && result.dataList.length > 0) {
			
			$.each(result.dataList, function(idx, item) {
				let tag = '';
				if (item.reviewAttachList != null && item.reviewAttachList.length > 0){
					var fileGbClass = '';
					$.each(item.reviewAttachList, function(aIdx, reviewAttach){
					//	fileGbClass = '';
					//	if (reviewAttach == "M") fileGbClass = "mov";
				tag += '				<li>\n';
				tag += '					<a href="javascript:void();" onclick="fnGoodsReviewDetail(\''+item.reviewSq+'\');">\n';
				tag += '						<div class="pic">\n';
				if ("I" ==reviewAttach.fileGb){
					tag += '							<span class="thumb" style="background-image:url('+ _imgUrl + reviewAttach.sysFileNm +');"></span>\n'; //<!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->	
				}else{
					tag += '							<span class="thumb mov" style="background-image:url('+_kollusMediaUrl+'/poster/'+reviewAttach.kmcKey+');"></span>\n';
				}
				tag += '						</div>\n';
				tag += '					</a>\n';
				tag += '				</li>\n';		
						return false;
					});	
				}
				
				$('#ulGoodsReviewPhoto').append(tag);
			});
		
		}

		// Create pagination
		gagaPaging.createPagination(result.paging.pageable);
	}
	
	// 상세보기
	var fnGoodsReviewDetail = function(reviewSq){
		cfGoodsReviewDetail([[${params.goodsCd}]],'', 'Y', reviewSq);
		cfCloseLayer('layer_review_photo');
	}
	
	$(document).ready( function() {
		
		fnReviewPhotoGetList();
		
	});
/*]]>*/
</script>	
 </html>