<!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/NoMemberLayoutWeb">
<!--
 *******************************************************************************
 * @source  : NoMemberCreReturnDetailFormWeb.html
 * @desc    : 비회원 > 취소/반품/교환내역 > 반품상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.03   card007     최초 작성
 *******************************************************************************
 -->
<body>

<th:block layout:fragment="content">
	<div class="content myOrderView"> <!-- 페이지특정 클래스 = myOrderView -->
		<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="cont">
				<div class="sec_head">
					<h3 class="subH1">반품상세</h3>
					<span class="order_number">주문번호&nbsp;:&nbsp;<em th:text="${oneData.ordNo}"></em></span>
				</div>
				<div class="sec_body">
					<div class="part_goods">
						<div class="goods_head">
							<p>주문일 <span th:text="${oneData.ordDt}"></span></p>
							<a href="javascript:void(0)" th:if="${oneData.chgStat == 'G685_50' or oneData.chgStat == 'G685_51'}" th:attr="ordNo=${oneData.ordNo}, ordChgSq=${oneData.ordChgSq}, cancelGb=${oneData.chgGb}, noMember=noMember" onclick="fnCreCancel(this);">전체신청취소</a>
						</div>
						<div class="goods_cont">
							<!-- 주문상품 -->
							<th:block th:if="${returnDetailList.returnDetailList}" th:each="returnDtl, status : ${returnDetailList.returnDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
								<div class="goods_info">
									<div class="order_desc">
										<div class="goods_box">
											<div class="gd_item">
												<a href="javascript:void(0)" th:attr="goodsCd=${returnDtl.goodsCd}, optCd1=${returnDtl.goodsType == 'G056_N' ? returnDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
													<span class="thumb">
														<img th:src="${imageUrl + '/' + returnDtl.sysImgNm + '?RS=100'}" width="100%" alt="">
													</span>
													<p>
														<span class="brand" th:text="${returnDtl.brandNm}"></span>
														<span class="tag primary" th:if="${returnDtl.shotDelvYn == 'Y'}">총알배송</span>
														<span class="tag" th:if="${returnDtl.shotDelvYn == 'N' and returnDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
														<span class="tag" th:if="${returnDtl.selfGoodsYn == 'N'}">업체직배송</span>
													</p>
													<p>
														<span class="name" th:text="${returnDtl.goodsNm}"></span>
													</p>
												</a>
											</div>
											<div class="gd_opt">
												<div class="option_wrap">
													<span class="title sr-only">주문 옵션</span>
													<span class="option" th:if="${returnDtl.goodsType == 'G056_S'}" th:each="option, status : ${returnDtl.colorNmArr}" th:text="|${returnDtl.itemNmArr[status.index]} / ${option} / ${returnDtl.optCd2Arr[status.index]}|"></span>
													<span class="option" th:unless="${returnDtl.goodsType == 'G056_S'}" th:text="|${returnDtl.colorNm} / ${returnDtl.optCd2}|"></span>
												</div>
											</div>
											<div class="gd_calc">
												<p>
													<span class="count"><em th:text="${returnDtl.chgQty}"></em>개</span>
												</p>
<!--												<p>-->
<!--													<span class="price_org" th:if="${returnDtl.priceOrg > returnDtl.priceSale}"><em th:text="${#numbers.formatInteger(returnDtl.priceOrg, 1, 'COMMA')}"></em>원</span>-->
<!--													<span class="price_sale"><em th:text="${#numbers.formatInteger(returnDtl.priceSale, 1, 'COMMA')}"></em>원</span>-->
<!--												</p>-->
											</div>
										</div>
										<div class="status_box">
											<p>
												<th:block th:if="${returnDtl.chgStat == 'G685_51'}" th:text="|결제대기|"></th:block>
												<th:block th:if="${returnDtl.chgStat == 'G685_33'}" th:text="|환불진행중|"></th:block>
												<th:block th:if="${returnDtl.chgStat == 'G685_69'}" th:text="|접수취소|"></th:block>
												<th:block th:unless="${returnDtl.chgStat == 'G685_51' or returnDtl.chgStat == 'G685_33' or returnDtl.chgStat == 'G685_69'}" th:text="${returnDtl.chgStatNm}"></th:block>
												<span class="date" th:text="${returnDtl.chgDate}"></span>
												<span class="time" th:text="${returnDtl.chgTime}"></span>
											</p>
										</div>
										<div class="button_box">
