<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="web/common/layout/MypageLayoutWeb">
<!--
 *******************************************************************************
 * @source  : MypageReviewFormWeb.html
 * @desc    : 마이페이지 > 리뷰 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.24   sowon     최초 작성
 *******************************************************************************
 -->
<body>
	<th:block layout:fragment="content">
			<div class="content myReviewList"> <!-- 페이지특정 클래스 = myReviewList -->
				<div class="cont_body">
					<!-- CONT-BODY -->
					<div class="lnb">
					<div class="lnb_tit">
						<h2>마이페이지</h2>
					</div>
					<div class="lnb_list">
						<ul id="mypageLnbList"></ul>
					</div>
				</div>
					<!-- <div class="lnb_list">
						<ul id="mypageLnbList"></ul>
					</div> -->
					<div class="cont">
						<div class="sec_head">
							<h3 class="subH1">리뷰</h3>
						</div>
						<div class="sec_body">
							<div class="com_info_txt">
								<p class="tit">리뷰 안내</p>
								<ul>
									<li>일반 리뷰 작성 시 150P, 포토/영상 리뷰는 350P가 추가 적립됩니다!</li>
									<li>상품기준, 월 최대 10개의 상품까지 작성 및 적립 가능합니다.(동일상품의 옵션만 상이한 경우는 적립되지 않음)</li>
									<li>베스트 리뷰로 선정되면 10,000P가 추가 적립됩니다!</li>
									<li>리뷰는 주문일 기준 90일간 작성이 가능합니다.</li>
								</ul>
							</div>
							<div class="taps" id="tpasReview">
								<div>
									<ul>
										<li id="completeReview"><a href="javascript:void(0);" >작성 가능한 리뷰<span id="comReview" th:text="'('+${#numbers.formatInteger(completeReviewCount,0,'COMMA')}+')'"></span></a></li>
										<li id="alreadyReview"><a href="javascript:void(0);" >내가 쓴 리뷰<span id="alrReview" th:text="'('+${#numbers.formatInteger(alreadyReviewCount,0,'COMMA')}+')'"></span></a></li>
									</ul>
								</div>
							</div>
							<div class="check_notice" th:if="${adminCount != null}">
								<p>
									관리자가 댓글을 남긴 상품평이 있습니다.
									<a href="javascript:void(0);" th:onclick="fnMove([[${adminCount.reviewSq}]])">
										바로 확인
									</a>
								</p>
							</div>
							<div class="area_list" id="reviewList"></div>
							<div class="sec_foot" id="comNav">
								<div class="ui_row">
									<ul class="pageNav" id="paging">

									</ul>
								</div>
							</div>
							<div class="sec_foot" id="alrNav">
								<div class="ui_row">
									<ul class="pageNav" id="paging2">

									</ul>
								</div>
							</div>
							<div class="nodata" id="nodata1" style="display:none;">
								<div class="txt_box">
									<p>
										작성 가능한 리뷰가 없습니다.<br>
									</p>
								</div>
							</div>
							<div class="nodata" id="nodata2" style="display:none;">
								<div class="txt_box">
									<p>
										작성한 리뷰가 없습니다.<br>
									</p>
								</div>
							</div>

						</div>


					</div>
					<!-- // CONT-BODY -->
				</div>
			</div>
			<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/gaga/gaga.paging.js"></script>
	<script th:inline="javascript">
	let attachList = [[${alreadyReviewAttach}]];
	// 작성가능한 리뷰 클릭 시
	$("#completeReview").click(function() {
		$("#alreadyReview").removeClass("active");
		$("#completeReview").addClass("active");
		$(".check_notice").hide();
		$("#alrNav").hide();
		$("#comNav").show();
		gagaPaging.init('searchForm1', fnSearchCallback1, 'paging', 10);
		gagaPaging.load(1);
	})

	$("#alreadyReview").click(function() {
		$("#completeReview").removeClass("active");
		$("#alreadyReview").addClass("active");
		$(".check_notice").show();
		$("#comNav").hide();
		$("#alrNav").show();
		gagaPaging.init('searchForm2', fnSearchCallback2, 'paging2', 10);
		gagaPaging.load(1);
	})

	// 주문 목록 조회 콜백
	var fnSearchCallback1 = function(result) {
		$('#nodata1').hide();
		$('#nodata2').hide();

		$('#reviewList').html('');


		if (result.dataList1 != null && result.dataList1.length > 0) {
			$.each(result.dataList1, function(idx, item) {
				let html = '';
				html += '<div class="part_goods">\n                                                                                                  ';
				html += '	<div class="goods_cont">\n                                                                                              ';
				html += '		<div class="goods_info">\n                                                                                          ';
				html += '			<div class="order_desc">\n                                                                                      ';
				html += '				<div class="goods_box">\n                                                                                   ';
				html += '					<div class="gd_item">\n	                                                                              ';
				html += '						<a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\',\'\',\'IN16_01\')">\n             ';
				html += '							<span class="thumb">\n                                                                          ';
				html += '								<img src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '?RS=550"  width="100%" alt="">\n  ';
				html += '							</span>\n                                                                                       ';
				html += '							<p>\n                                                                                           ';
				html += '								<span class="buy_date"><em>'+item.ordDt+'</em>&nbsp;구매</span>\n             ';
				html += '							</p>\n                                                                                          ';
				html += '							<p>\n                                                                                           ';
				html += '								<span class="brand">'+item.brandNm+'</span>\n                               ';
				html += '							</p>\n                                                                                          ';
				html += '							<p>\n                                                                                           ';
				html += '								<span class="name">'+item.goodsNm+'</span>\n									';
				html += '							</p>\n                                                                                          ';
				html += '						</a>\n                                                                                              ';
				html += '					</div>\n                                                                                                ';
				html += '					<div class="gd_opt">\n                                                                                  ';
				html += '						<div class="option_wrap">\n                                                                         ';
				html += '							<span class="title sr-only">주문 옵션</span>\n                                                      ';
				if (item.goodsType =='G056_S') {
					$.each(item.colorNmArr, function (index2, option) {
						html += '							<span class="option">' + item.itemNmArr[index2] + ' / ' + option + '</span>\n';
					})
				}else{
					html += '							<span class="option">'+item.colorNm+'</span>\n     ';
				}
				html += '						</div>\n                                                                                            ';
				html += '					</div>\n                                                                                                ';
				html += '				</div>\n                                                                                                    ';
				html += '				<div class="status_box">\n                                                                                  ';
				html += '					<p>'+item.remainDt+'일 남음</p>\n                                                                                                  ';
				html += '				</div>\n                                                                                                    ';
				html += '				<div class="button_box">\n                                                                                  ';
				html += '					<p><button type="button" class="btn btn_primary_line btn_sm" onclick="fnReviewCreate('+item.ordNo+','+item.ordDtlNo+',\'' + item.goodsCd + '\')"><span>리뷰쓰기</span></button></p>\n           ';
				html += '				</div>\n                                                                                                    ';
				html += '			</div>\n                                                                                                        ';
				html += '		</div>\n                                                                                                            ';
				html += '	</div>\n                                                                                                                ';
				html += '</div>\n                                                                                                                    ';
				$('#reviewList').append(html);
			})
		}else{
			$('#nodata1').show();
		}
		// Create pagination
		gagaPaging.createPagination(result.paging1.pageable);
	}

	// 주문 목록 조회 콜백
	var fnSearchCallback2 = function(result) {

		$('#nodata1').hide();
		$('#nodata2').hide();

		$('#reviewList').html('');
		if (result.dataList2 != null && result.dataList2.length > 0) {
			$.each(result.dataList2, function(idx, item) {
				let html = '';
				html+='<div class="part_goods">\n';
				html+='		<div class="goods_cont">\n';
				html+='			<div class="goods_info">\n';
				html+='				<div class="order_desc">\n';
				html+='					<div class="goods_box">\n';
				html+='						<div class="gd_item">\n	';
				html+='							<a href="javascript:void(0)" onclick="cfnGoToGoodsDetail(\''+item.goodsCd+'\',\'\',\'IN16_02\')">\n';
				html+='								<span class="thumb">\n';
				html+='									<img src="' + _uploadGoodsUrl + '/' + item.sysImgNm + '?RS=550" width="100%" alt="">\n';
				html+='								</span>\n';
				html+='								<p>\n';
				html+='									<span class="buy_date"><em>'+item.ordDt+'</em>&nbsp;구매</span>\n';
				html+='								</p>\n';
				html+='								<p>\n';
				html+='									<span class="brand">'+item.brandNm+'</span>\n';
				html+='								</p>\n';
				html+='								<p>\n';
				html+='									<span class="name">'+item.goodsNm+'</span>\n																';
				html+='								</p>\n';
				html+='							</a>\n';
				html+='						</div>\n';
				html+='						<div class="gd_opt">\n';
				html+='							<div class="option_wrap">\n';
				html+='								<span class="title sr-only">주문 옵션</span>\n';
				if (item.goodsType =='G056_S') {
					$.each(item.colorNmArr, function (index2, option) {
						html += '							<span class="option">' + item.itemNmArr[index2] + ' / ' + option +'</span>\n';
					})
				}else{
					html += '							<span class="option">'+item.colorNm+'</span>\n     ';
				}
				html+='							</div>\n';
				html+='						</div>\n';
				html+='					</div>\n';
				html+='					<div class="button_box">\n';
				if (item.admRpl == null || item.admRpl == '') {
					html+='						<p><button type="button" class="btn btn_default btn_sm" onclick="fnReviewUpdate('+item.ordNo+','+item.ordDtlNo+',\''+item.goodsCd+'\','+item.reviewSq+')"><span>리뷰 수정</span></button></p>\n';
				}
				html+='						<p><button type="button" class="btn btn_default btn_sm" onclick="fnDeleteReview('+item.reviewSq+')"><span>리뷰 삭제</span></button></p>\n';
				html+='					</div>\n';
				html+='				</div>\n';
				html+='				<div class="order_review">\n';
				html+='					<div class="review">\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';
				html+='								</dl>\n';
				html+='							</div>\n';
				html+='							<div>\n';
				html+='								<dl>\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';
				}

				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 (attachList != null && attachList.length >0) {
					html+='						<div class="photo_box">\n';
					html+='							<div class="photo_list">\n';
					html+='								<ul>';
					/* for (var i = 0; i < attachList.length; i++) { */
					$.each(attachList, function(aIdx, attachList){
						if (attachList.reviewSq == item.reviewSq) {
						html+='									<li>\n';
						html+='										<a>\n';
						html+='											<div class="pic">\n';
						if (attachList.fileGb == 'M') {
							html+='												<span onclick="cfMypageReviewDetail(\''+item.goodsCd+'\', \'Y\',\''+item.reviewSq+'\',\''+attachList.rvAtcSq+'\');" class="thumb mov" style="background-image:url(' + _kollusMediaUrl + '/poster/' + attachList.kmcKey + '?player_version=html5);"></span>\n';
						}else{
							html+='												<span onclick="cfMypageReviewDetail(\''+item.goodsCd+'\', \'Y\',\''+item.reviewSq+'\',\''+attachList.rvAtcSq+'\');" class="thumb" style="background-image:url(' + _uploadImageUrl + '/' + attachList.sysFileNm + ');"></span>\n';
						}
						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+='						</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 style="white-space:pre;">'+item.admRpl.escapeHtml()+'</p>\n';
					html+='								</div>\n';
					html+='							</div>\n';
					html+='						</div>\n';
				}

				html+='					</div>\n';
				html+='				</div>\n';
				html+='			</div>\n';
				html+='		</div>\n';
				html+='</div>\n	';


				$('#reviewList').append(html);
			})
		}else{
			$('#nodata2').show();
		}
		// Create pagination
		gagaPaging.createPagination(result.paging2.pageable);

	}



	// 스크롤 이동
	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);

	}

	// 리뷰삭제
	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 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);
	}


	$(document).ready(function() {

		// 마이페이지 LNB 설정
		fnSetMypageLnbList(7);

		// 마이페이지 location 설정
		fnSetMypageLocation('리뷰', '_PAGE_MYPAGE_REVIEW');

		// 작성가능한 리뷰표시
		$("#completeReview").trigger('click');

	});

	</script>
	</th:block>

</body>
</html>
