<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : MypageDetailReviewFormMob.html
 * @desc	: 상품평 - 포토/영상 리스트 팝업
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE		 AUTHOR	  DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.13   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">
			<th:block th:if="${review.bestYn == 'Y'}">
			<h5 class="modal-title" id="exampleFullLabel">베스트 리뷰</h5>
			</th:block>
			<th:block th:unless="${review.bestYn == 'Y'}">
			<h5 class="modal-title" id="exampleFullLabel">
				<!-- <button type="button" id="btn_more_photoreview" th:onclick="cfGoodsReviewPhoto([[${params.goodsCd}]])" ></button> -->
				포토/영상리뷰
			</h5>
			</th:block>
		</div>
		<div class="modal-body" th:if="${reviewList != null and !reviewList.empty}">
			<div class="pop_cont" th:each="review, status : ${reviewList}" >
				<!-- 리뷰사진영역 -->
					<div class="area_slider">
						<div class="swiper-container thumb_list">
							<div class="swiper-wrapper">
								<th:block th:if="${review.reviewAttachList != null and !review.reviewAttachList.empty}" >
								<th:block th:each="reviewAttach, attachStatus : ${review.reviewAttachList}">
								<div class="swiper-slide">
									<div class="thumb " th:classAppend="${(reviewAttach.fileGb == 'M') ? 'mov' :''}">
										<th:block th:if="${reviewAttach.fileGb == 'M'}">
											<iframe class="pd_mov" width="100%" height="100%" th:src="${kollusMediaUrl+'/'+reviewAttach.kmcKey +'?enable_initialize_focus=false&autoplay&mute&controls_activation=none'}" frameborder="0" allowfullscreen></iframe>
										</th:block>
										<th:block th:unless="${reviewAttach.fileGb == 'M'}">
											<img th:src="${imgUrl+'/'+reviewAttach.sysFileNm}" alt="">
										</th:block>
									</div>
									
								</div>
								</th:block>
								</th:block>
								<th:block th:unless="${review.reviewAttachList != null and !review.reviewAttachList.empty}">
									<div class="swiper-slide"><div class="thumb nodata"><img th:src="${imgGoodsUrl+'/'+review.sysImgNm+'?RS=358'}" th:onerror="'this.src=\''+@{${uxImgUrl}+ '/images/pc/thumb/bg_item_none.png'}+'\';'" alt=""></div></div><!-- 이미지 없으면 calss .nodata  -->
								</th:block>
							</div>
							<!-- Add Pagination -->
							<div class="swiper-pagination"></div>
						</div>
					</div>
				<!-- //리뷰사진영역 -->
				<!-- 리뷰내용 -->
					<div class="pop_detail">
						<button type="button" class="pop_open_btn"><span class="sr-only"></span></button>
						<div class="comment_wrap">
							<div class="review_list">
								<ul>
									<li>
										<div class="review">
											<div class="info_box">
												<div class="star_score" th:with="starScore=${#numbers.formatDecimal((review.iscore*100/5), 0,0)}">
													<span class="star">
														<em class="progbar" th:style="${'width:'+starScore+'%;' }"></em> <!-- 평점 style로 표기 -->
													</span>
												</div>
												<div class="writer">
													<span class="wr_id" th:text="${review.maskingCustId}"></span>
													<span class="wr_date" th:text="${review.regDt}"></span>
												</div>
											</div>
											<div class="response_box">
												<div>
													<dl>
														<div th:if="${review.goodsOptionList != null and !review.goodsOptionList.empty}" >
															<dt >구매옵션</dt>
															<dd> 
															<th:block th:each="reviewGoods, goodsStatus : ${review.goodsOptionList}">
															<th:block th:text="${ #strings.defaultString(#strings.empty(reviewGoods.optCd1Nm),'') +' / '+ #strings.defaultString(#strings.empty(reviewGoods.optCd2),'')}">베이지 / 100</th:block>
															<th:block th:if="${not goodsStatus.last}" th:text="${','}"></th:block>
															</th:block>
															</dd>
														</div>
														<!-- 2021.08.11 -->
														<th:block th:if="${review.height > 0 || review.weight > 0}">
															<div>
																<dt>키/몸무게</dt>
																<dd>
																	<th:block th:if="${not #strings.isEmpty(review.height)}" th:text="|${review.height}cm / |"></th:block> 
																	<th:block th:if="${not #strings.isEmpty(review.weight)}" th:text="|${review.weight}kg|"></th:block>
																</dd>
															</div>
														</th:block>
													</dl>
												</div>
											</div>
											<div class="txt_review_box">
												<p th:utext="${#strings.unescapeJava(#strings.escapeJava(review.reviewContent))}">옷</p>
											</div>
											<div class="response_box2"  th:if="${not #strings.isEmpty(review.sizeGb)}">
												<div>
													<dl>
														<div>
															<dt>사이즈</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreSizeNm),'')}">작음</dd>
														</div>
														<div>
															<dt>컬러</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreColorNm),'')}">밝음</dd>
														</div>
														<th:block th:if="${review.sizeGb == 'T' or review.sizeGb == 'B'}">
														<div>
															<dt>핏</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreFitNm),'')}">레귤러</dd>
														</div>
														<div>
															<dt>두께감</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreThickNm),'')}">적당함</dd>
														</div>
														</th:block>
														<th:block th:unless="${review.sizeGb == 'T' or review.sizeGb == 'B'}">
														<div>
															<dt>무게감</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreWeightNm),'')}">레귤러</dd>
														</div>
														<div>
															<dt>볼너비</dt>
															<dd th:text="${#strings.defaultString(#strings.empty(review.scoreBallNm),'')}">적당함</dd>
														</div>
														</th:block>
													</dl>
												</div>
											</div>
											<div class="reply_box" th:if="${not #strings.isEmpty(review.admRpl)}">
												<div class="reply">
													<div class="reply_writer">
														<span class="wr_name">관리자</span>
														<span class="wr_date" th:text="${review.admRplDt}" >2020.07.15</span>
													</div>
													<div class="reply_txt">
														<p th:utext="${#strings.unescapeJava(#strings.escapeJava(review.admRpl))}">
															안녕하세요, 스타일24 관리자입니다.
														</p>
													</div>
												</div>
											</div>
										</div>
									</li>                               
								</ul>
							</div>
						</div>
					</div>
				<!-- //리뷰내용 -->
			</div>
		</div>
	</div>
</div>
<a href="javascript:void(0);" rel="modal:close" onclick="cfCloseLayer('layer_review_best')" class="close-modal">Close</a> 
<script th:inline="javascript">
/*<![CDATA[*/
	
	$(document).ready( function() {
		let reviewAttchSq = 0; 
		if (!gagajf.isNull( [[${review.attachSq}]])){
			reviewAttchSq = [[${review.attachSq}]];
		} 
		 //슬라이드 - 포토,영상리뷰팝업 
        var photoreviewdetailSwiper = new Swiper('.pd_photoreviewdetail_pop .area_slider .swiper-container', {
            observer: true,
            observeParents: true,
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
        
        });
       photoreviewdetailSwiper.slideTo(reviewAttchSq, 0, false);
        // 포토,베스트리뷰숨김
        var review_open=$(".btn_review_open");
        $(document).on('click','.btn_review_open',function(e){
            $(this).toggleClass('active');
            $(this).next(".review_list").toggleClass('active');
            return false;
        });
        
     // 상품평 상세 토글
	$(document).on('click','.pop_open_btn',function(){
		$('.modal.photo_comment_popup .pop_detail').toggleClass('active');
	});

	});
	
/*]]>*/
</script>	
 </html>