<!--											<p th:if="${returnDtl.chgStat == 'G685_50' or returnDtl.chgStat == 'G685_51'}"><button type="button" class="btn btn_default btn_sm" th:attr="ordNo=${returnDtl.ordNo}, ordChgSq=${returnDtl.ordChgSq}, cancelGb=${returnDtl.chgGb}" onclick="fnCreCancel(this);"><span>신청취소</span></button></p>-->
											<p th:if="${returnDtl.chgStat == 'G685_32' or returnDtl.chgStat == 'G685_51'}"><button type="button" class="btn btn_default btn_sm" th:attr="ordNo=${returnDtl.ordNo}, ordChgSq=${returnDtl.ordChgSq}" onclick="fnCrePayAddCost(this);"><span>결제하기</span></button></p>
										</div>
									</div>
									<!-- 반품결제대기 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_51' or (returnDtl.chgGb == 'G680_30' and returnDtl.chgStat == 'G685_32')}"><p th:text="|${#numbers.formatInteger(returnDtl.addPayCost, 1, 'COMMA')}원 결제 후 반품 가능합니다.|"></p></div>
									<!-- 교환접수 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_50'}"><p>반품 신청이 접수 되었습니다. 신속하게 처리하여 드리겠습니다.</p></div>
									<!-- 회수요청 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_30'}"><p>고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p></div>
									<!-- 반품상품검수중 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_31' and returnDtl.chgGb == 'G680_30'}"><p>고객님이 반품하신 상품을 검수 중에 있습니다.</p></div>
									<!-- 반품진행중 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_33'}"><p>환불을 진행하고 있습니다.(영업일 최대 3일 내 환불 예정)</p></div>
									<!-- 반품완료 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_60'}"><p>반품이 완료되었습니다.</p></div>
									<!-- 반품철회 -->
									<div class="order_text" th:if="${returnDtl.chgStat == 'G685_69'}"><p>요청하신 반품을 취소하였습니다.</p></div>
								</div>
							</th:block>
							<!-- //주문상품 -->
						</div>
					</div>
					<h4 class="subH3">상세 정보</h4>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="210">
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<th>반품접수 일자</th>
									<td th:text="${oneData.chgDt}"></td>
								</tr>
								<tr>
									<th>반품완료 일자</th>
									<td th:text="${oneData.completeDt}"></td>
								</tr>
							</tbody>
						</table>
					</div>
					<th:block th:if="${oneData.wdGb == 'W'}">
						<h4 class="subH3">반품 회수지 주소</h4>
						<div class="tbl type1">
							<table>
								<colgroup>
									<col width="210">
									<col width="*">
								</colgroup>
								<tbody>
									<tr>
										<th>회수 진행 여부</th>
										<td>회수요청</td>
									</tr>
									<tr>
										<th>회수지 정보</th>
										<td>
											<div class="block_line">
												<ul>
													<li>
														<span id="chgerNm" th:text="${oneData.chgerNm}"></span>
													</li>
													<li>
														<span id="chgerPhnno" th:text="${oneData.chgerPhnno}"></span>
													</li>
													<li>
														<span id="chgerAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></span>
														<button type="button" class="btn btn_default btn_sm" th:if="${oneData.chgStat == 'G685_50' or oneData.chgStat == 'G685_51'}" onclick="fnChangeDeliveryAddr();"><span>회수지 변경</span></button>
													</li>
