<!DOCTYPE html>
<html lang="ko"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="mob/common/layout/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageWishListFormMob.html
 * @desc    : 마이페이지 > 리뷰 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.08   sowon     최초 작성
 *******************************************************************************
 -->
<body>
<!-- 상단헤드 //? -->
<th:block layout:fragment="content">
		<main role="" id="" class="container my">
			<section class="content review">
				<div class="inner">
					<div class="ADwrap">
						<span class="adcopy">일반 리뷰 150P, 포토/영상 리뷰 350P 적립!</span>

						<div class="tip_wrap tip1" >
							<div class="tip_tit">?</div>
							<div class="tip_contents">
								<p class="tip_txt">
									<ul>
										<li>일반 리뷰 작성 시 150P, 포토/영상 리뷰는 350P가 추가 적립됩니다!</li>
										<li>상품기준, 월 최대 10개의 상품까지 작성 및 적립 가능합니다.<br>(동일상품의 옵션만 상이한 경우는 적립되지 않음)</li>
										<li>베스트 리뷰로 선정되면 10,000P가 추가 적립됩니다!</li>
										<li>리뷰는 주문일 기준 90일간 작성이 가능합니다.</li>
									</ul>
								</p>
							</div>
						</div>
					</div>

				</div>
				<div class="inner wide">
					<div class="tabWrap">
						<ul class="tabIndex">
							<li id="completeReview"><a href="javascript:void(0);">작성 가능한 리뷰<span class="count" id="comReview" th:text="${#numbers.formatInteger(completeReviewCount,0,'COMMA')}"></span></a></li>
							<li id="alreadyReview"><a href="javascript:void(0);" >내가 쓴 리뷰<span class="count" id="alrReview" th:text="${#numbers.formatInteger(alreadyReviewCount,0,'COMMA')}" ></span></a></li>
						</ul>
						<div class="tabContents">
							<div class="tab_cont active">

								<div class="once" th:if="${adminCount != null}" id="check_notice">
									<div class="alert" role="alert">
										<p>관리자가 댓글을 남긴 상품평이 있습니다.</p>
										<p class="formOnly" >바로확인</p>
										<button type="button" class="alertCls" th:onclick="fnMove([[${adminCount.reviewSq}]])" data-dismiss="alert"><span aria-hidden="true">바로 확인</span><span class="sr-only">move and Close</span></button>
									</div>
								</div>
								<!-- tab_cont Start -->
								<div class="inner">
									<!-- 작성가능한 리뷰 div -->
									<div class="items_group" style="display: none;" id="completeList">
									</div>
									<div style="display: none;" id="alreadyList">
									</div>

									<div class="btn_group" id="btnMoreDiv" style="display: none;">
										<div><button class="btn btnIcon_more" id="btnMore">더보기</button></div>
									</div>
										<div class="btn_group" id="btnMore2Div" style="display: none;">
										<div><button class="btn btnIcon_more" id="btnMore2">더보기</button></div>
									</div>

								</div>
							    <!-- // tab_cont End -->
							</div>

						</div>
					</div>
				</div>
			</section>
		</main>
<form id="searchForm1" name="searchForm1" th:action="@{'/mypage/complete/review/list'}" th:method="post">
	<input type="hidden" name="pageNo" value="1" />
	<input type="hidden" name="pageSize" value="10" />
</form>
<form id="searchForm2" name="searchForm2" th:action="@{'/mypage/already/review/list'}" th:method="post">
	<input type="hidden" name="pageNo" value="1" />
	<input type="hidden" name="pageSize" value="10" />
</form>

