<!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/NoMemberLayoutMob">
<!--
 *******************************************************************************
 * @source  : NoMemberCreReturnDetailFormMob.html
 * @desc    : 비회원 > 취소/반품/교환내역 > 반품상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.16   card007     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<main role="" id="" class="container my">
	<section class="content my_return">
		<div class="inner wide bg_beige">
			<div class="order_number">
				<dl class="clear">
					<dt>주문번호</dt>
					<dd th:text="${oneData.ordNo}"></dd>
				</dl>
			</div>
		</div>
		<div class="inner">
			<div class="part_goods">
				<div class="goods_top">
					<div class="goods_date">주문일<span class="date" th:text="${oneData.ordDt}"></span></div>
					<th:block th:if="${oneData.chgStat == 'G685_50' or oneData.chgStat == 'G685_51'}">
						<a href="javascript:void(0);" th:attr="ordNo=${oneData.ordNo}, ordChgSq=${oneData.ordChgSq}, cancelGb=${oneData.chgGb}" onclick="fnCreCancel(this, 'noMember');" class="detail_btn">전체신청취소</a>
					</th:block>
				</div>
				
				<th:block th:if="${returnDetailList.returnDetailList}" th:each="returnDtl, status : ${returnDetailList.returnDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
					<div class="goods_section">
						<div class="goods_status">
							<p class="dlvr_staus" th:if="${returnDtl.chgStat == 'G685_33'}" th:text="|환불진행중|"></p>
							<p class="dlvr_staus" th:if="${returnDtl.chgStat == 'G685_69'}" th:text="|접수취소|"></p>
							<p class="dlvr_staus" th:unless="${returnDtl.chgStat == 'G685_33' or returnDtl.chgStat == 'G685_69'}" th:text="${returnDtl.chgStatNm}"></p>
							<p class="dlvr_desc"  th:text="|${returnDtl.chgDate} ${returnDtl.chgTime}|"></p>
						</div>
						
						<div class="goods_detail">
							<a href="javascript:void(0)" th:attr="goodsCd=${returnDtl.goodsCd}, optCd1=${returnDtl.goodsType == 'G056_N' ? returnDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
								<div class="thumb_box">
									<img th:src="${imageUrl + '/' + returnDtl.sysImgNm + '?RS=90'}" width="100%" alt="">
								</div>
								<div class="info_box">
									<div class="od_name">
										<div class="brand">
											<span th:text="${returnDtl.brandNm}"></span>
											<div class="badge_wrap">
												<em class="order_badge order_bullet_badge"	th:if="${returnDtl.shotDelvYn == 'Y'}">총알배송</em>
												<em class="order_badge"						th:if="${returnDtl.shotDelvYn == 'N' and returnDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</em>
												<em class="order_badge"						th:if="${returnDtl.selfGoodsYn == 'N'}">업체직배송</em>
											</div>
										</div>
										<div class="name" th:text="${returnDtl.goodsNm}"></div>
									</div>
									<div class="od_opt">
										<!-- 세트상품일때 -->
										<th:block th:if="${returnDtl.goodsType} == 'G056_S'">
											<th:block th:each="option , index2 : ${returnDtl.colorNmArr}">
												<div class="option">
													<em th:text="${returnDtl.itemNmArr[index2.index]}"></em>
													<em th:text="${option}"></em>
													<em th:text="${returnDtl.optCd2Arr[index2.index]}"></em>
												</div>
											</th:block>
										</th:block>
										<!-- //세트상품일때 -->
										<!-- 단품상품일때 -->
										<th:block th:unless="${returnDtl.goodsType} == 'G056_S'">
											<div class="option">
												<em th:text="${returnDtl.colorNm}"></em>
												<em th:text="${returnDtl.optCd2}"></em>
											</div>
										</th:block>
										<!-- //단품상품일때 -->
									</div>
									<div class="od_calc">
										<p class="price">
											<span class="count"><em th:text="${returnDtl.chgQty}"></em>개</span>
										</p>
									</div>
								</div>
							</a>
						</div>
						<div class="goods_btn_wrap btn_group_flex" th:if="${returnDtl.chgStat == 'G685_32' or returnDtl.chgStat == 'G685_51'}">
							<div>
								<button type="button" class="btn btn_default" th:attr="ordNo=${returnDtl.ordNo}, ordChgSq=${returnDtl.ordChgSq}" onclick="fnCrePayAddCost(this);">
									<span>결제하기</span>
								</button>
							</div>
						</div>
						<div class="goods_txt">
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_51' or (returnDtl.chgGb == 'G680_30' and returnDtl.chgStat == 'G685_32')}" th:text="|${#numbers.formatInteger(returnDtl.addPayCost, 1, 'COMMA')}원 결제 후 반품 가능합니다.|"></p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_50'}">반품 신청이 접수 되었습니다.<br> 신속하게 처리하여 드리겠습니다.</p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_30'}">고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_31' and returnDtl.chgGb == 'G680_30'}">고객님이 반품하신 상품을 검수 중에 있습니다.</p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_33'}">환불을 진행하고 있습니다다.(영업일 최대 3일 내 환불 예정)</p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_60'}">반품이 완료되었습니다.</p>
							<p class="cf_txt cf_desc" th:if="${returnDtl.chgStat == 'G685_69'}">요청하신 반품을 취소하였습니다.</p>
						</div>
					</div>
				</th:block>
			</div>
		</div>
		
		<div class="inner">
			<div class="tbl_wrap">
				<div class="tbl_tit"> 
					<h3>상세 정보</h3>
				</div>
				<div class="tbl type1">
					<table>
						<colgroup>
							<col width="107">
							<col width="*">
						</colgroup>   
						<tr>
							<th>반품 접수 일자</th>
							<td><div><span th:text="${oneData.chgDt}"></span></div></td>
						</tr>
						<tr>
							<th>반품 완료 일자</th>
							<td><div><span th:text="${oneData.completeDt}"></span></div></td>
						</tr>
					</table>
				</div>
			</div>
		</div>
		<th:block th:if="${oneData.wdGb == 'W'}">
			<div class="inner">
				<div class="tbl_wrap">
					<div class="tbl_tit"> 
						<h3>반품 회수지 주소</h3>
						<th:block th:if="${oneData.chgStat == 'G685_50' or oneData.chgStat == 'G685_51'}">
							<button type="button" id="btn_adrsChange_pop" class="btn_popup" onclick="fnChangeDeliveryAddr();">
								<span>회수지 변경</span>
							</button>
						</th:block>
					</div>
					<div class="tbl">
						<div class="ship_info">
							<dl>
								<div class="name">
									<dt><span class="sr-only">배송지명</span></dt>
									<dd id="chgerNm" th:text="${oneData.chgerNm}"></dd>
								</div>
								<div class="addr">
									<dt><span class="sr-only">배송주소</span></dt>
									<dd id="chgerAddr" th:text="|${oneData.chgerBaseAddr} ${oneData.chgerDtlAddr}|"></dd>
								</div>
								<div class="phone">
									<dt><span class="sr-only">휴대폰 번호</span></dt>
									<dd id="chgerPhnno" th:text="${oneData.chgerPhnno}"></dd>
								</div>
							</dl>
						</div>
					</div>
				</div>
			</div>
		</th:block>
		<th:block th:if="${not #strings.isEmpty(oneData.wdInvoiceNo) and not #strings.isEmpty(oneData.shipCompNm)}">
			<div class="inner">
				<div class="tbl_wrap">
					<div class="tbl_tit"> 
						<h3>회수 정보</h3>
						<button type="button" class="btn_popup" onclick="fnGoToWithdrawDelivery()"><span>회수 조회</span></button>
					</div>
					<div class="tbl tbl_row">
						<dl>
							<dt class="sr-only">택배회사/송장번호</dt>
							<dd><span th:text="|${oneData.shipCompNm} / ${oneData.wdInvoiceNo}|"></span> / <span th:text="${oneData.wdInvoiceNo}"></span></dd>
						</dl>
					</div>
				</div>
			</div>
		</th:block>
		<div class="inner">
			<div class="tbl_wrap pay_wrap">
				<div class="tbl_tit"> 
					<h3>환불 정보</h3>
					<strong class="pay"><span th:text="${#numbers.formatInteger(oneData.refundAmt + oneData.rfPntAmt + oneData.rfGfcdUseAmt, 1, 'COMMA')}"></span>원</strong>
				</div>
				<div class="tbl type1">
					<table>
						<colgroup>
							<col width="227">
							<col width="*">
						</colgroup>   
						<tr>
							<td>
								<dl class="refund_deduct">
									<div>
										<dt>상품 취소 금액</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger((oneData.rfCnclAmt + oneData.rfCpn1Amt), 1, 'COMMA')}"></span>원
											</div>
										</dd>
									</div>
									<div>
										<dt>배송비</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger((oneData.rfDeliveryFee + oneData.rfDelvCpnAmt), 1, 'COMMA')}"></span>원
											</div>
										</dd>
									</div>
									<div>
										<dt>할인 금액 차감</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger(-(oneData.rfCpn1Amt + oneData.rfTmtb1Amt + oneData.rfTmtb2Amt + oneData.rfGoodsCpnAmt + oneData.rfCartCpnAmt + oneData.rfDelvCpnAmt + oneData.rfPrePntAmt), 1, 'COMMA')}"></span>원
											</div>
										</dd>
									</div>
								</dl>
								<dl class="refund_detail">
									<div>
										<dt>환불 수단</dt>
										<dd>
											<div>
												<span th:if="${oneData.pgGb == 'KCP'}" th:text="${oneData.payMeansNm}"></span>
												<span th:if="${oneData.pgGb == 'NAVER'}">네이버페이</span>
												<span th:if="${oneData.pgGb == 'KAKAO'}">카카오페이</span>
												<span th:if="${oneData.pgGb == 'PAYCO'}">PAYCO</span>
											</div>
										</dd>
									</div>
									<div>
										<dt>결제금액 환불</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger(oneData.refundAmt, 1, 'COMMA')}"></span>원
											</div>
										</dd>
									</div>
									<div>
										<dt>포인트 환불</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger(oneData.rfPntAmt, 1, 'COMMA')}"></span>P
											</div>
										</dd>
									</div>
									<div>
										<dt>상품권 환불</dt>
										<dd>
											<div>
												<span th:text="${#numbers.formatInteger(oneData.rfGfcdUseAmt, 1, 'COMMA')}"></span>원
											</div>
										</dd>
									</div>
								</dl>
							</td>
						</tr>
					</table>
					<th:block th:if="${refundYn == 'Y' and oneData.pgGb == 'KCP' and oneData.payMeans == 'G014_30'}">
						<button type="button" id="btn_chit_cancle" class="btn btn_default" onclick="fnReceipt('cancel')">
							<span>취소 전표 보기</span>
						</button>
					</th:block>
				</div>
			</div>
			<p class="desc_txt">카드사로 결제 취소 요청이 전달된 후 환불까지는 평일 기준 3 ~7일이<br>소요될 수 있습니다.</p>
			<div class="btn_group btn_group_flex">
				<div><button class="btn btn_dark" onclick="cfnGoToPage(_PAGE_NOMEMBER_CRE_LIST);"><span>확인</span></button></div>
			</div>
		</div>
	</section>
</main>
<script th:inline="javascript">
/*<![CDATA[*/
let oneData = [[${oneData}]];
var isLogin = [[${isLogin}]];
var jsonObj = {};
let kcpReceiptUrl = [[${kcpReceiptUrl}]];
let refundYn = [[${refundYn}]];

$(document).ready(function() {
	// 타이틀명
	$('#htopTitle').text('반품상세');
});

// 회수지 정보 설정
var delvAddrSet = function(delvObj) {
	let ordChgSq 		= oneData.ordChgSq;
	let ordNo			= oneData.ordNo;
	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>