<!--													<li>-->
<!--														배송요청 사항&nbsp;:&nbsp;<span id="chgerRtnMemo" th:text="${oneData.chgerRtnMemo}"></span>-->
<!--														<button type="button" class="btn_underline" th:if="${oneData.chgStat == 'G685_50' or oneData.chgStat == 'G685_51'}" onclick="fnChangeDeliveryMemo(this)"><span>변경하기</span></button>-->
<!--													</li>-->
												</ul>
											</div>
										</td>
									</tr>
									<tr th:if="${not #strings.isEmpty(oneData.wdInvoiceNo) and not #strings.isEmpty(oneData.shipCompNm)}">
										<th>회수 정보</th>
										<td>
											<th:block th:text="|${oneData.shipCompNm} / ${oneData.wdInvoiceNo}|"></th:block>
											<button type="button" class="btn btn_default btn_sm" th:if="${not #strings.isEmpty(oneData.shipCompCd) and not #strings.isEmpty(oneData.wdInvoiceNo)}" th:attr="shipCompCd=${oneData.shipCompCd}, wdInvoiceNo=${oneData.wdInvoiceNo}" onclick="fnGoToWithdrawDelivery()"><span>회수조회</span></button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</th:block>
					<h4 class="subH3">환불정보</h4>
					<div class="tbl type6">
						<table>
							<colgroup>
								<col width="50%">
								<col width="50%">
							</colgroup>
							<tbody>
								<tr>
									<td>
										<dl>
											<div>
												<dt>환불 예정 금액</dt>
												<dd>
													<div class="price">
														<span class="return_total_price"><em th:text="${#numbers.formatInteger(oneData.refundAmt + oneData.rfPntAmt + oneData.rfGfcdUseAmt, 1, 'COMMA')}"></em>원</span>
													</div>
												</dd>
											</div>
											<div class="include_item"> <!-- 할인항목 표기 class명 include_item -->
												<dt>상품 취소 금액</dt>
												<dd><em th:text="${#numbers.formatInteger((oneData.rfCnclAmt + oneData.rfCpn1Amt), 1, 'COMMA')}"></em>원</dd>
											</div>
											<div class="include_item">
												<dt>배송비</dt>
												<dd><em th:text="${#numbers.formatInteger((oneData.rfDeliveryFee + oneData.rfDelvCpnAmt), 1, 'COMMA')}"></em>원</dd>
											</div>
											<div class="include_item">
												<dt>할인 금액 차감</dt>
												<dd><em th:text="${#numbers.formatInteger(-(oneData.rfCpn1Amt + oneData.rfTmtb1Amt + oneData.rfTmtb2Amt + oneData.rfGoodsCpnAmt + oneData.rfCartCpnAmt + oneData.rfDelvCpnAmt + oneData.rfPrePntAmt), 1, 'COMMA')}"></em>원</dd>
											</div>
										</dl>
									</td>
									<td>
										<dl>
											<div>
												<dt>결제 금액 환불</dt>
												<dd>
													<em th:text="${#numbers.formatInteger(oneData.refundAmt, 1, 'COMMA')}"></em>원
												</dd>
											</div>
											<div>
												<dt>포인트 환불</dt>
												<dd>
													<em th:text="${#numbers.formatInteger(oneData.rfPntAmt, 1, 'COMMA')}"></em>P
												</dd>
											</div>
											<div>
												<dt>상품권 환불</dt>
												<dd>
													<em  th:text="${#numbers.formatInteger(oneData.rfGfcdUseAmt, 1, 'COMMA')}"></em>원
												</dd>
											</div>
											<div>
												<dt>환불 수단</dt>
												<dd th:if="${oneData.pgGb == 'KCP'}" th:text="${oneData.payMeansNm}"></dd>
												<dd th:if="${oneData.pgGb == 'NAVER'}">네이버페이</dd>
												<dd th:if="${oneData.pgGb == 'KAKAO'}">카카오페이</dd>
												<dd th:if="${oneData.pgGb == 'PAYCO'}">PAYCO</dd>
											</div>
											<div th:if="${refundYn == 'Y' and oneData.pgGb == 'KCP' and oneData.payMeans == 'G014_30'}">
												<dt class="sr-only">영수증 확인</dt>
												<dd><button type="button" class="btn btn_default btn_sm" th:attr="ordChgSq=${oneData.ordChgSq}, refundYn=${refundYn}" onclick="fnReceipt('cancel')"><span>취소 전표 보기</span></button></dd>
											</div>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="txt_info">
						<ul>
							<li>
								카드사로 결제 취소 요청이 전달된 후 환불까지는 평일 기준 3 ~7일이 소요될 수 있습니다.
							</li>
						</ul>
					</div>
					<div class="btn_footer_area">
						<button type="button" class="btn btn_dark btn_md" onclick="cfnGoToPage(_PAGE_NOMEMBER_CRE_LIST);"><span>확인</span></button>
					</div>
				</div>
			</div>
			<!-- // CONT-BODY -->
		</div>
	</div>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	let oneData = [[${oneData}]];
	var isLogin = [[${isLogin}]];
	let ordNo = oneData.ordNo;
	//let kcpReceiptUrl = [[${@environment.getProperty('pg.kcp.receipt.url')}]];
	let kcpReceiptUrl = [[${kcpReceiptUrl}]];
	let refundYn = [[${refundYn}]];
	let jsonObj = {};

	$(document).ready(function() {
		// 마이페이지 LNB 설정
		fnSetNoMemberLnbList(2);
		
		// 마이페이지 location 설정
		fnSetNoMemberLocation('취소/반품/교환 내역', '반품 상세');
	});

	// 회수지 정보 설정
	var delvAddrSet = function(delvObj) {
		let ordChgSq = oneData.ordChgSq;
		let chgerNm = delvObj.recipNm;
		let chgerPhnno = delvObj.recipPhnno;
		let chgerZipcode = delvObj.recipZipcode;
		let chgerBaseAddr = delvObj.recipBaseAddr;
		let chgerDtlAddr = delvObj.recipDtlAddr;
		let chgerRtnMemo = delvObj.delvMemo;
		let chgerAddr = chgerBaseAddr + ' ' + chgerDtlAddr;

		let data = {};
		data.ordNo = ordNo;
		data.ordChgSq = ordChgSq;
		data.chgerNm = chgerNm;
		data.chgerPhnno = chgerPhnno;
		data.chgerZipcode = chgerZipcode;
		data.chgerBaseAddr = chgerBaseAddr;
		data.chgerDtlAddr = chgerDtlAddr;
		data.chgerRtnMemo = chgerRtnMemo;

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit('/noMember/change/chger/addr', jsonData, function(result) {
			if (result.status == '200') {
				$('#chgerNm').text(chgerNm);
				$('#chgerPhnno').text(chgerPhnno);
				$('#chgerAddr').text(chgerAddr);
				$('#chgerRtnMemo').text(chgerRtnMemo);
			}
		});
	}
	
	// 배송메모 설정
	var delvMemoSet = function(delvMemoObj) {
		let ordChgSq = oneData.ordChgSq;
		let delvMemo = delvMemoObj.delvMemo;

		let data = {};
		data.ordChgSq = ordChgSq;
		data.chgerRtnMemo = delvMemo;
		
		let jsonData = JSON.stringify(data);
		
		gagajf.ajaxJsonSubmit('/noMember/change/chger/rtn/memo', jsonData, function(result) {
			if (result.status == '200') {
				$("#chgerRtnMemo").text(delvMemo);
			}
		});
		
	}
/*]]>*/
</script>

</th:block>

</body>
</html>