<script src="/ux/plugins/jquery/jquery.history.min.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	let attachList = [[${alreadyReviewAttach}]];
	// 작성가능한 리뷰 클릭 시

	var fnCompleteList = function () {
		gagajf.ajaxFormSubmit($('#searchForm1').prop('action'), '#searchForm1', fnGetCompleteCallback);
	}

	var fnAlreadyList = function () {
		gagajf.ajaxFormSubmit($('#searchForm2').prop('action'), '#searchForm2', fnGetAlreadyCallback);
	}

	var fnGetAlreadyCallback = function (result) {
			if (result.dataList2 != null && result.dataList2.length > 0) {
				if (result.paging2.pageable.pageNo == 1){
					$('#alreadyList').html('');
				}
				var html = '';
				$.each(result.dataList2, function(idx, item) {
					html += '<div class="reviewitems">\n';
					html += '	<div class="part_goods">\n';
					html += '		<div class="goods_section">\n';
					html += '			<div class="goods_detail">\n';
					html += '				<a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\',\'\',\'IN16_02\')">\n';
					html += '					<div class="thumb_box">\n';
					html += '						<img src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '?RS=405" alt="tmp_pdClickother1">\n';
					html += '					</div>\n';
					html += '					<div class="info_box">\n';
					html += '						<div class="od_name">\n';
					html += '							<div class="goods_date"><span class="date">'+item.ordDt+'</span> 구매</div>\n';
					html += '							<div class="brand">\n';
					html += '								<span>'+item.brandNm+'</span>\n';
					html += '							</div>\n';
					html += '							<div class="name">'+item.goodsNm+'</div>\n';
					html += '						</div>\n';
					html += '						<div class="od_opt">\n';
					html += '							<div class="option">\n';
					if (item.goodsType =='G056_S') {
						html += '<em>';
						$.each(item.colorNmArr, function (index2, option) {
							html +=  item.itemNmArr[index2] + ' / ' + option  + '<br>';
						})
						html += '</em>\n';
					}else{
						html += '							<em>'+item.colorNm+'</em>\n';
					}
					html += '							</div>\n';
					html += '						</div>\n';
					html += '					</div>\n';
					html += '				</a>\n';
					html += '			</div>\n											';
					html += '		</div>\n';
					html += '	</div>\n';
					html += '	<div class="reviewMy">\n';
					html += '		<div class="info_box">\n';
					html += '			<div class="star_score">\n';
					html += '				<span class="star">\n';
					html += '					<em class="progbar" style="width:'+(item.score*20)+'%;"></em>\n';
					html += '				</span>\n';
					html += '			</div>\n';
					html += '			<div class="writer">\n';
					html += '				<span class="wr_date">'+item.regDt+'</span>\n';
					html += '			</div>\n';
					html += '		</div>\n';
					html += '		<div class="response_box">\n';
					html += '			<div>\n';
					html += '				<dl>\n';
					html += '					<div>\n';
					html += '						<dt>구매옵션</dt>\n';
					html += '						<dd>'+item.colorNm+'</dd>\n';
					html += '					</div>\n';

					// 2021.08.11 키, 몸무게 정보가 있으면 노출
					if (item.height > 0 || item.weight > 0 ) {
						html += '					<div>\n';
						html += '						<dt>키/몸무게</dt>\n';
						html += '						<dd>'+item.height+'cm/'+item.weight+'kg</dd>\n';
						html += '					</div>\n';
					}

					html += '				</dl>\n';
					html += '			</div>\n';
					html += '		</div>\n';
					if (attachList != null && attachList.length >0) {
						var j = 0;
						html += '		<div class="photo_box">\n';
						html += '			<div class="photo_list">\n';
						html += '				<ul>\n';
						for (var i = 0; i < attachList.length; i++) {
							if (attachList[i].reviewSq == item.reviewSq) {
								html += '					<li>\n';
								html += '						<a>\n';
								html += '							<div class="pic">\n';
								if (attachList[i].fileGb == 'M') {
									html += '								<span class="thumb mov" onclick="cfMypageReviewDetail(\''+item.goodsCd+'\', \'Y\',\''+item.reviewSq+'\',\''+j+'\');"  style="background-image:url(' + _kollusMediaUrl + '/poster/' + attachList[i].kmcKey + '?player_version=html5);"></span>\n';
								}else{
									html += '								<span class="thumb" onclick="cfMypageReviewDetail(\''+item.goodsCd+'\', \'Y\',\''+item.reviewSq+'\',\''+j+'\');" style="background-image:url(' + _uploadImageUrl + '/' + attachList[i].sysFileNm + ');"></span>\n';
								}
								j++;
								html += '							</div>\n';
								html += '						</a>\n';
								html += '					</li>\n';
							}
						}
						html += '				</ul>\n';
						html += '			</div>\n';
						html += '		</div>\n';
					}
					html += '		<div class="txt_review_box" id="admin_'+item.reviewSq+'">\n';
					//html += '			<p style="white-space:pre;">'+item.reviewContent.escapeHtml()+'</p>\n';
					//html += '			<p>'+item.reviewContent.escapeHtml()+'</p>\n';

					// 2021.08.26 줄바꿈처리
					var reviewContent = item.reviewContent.replace(/(\n|\r\n)/g, '<br>');
					html += '			<p>'+reviewContent+'</p>\n';
					html += '		</div>\n';
					html += '		<div  class="response_box2">\n';
					html += '			<div>\n';
					html += '				<dl class="clear">\n';
					if (item.sizeGb == 'T' || item.sizeGb == 'B' || item.sizeGb == 'S') {
						html += '					<div>\n';
						html += '						<dt>사이즈</dt>\n';
						html += '						<dd>'+item.scoreSize+'</dd>\n';
						html += '					</div>\n';
						html += '					<div>\n';
						html += '						<dt>컬러</dt>\n';
						html += '						<dd>'+item.scoreColor+'</dd>\n';
						html += '					</div>\n';
					}
					if (item.sizeGb == 'T' || item.sizeGb == 'B') {
						html += '					<div>\n';
						html += '						<dt>핏</dt>\n';
						html += '						<dd>'+item.scoreFit+'</dd>\n';
						html += '					</div>\n';
						html += '					<div>\n';
						html += '						<dt>두께감</dt>\n';
						html += '						<dd>'+item.scoreThick+'</dd>\n';
						html += '					</div>\n';
					}
					if (item.sizeGb == 'S') {
						html += '					<div>\n';
						html += '						<dt>무게감</dt>\n';
						html += '						<dd>'+item.scoreWeight+'</dd>\n';
						html += '					</div>\n';
						html += '					<div>\n';
						html += '						<dt>볼넓이</dt>\n';
						html += '						<dd>'+item.scoreBall+'</dd>\n';
						html += '					</div>\n';
					}
					html += '				</dl>\n';
					html += '			</div>\n';
					html += '		</div>\n';
					if (item.admRpl != null && item.admRpl != '') {
						html += '		<div class="reply_box">\n';
						html += '			<div class="reply">\n';
						html += '				<div class="reply_writer">\n';
						html += '					<span class="wr_name">관리자</span>\n';
						html += '					<span class="wr_date">'+item.admRplDt+'</span>\n';
						html += '				</div>\n';
						html += '				<div class="reply_txt">\n';
						//html += '					<p>'+item.admRpl.escapeHtml()+'</p>\n';
						// 2021.08.26 줄바꿈처리
						var admRpl = item.admRpl.replace(/(\n|\r\n)/g, '<br>');
						html += '					<p>'+admRpl+'</p>\n';
						html += '				</div>\n';
						html += '			</div>\n';
						html += '		</div>\n';
					}
					html += '		<div class="goods_btn_wrap btn_group_flex">\n';
					if (item.admRpl == null || item.admRpl == '') {
						html += '			<div><button type="button" id="btn_review_delete" class="btn btn_dark" onclick="fnReviewUpdate('+item.ordNo+','+item.ordDtlNo+',\''+item.goodsCd+'\','+item.reviewSq+')"><span>리뷰 수정</span></button></div>\n';
					}
					html += '			<div><button type="button" id="btn_review_delete" class="btn btn_default" onclick="fnDeleteReview('+item.reviewSq+')"><span>리뷰 삭제</span></button></div>\n';
					html += '		</div>\n';
					html += '	</div>\n';
					html += '</div>\n';
				});

				$('#alreadyList').append(html);
				if (result.paging2.pageable.totalPage > result.paging2.pageable.pageNo) {
					$('#btnMoreDiv').hide();
					$('#btnMore2Div').show();
					$('#searchForm2 input[name=pageNo]').val(result.paging2.pageable.pageNo + 1);
				}else{
					$('#btnMoreDiv').hide();
					$('#btnMore2Div').hide();
				}

			}else{
				$('#alreadyList').html('');
				var html = '';
				html += '<div class="nodata" id="nodata1">\n';
				html += '	<div class="txt_box">\n';
				html += '		<p>';
				html += '			작성한 리뷰가 없습니다.<br>';
				html += '		</p>';
				html += '	</div>\n';
				html += '</div>\n';
				$('#btnMoreDiv').hide();
				$('#btnMore2Div').hide();
				$('#alreadyList').append(html);
			}
	}

	var fnGetCompleteCallback = function (result) {
		if (result.dataList1 != null && result.dataList1.length > 0) {
			if (result.paging1.pageable.pageNo == 1){
				$('#completeList').html('');
			}
			var html = '	<div class="part_goods">\n';
			$.each(result.dataList1, function(idx, item) {
				html += '		<div class="goods_section">\n';
				html += '			<div class="goods_detail">\n';
				html += '				<a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\',\'\',\'IN16_01\')">\n';
				html += '					<div class="thumb_box">\n';
				html += '						<img src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '" alt="tmp_pdClickother1">\n';
				html += '					</div>\n';
				html += '					<div class="info_box">\n';
				html += '						<div class="od_name">\n';
				html += '							<div class="goods_date"><span class="date">'+item.ordDt+'</span> 구매</div>\n';
				html += '							<div class="brand">\n';
				html += '								<span>'+item.brandNm+'</span>\n';
				html += '							</div>\n';
				html += '							<div class="name">'+item.goodsNm+'</div>\n';
				html += '						</div>\n';
				html += '						<div class="od_opt">\n';
				html += '							<div class="option">\n';
				if (item.goodsType =='G056_S') {
					html += '<em>';
					$.each(item.colorNmArr, function (index2, option) {
						html +=  item.itemNmArr[index2] + ' / ' + option + '<br>';
					})
					html += '</em>\n';
				}else{
					html += '							<em>'+item.colorNm+'</em>\n';
				}
				html += '							</div>\n';
				html += '						</div>\n';
				html += '					</div>\n';
				html += '				</a>\n';
				html += '			</div>\n';
				html += '			<div class="goods_btn_wrap btn_group_flex">\n';
				html += '				<div><button type="button" class="btn btn_default" onclick="fnReviewCreate('+item.ordNo+','+item.ordDtlNo+',\'' + item.goodsCd + '\')"><span>리뷰쓰기(</span><em>'+item.remainDt+'</em><span>일 남음)</span></button></div>\n';
				html += '			</div>\n';
				html += '		</div>\n';
			});
			html += '	</div>\n';
			$('#completeList').append(html);
			if (result.paging1.pageable.totalPage > result.paging1.pageable.pageNo) {
				$('#btnMoreDiv').show();
				$('#searchForm1 input[name=pageNo]').val(result.paging1.pageable.pageNo + 1);
			}else{
				$('#btnMoreDiv').hide();
			}
		}else{
			$('#completeList').html('');
			var html = '';
			html += '<div class="nodata" id="nodata1">\n';
			html += '	<div class="txt_box">\n';
			html += '		<p>';
			html += '			작성 가능한 리뷰가 없습니다.<br>';
			html += '		</p>\n';
			html += '	</div>\n';
			html += '</div>\n';

			$('#completeList').append(html);
			$('#btnMoreDiv').hide();
		}
	}

	$("#completeReview").click(function() {
		$("#alreadyReview").removeClass("active");
		$("#completeReview").addClass("active");
		$("#check_notice").hide();
		$('#btnMoreDiv').show();
		$('#btnMore2Div').hide();
		$("#completeList").show();
		$("#alreadyList").hide();
		$("#searchForm1 input[name=pageNo]").val(1);
		fnCompleteList();
	})


	$("#alreadyReview").click(function() {
		$("#completeReview").removeClass("active");
		$("#alreadyReview").addClass("active");
		$("#check_notice").show();
		$('#btnMoreDiv').hide();
		$('#btnMore2Div').show();
		$("#alreadyList").show();
		$("#completeList").hide();
		$("#searchForm2 input[name=pageNo]").val(1);
		fnAlreadyList();

	});
	// 리뷰 수정
	var fnReviewUpdate = function(obj1,obj2,obj3) {
		let ordNo = obj1;
		let ordDtlNo = obj2;
		let goodsCd = obj3;
		let reviewStat = 'u';

		$('#createReview input[name=ordNo]').val(ordNo);
		$('#createReview input[name=ordDtlNo]').val(ordDtlNo);
		$('#createReview input[name=goodsCd]').val(goodsCd);
		$('#createReview input[name=reviewStat]').val(reviewStat);

		document.createReview.submit();
		// cfnGoToPage(_PAGE_MYPAGE_CREATE_REVIEW + ordNo +'/'+ordDtlNo+'/'+goodsCd+'/'+reviewStat);
	}

	// 리뷰삭제
	var fnDeleteReview = function(obj) {
		var data = {reviewSq : obj};

		var jsonData = JSON.stringify(data);

		mcxDialog.confirm("작성한 리뷰를 삭제하시겠습니까?", {
			cancelBtnText : "취소",
			sureBtnText : "확인",
			sureBtnClick : function() {

				gagajf.ajaxJsonSubmit('/mypage/review/delete', jsonData, function(e) {
					mcxDialog.alert("삭제되었습니다.");
					$("#alrReview").text("("+e.alreadyReviewCount+")");
					$("#comReview").text("("+e.completeReviewCount+")");
					$("#alreadyReview").trigger('click');
				});
			}
		});
	}

	// 스크롤 이동
	var fnMove = function(obj) {
        var data = {};
        var jsonData = JSON.stringify(data);
        // 고객 확인 여부 업데이트
    	gagajf.ajaxJsonSubmit('/mypage/review/customer/confirm', jsonData,function() {
    		$(".check_notice").html('');
    		$(".check_notice").css("background-color","#ffffff");

		});

    	 var offset = $("#admin_" + obj).offset();
         $('html, body').animate({scrollTop : offset.top}, 300);

	}

	// 더보기
	$('#btnMore').on('click', function() {
		fnCompleteList();
	});

	$('#btnMore2').on('click', function() {
		fnAlreadyList();
	});

/*]]>*/

 $(document).ready(function() {
	$("#completeReview").trigger("click");
 	$('#htopTitle').text('리뷰');

 });
</script>
	</th:block>

</body>
</html>