<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * * @source  : MypageReviewDetailFormWeb.html
 * @desc	: 상품평 상세 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.03   sowon		최초 작성
 *******************************************************************************
 -->
<div class="modal-dialog" role="document" th:with="imgGoodsUrl=${@environment.getProperty('upload.goods.view')}, uxImgUrl=${@environment.getProperty('domain.uximage')}, imgUrl=${@environment.getProperty('upload.image.view')}">
	<div class="modal-content">
		<div class="modal-header">
			<h5 class="modal-title" id="pdPhotoReviewDetailLabel">포토/영상 리뷰</h5>
		</div>
		<div class="modal-body" id="reviewBody">
		</div>
	</div>
</div>
<form name="reviewDetailForm" id="reviewDetailForm" method="post">
<input type="hidden" name="goodsCd" th:value="${review.goodsCd}" />
<!-- <input type="hidden" name="bestYn" th:value="${review.bestYn}" /> -->
<input type="hidden" name="photoYn" th:value="${review.photoYn}" />
<input type="hidden" name="reviewSq" th:value="${review.reviewSq}" />
<input type="hidden" name="attachSq" th:value="${review.attachSq}" />
</form>
<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_best')" class="close-modal">Close</a> 
<script th:inline="javascript">
/*<![CDATA[*/
	
	var fnReviewDetail = function() {
		
		var params = new Object();
		params.goodsCd = $('#reviewDetailForm input[name=goodsCd]').val();
		params.reviewSq = $('#reviewDetailForm input[name=reviewSq]').val();
		//params.bestYn =$('#reviewDetailForm input[name=bestYn]').val();
		params.photoYn = $('#reviewDetailForm input[name=photoYn]').val();
		params.attachSq = $('#reviewDetailForm input[name=attachSq]').val();
		gagajf.ajaxSubmit("/mypage/review/detail/list", "json", fnReviewDetailCallback, params);
	}

	var fnReviewDetailCallback = function(result) {
		$('#reviewBody').html('');
		// 목록
		if (result.reviewList != null && result.reviewList.length > 0) {
			let fileGbClass = '';
			let rdx = $('#reviewDetailForm input[name=attachSq]').val();
			$.each(result.reviewList, function(idx, review) {
				let tag = '';
				tag +='<div class="pop_cont">\n';
				tag +='<div class="swiper-container detail">\n';
				tag +='<div class="swiper-wrapper">\n';
				tag +='<div class="swiper-slide">\n';
				
				let reviewClass = 'empty_photo';
				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
					reviewClass = '';
				}
				tag +='<div class="review '+reviewClass+'" >\n';  <!-- 첨부이미지 없을 시 empty_photo 클래스 추가 --> 
				tag +='	<div class="pic">\n';
				if (review.reviewAttachList != null && review.reviewAttachList.length > 0){
					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
						fileGbClass = '';
						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
				tag +='		<span class="thumb" class="'+fileGbClass+'">\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가-->
						if (reviewAttach.fileGb == "M") {
			    tag +='<iframe width="100%" height="100%" src="'+_kollusMediaUrl+'/'+reviewAttach.kmcKey + '/player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>';
				//tag +='			<video poster="'+_kollusMediaUrl+'/'+reviewAttach.kmcKey + '/player_version=html5" muted="muted" preload="metadata" controls="controls">\n';
				//tag +='				<source src="'+_kollusMediaUrl+'/'+reviewAttach.kmcKey + '/player_version=html5" type="video/mp4">\n';
				//tag +='			</video>\n';
						}else{
				tag +='			<img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';	
						}
				tag +='		</span>\n';
						return false;
					});	
				}else{
				tag +='		<span class="thumb">\n';
				tag +='			<img src="'+_uploadGoodsUrl +'/'+review.sysImgNm+'?RS=365" alt="" onerror="' + _uximgUrl + '/images/pc/thumb/bg_item_none.png"  />\n';
				tag +='		</span>\n';	
				}
				tag +='	</div>\n';
				tag +='	<div class="review_cont">\n';
				tag +='		<div class="box_wrap">\n';
				tag +='			<div class="star_box">\n';
				tag +='				<div class="star_score">\n';
				tag +='					<span class="star">\n';
				tag +='						<em class="progbar" style="width:'+(review.iscore*20)+'%;"></em>\n'; <!-- 평점 style로 표기 -->
				tag +='					</span>\n';
				tag +='				</div>\n';
				tag +='			</div>\n';
				tag +='			<div class="response_box">\n';
				tag +='				<div class="full">\n';
				tag +='					<dl>\n';
				tag +='						<div>\n';
				tag +='							<dt>구매옵션</dt>\n';
				if (review.goodsOptionList != null && review.goodsOptionList.length > 0){
					tag +='							<dd>\n';	
						$.each(review.goodsOptionList, function(aIdx, reviewGoods){
					tag +='							<p><span>'+ gagajf.convNull(reviewGoods.optCd1Nm,'') +'</span> / <span>'+ gagajf.convNull(reviewGoods.optCd2,'')+'</span></p>\n';
						});		
					tag +='							<dd>\n';	
				}
				tag +='						</div>\n';
				tag +='					</dl>\n';
				tag +='				</div>\n';
				tag +='				<div class="full">\n';
				tag +='					<dl>\n';
				tag +='						<div>\n';
				tag +='							<dt>키/몸무게</dt>\n';
				tag +='							<dd>'+review.height+'cm / '+review.weight +'kg \n';
				tag +='							</dd>\n';
				tag +='						</div>\n';
				tag +='					</dl>\n';
				tag +='				</div>\n';
				if (!gagajf.isNull(review.sizeGb)){  <!-- 사이즈구분(T:상의, B:하의, S:신발) -->
				tag +='				<div>\n'; 
				tag +='					<dl > \n';
				tag +='						<div>\n';
				tag +='							<dt>사이즈</dt>\n';
				tag +='							<dd>'+gagajf.convNull(review.scoreSizeNm,'')+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>컬러</dt>\n';
				tag +='							<dd>'+gagajf.convNull(review.scoreColorNm,'')+'</dd>\n';
				tag +='						</div>\n';
					if (review.sizeGb == 'T' || review.sizeGb == 'B'){
				tag +='						<div>\n';
				tag +='							<dt>핏</dt>\n';
				tag +='							<dd>'+gagajf.convNull(review.scoreFitNm,'')+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>두께감</dt>\n';
				tag +='							<dd>'+ gagajf.convNull(review.scoreThickNm,'')+'</dd>\n';
				tag +='						</div>\n';
					}
					if (review.sizeGb == 'S'){
				tag +='						<div>\n';
				tag +='							<dt>무게감</dt>\n';
				tag +='							<dd>'+gagajf.convNull(review.scoreWeightNm,'')+'</dd>\n';
				tag +='						</div>\n';
				tag +='						<div>\n';
				tag +='							<dt>볼너비</dt>\n';
				tag +='							<dd>'+gagajf.convNull(review.scoreBallNm,'')+'</dd>\n';
				tag +='						</div>\n';
					}
				tag +='					</dl>\n';
				tag +='				</div>\n';
				}
				tag +='			</div>\n';
				tag +='			<div class="txt_review_box">\n';
				tag +='				<p>' + review.reviewContent +'</p>\n';
				tag +='			</div>\n';
				tag +='			<div class="writer_box">\n';
				tag += '			<div class="writer">\n';
				tag += '				<span class="wr_id">'+ review.maskingCustId +'</span>\n';
				tag += '				<span class="wr_date">' + review.regDt + '</span>\n';
				tag += '			</div>\n'
				tag +='			</div>\n';
				if (!gagajf.isNull(review.admRpl)){
				tag += '		<div class="reply_box">\n';
				tag += '			<div class="reply">\n';
				tag += '				<div class="reply_writer">\n';
				tag += '					<span class="wr_name">관리자</span>\n';
				tag += '					<span class="wr_date">'+review.admRplDt+'</span>\n';
				tag += '				</div>\n';
				tag += '				<div class="reply_txt">\n';
				tag += '					<p>' + review.admRpl+'</p>\n';
				tag += '				</div>\n';
				tag += '			</div>\n';
				tag += '		</div>\n';	
				}
				tag +='		</div>\n';
				tag +='	</div>\n';
				if (review.reviewAttachList != null && review.reviewAttachList.length >= 2){
				tag +='	<div class="thumblist">\n';
				tag +='		<ul>\n';
					let activeClass = '';
					$.each(review.reviewAttachList, function(aIdx, reviewAttach){
						activeClass = '';
						/* if (aIdx.rvAtcSq == rdx){
							activeClass = 'active';
						} */
						fileGbClass = '';
						if (reviewAttach.fileGb == "M") fileGbClass = "mov";
						if (reviewAttach.fileGb == "M") {
							tag +='			<li id="'+ reviewAttach.rvAtcSq+'">\n';
							tag +='				<div class="pic '+activeClass+'"> \n'; <!-- 활성화시 active 클래스 추가 -->
							tag +='							<span class="thumb '+ fileGbClass +'"><iframe width="100%" height="100%" src="'+_kollusMediaUrl +'/'+reviewAttach.kmcKey +'?player_version=html5" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></span>\n';
							tag +='				</div>\n';
							tag +='			</li>\n';
						}else{
							tag +='			<li id="'+ reviewAttach.rvAtcSq+'">\n';
							tag +='				<div class="pic '+activeClass+'" > \n'; <!-- 활성화시 active 클래스 추가 -->
							tag +='					<span class="thumb" class="'+fileGbClass+'" style="background-image:url('+ _imgUrl + reviewAttach.sysFileNm +');\" >\n';<!-- 동영상의 썸네일일 경우 mov 클래스 추가 -->
							tag +='					<img src="'+ _imgUrl + reviewAttach.sysFileNm +'" alt="">\n';
							tag +='					</span>\n';
							tag +='				</div>\n';
							tag +='			</li>\n';
						}
				
					});
				tag +='		</ul>\n';
				tag +='	</div>\n';
				}
				tag +='</div>\n';
				
				tag +='</div>\n';
				tag +='</div>\n';
				tag +='</div>\n';
				tag +='</div>\n';
				
				$('#reviewBody').append(tag);
				
				$('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
				        var $this = $(this);
				        var thumbCount = $this.find('.thumblist ul li').length;
				        var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
				        var thumbMargin = 8 * thumbCount;
				        var thumbListWidth = thumbUlWidth + thumbMargin;

				        $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
				    }); 
				$("#" + rdx).trigger("click");
			});
			
		}
		
	
		
	}
	
	
	$(document).ready( function() {
		
		fnReviewDetail();
       
		 //슬라이드 - 상품 베스트 리뷰 자세히보기 영역 
	    var photoReviewDetailSwiper = new Swiper('.pd_photoreviewdetail_pop .swiper-container.detail', {
	        effect :'fade',
	        slidesPerView: 1,
	        spaceBetween: 0,
	        simulateTouch:false,
	        navigation: {
	            nextEl: '.pd_photoreviewdetail_pop .swiper-button-next',
	            prevEl: '.pd_photoreviewdetail_pop .swiper-button-prev',
	        },
	    });   

	    $('.pd_photoreviewdetail_pop .swiper-slide').each(function(index, element){
	        var $this = $(this);
	        
	        var thumbCount = $this.find('.thumblist ul li').length;
	        var thumbUlWidth = $this.find('.thumblist ul li').width() * thumbCount;
	        var thumbMargin = 8 * thumbCount;
	        var thumbListWidth = thumbUlWidth + thumbMargin;

	        $this.find('.thumblist ul').attr('style', 'width:' + thumbListWidth + 'px;');
	        
	    });

	    $(document).on('click','.pd_photoreviewdetail_pop .thumblist ul li',function(e){

	        $(this).parents(".swiper-slide").find(".review > .pic > .thumb").empty();
	        $(this).parents(".swiper-slide").find(".thumblist ul li .pic").removeClass('active');
	        $(this).find(".pic").addClass('active');

	        var thumbIndex = $(this).index();
	        thumbContentHtml = $(this).find('.pic .thumb').html();
	        $(this).parents(".swiper-slide").find(".review > .pic > .thumb").append(thumbContentHtml);

	        return false;
	    });
	});		

	 
/*]]>*/
</script>	
 </html>