<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : PlanReplyDetailForm.html
 * @desc    : 댓글 상세 팝업 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.25   sowon     최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1200" id="popupReplyDetail">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>댓글 상세</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupReplyDetail');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->
		
		<!-- CONTENT -->
		<form id="replyDetailForm" name="replyDetailForm" action="#" th:method="post" >
			<div class="panelContent">
				<div class="reviewWrap">
					<div class="user_review">
						<!-- 리뷰 파일 -->
						<dl class="rvPic" style="display: none;">
							<dt>이미지</dt>
							<dd>
								<div class="picList" id="divPicList" style="background: url() repeat 0 0;">
									<th:block th:if="${attachList != null}" th:each="oneData, status : ${attachList}">
										<a  href="javascript:void(0);" onclick="fnPopupOpen('layer_review_pic', this);">
											<span th:style="${'background-image:url(' + @environment.getProperty('domain.image') + oneData.sysFile + ');'}">사진</span>
										</a>
									</th:block>
								</div>
							</dd>
						</dl>
						
						<dl class="rvTxt">
							<dt>댓글</dt>
							<th:block th:each="oneData, status : ${replyInfo}">
							<dd style="width: 100%;" th:utext="${oneData.entryVal1}"></dd>
							</th:block>
						</dl>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="uPopupWrap off" id="layer_review_pic">
	<div class="area reviewPic" style="width:500px; height:500px;">
		<ul class="picList" th:object="${reviewInfo}">
			<th:block th:if="${attachList != null}" th:each="oneData, status : ${attachList}">
				<li><div class="img" th:style="${'background-image:url(' + @environment.getProperty('domain.image') + oneData.sysFile + ');'}"></div></li>
			</th:block>
		</ul>
		<button type="button" class="btnArr prev" onclick="fnPicPrev('layer_review_pic');">이전</button>
		<button type="button" class="btnArr next" onclick="fnPicNext('layer_review_pic');">다음</button>
		<button type="button" class="btnClose">닫기</button>
	</div>
</div>

<script th:inline="javascript">
/*<![CDATA[*/
	$(document).ready(function() {
		let attachList = [[${attachList}]];
		
		if(attachList.length>0){
			$(".rvPic").show();
		}else{
			$(".rvPic").hide();	
		}
	});
	// 팝업 열기
	function fnPopupOpen(id,el,kind) {
		$("#"+id).removeClass("off");	//레이어 Open
		$("#"+id).find(".picList li").removeClass("on");
		let onIdx = $(el).index();
		$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx == 0) {
			$("#"+id).find("button.prev").addClass("off");
		}
		if (onIdx == picTot) {
			$("#"+id).find("button.next").addClass("off");
		}
	}
	
	// 팝업 닫기 버튼 //uifnPopupClose 함수로 닫으면 remove 되어서 테스트 불가능하며 임시로 사용, 추후 바꾸세요
	$("#layer_review_pic .btnClose").click(function() {
		$("#layer_review_pic").addClass("off"); //레이어 닫기
		$("#layer_review_pic").find("button.btnArr").removeClass("off"); //버튼 초기화
	});
	
	$("#popupReplyDetail .close").click(function() {
		$("#popupReplyDetail").addClass("off"); //레이어 닫기
		$("#popupReplyDetail").find("button.btnArr").removeClass("off"); //버튼 초기화
	});
	
	// 팝업 레이어 : 이전 버튼
	function fnPicPrev(id){
		let onIdx = $("#"+id).find(".picList li.on").index() - 1;
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx >= 0 ) {
			$("#"+id).find(".picList li").removeClass("on");
			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		}
		//화살표버튼
		if (onIdx <= 0) {
			$("#"+id).find("button.prev").addClass("off");
		}
		if (onIdx < picTot) {
			$("#"+id).find("button.next").removeClass("off");
		}
	}

	// 팝업 레이어 : 다음 버튼
	function fnPicNext(id){
		let onIdx = $("#"+id).find(".picList li.on").index() + 1;
		let picTot = $("#"+id).find(".picList li").length - 1;
		//console.log(onIdx +', '+ picTot);
		if (onIdx <= picTot) {
			$("#"+id).find(".picList li").removeClass("on");
			$("#"+id).find(".picList li").eq(onIdx).addClass("on");
		}
		//화살표버튼
		if (onIdx >= picTot) {
			$("#"+id).find("button.next").addClass("off");
		}
		if (onIdx > 0 ) {
			$("#"+id).find("button.prev").removeClass("off");
		}
	}

/*]]>*/
</script>

</html>
