<!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  : NoMemberCreExchangeDetailFormMob.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_exchange">
		<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.wdBfSendYn == 'N' and (oneData.chgStat == 'G685_20' or oneData.chgStat == 'G685_21')}">
						<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="${exchangeDetailList.exchangeDetailList}" th:each="exchangeDtl, status : ${exchangeDetailList.exchangeDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
					<div class="goods_section">
						<div class="goods_status">
							<p class="dlvr_staus" th:if="${exchangeDtl.chgStat == 'G685_40' && (exchangeDtl.ordDtlStat == 'G013_20' or exchangeDtl.ordDtlStat == 'G013_30' or exchangeDtl.ordDtlStat == 'G013_35' or exchangeDtl.ordDtlStat == 'G013_40' or exchangeDtl.ordDtlStat == 'G013_50')}" th:text="|교환진행중|"></p>
							<p class="dlvr_staus" th:if="${exchangeDtl.chgStat == 'G685_40' && (exchangeDtl.ordDtlStat == 'G013_60' or exchangeDtl.ordDtlStat == 'G013_70')}" th:text="|교환완료|"></p>
							<p class="dlvr_staus" th:if="${exchangeDtl.chgStat == 'G685_49'}" th:text="|접수취소|"></p>
							<p class="dlvr_staus" th:unless="${exchangeDtl.chgStat == 'G685_40' or exchangeDtl.chgStat == 'G685_49'}" th:text="${exchangeDtl.chgStatNm}"></p>
							
							<p class="dlvr_desc" th:text="|${exchangeDtl.chgDate} ${exchangeDtl.chgTime}|"></p>
						</div>
						<div class="goods_detail">
							<a href="javascript:void(0)" th:attr="goodsCd=${exchangeDtl.goodsCd}, optCd1=${exchangeDtl.goodsType == 'G056_N' ? exchangeDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
								<div class="thumb_box">
									<img th:src="${imageUrl + '/' + exchangeDtl.sysImgNm + '?RS=90'}" width="100%" alt="">
								</div>
								<div class="info_box">
									<div class="od_name">
										<div class="brand">
											<span th:text="${exchangeDtl.brandNm}"></span>
											<div class="badge_wrap">
												<em class="order_badge order_bullet_badge"	th:if="${exchangeDtl.shotDelvYn == 'Y'}">총알배송</em>
												<em class="order_badge"				 		th:if="${exchangeDtl.shotDelvYn == 'N' and exchangeDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</em>
												<em class="order_badge"						th:if="${exchangeDtl.selfGoodsYn == 'N'}">업체직배송</em>
											</div>
										</div>
										<div class="name" th:text="${exchangeDtl.goodsNm}"></div>
									</div>
									<div class="od_opt">
										<!-- 세트상품일때 -->
										<th:block th:if="${exchangeDtl.goodsType} == 'G056_S'">
											<th:block th:each="option , index2 : ${exchangeDtl.colorNmArr}">
												<div class="option">
													<em th:text="${exchangeDtl.itemNmArr[index2.index]}"></em>
													<em th:text="${option}"></em>
													<em th:text="${exchangeDtl.optCd2Arr[index2.index]}"></em>
												</div>
											</th:block>
										</th:block>
										<!-- //세트상품일때 -->
										<!-- 단품상품일때 -->
										<th:block th:unless="${exchangeDtl.goodsType} == 'G056_S'">
											<div class="option">
												<em th:text="${exchangeDtl.colorNm}"></em>
												<em th:text="${exchangeDtl.optCd2}"></em>
											</div>
										</th:block>
										<!-- //단품상품일때 -->
									</div>
									<div class="od_exchange_opt">
										<span>교환옵션</span>
										<div class="option">
											<!-- 세트상품일때 -->
											<th:block th:if="${exchangeDtl.goodsType} == 'G056_S'">
												<th:block th:each="option , index2 : ${exchangeDtl.chgColorNmArr}">
													<div class="option">
														<em th:text="${exchangeDtl.chgItemNmArr[index2.index]}"></em>
														<em th:text="${option}"></em>
														<em th:text="${exchangeDtl.chgOptCd2Arr[index2.index]}"></em>
													</div>
												</th:block>
											</th:block>
											<!-- //세트상품일때 -->
											<!-- 단품상품일때 -->
											<th:block th:unless="${exchangeDtl.goodsType} == 'G056_S'">
												<div class="option">
													<em th:text="${exchangeDtl.chgColorNm}"></em>
													<em th:text="${exchangeDtl.chgOptCd2}"></em>
												</div>
											</th:block>
											<!-- //단품상품일때 -->
										</div>
									</div>
									<div class="od_calc">
										<p class="price">
											<span class="count"><em th:text="${exchangeDtl.chgQty}"></em>개</span>
										</p>
									</div>
								</div>
							</a>
						</div>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_32' or exchangeDtl.chgStat == 'G685_21'}">
							<div class="goods_btn_wrap btn_group_flex">
								<div>
									<button type="button" class="btn btn_default" th:attr="ordNo=${exchangeDtl.ordNo}, ordChgSq=${exchangeDtl.ordChgSq}" onclick="fnCrePayAddCost(this);">
										<span>결제하기</span>
									</button>
								</div>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_40' && exchangeDtl.ordDtlStat == 'G013_50'}">
							<div class="goods_btn_wrap btn_group_flex">
								<div>
									<button type="button" class="btn btn_default" th:attr="ordNo=${exchangeDtl.ordNo}, ordDtlNo=${exchangeDtl.chgOrdDtlNo}, shipCompCd=${exchangeDtl.exchangeShipCompCd}, invoiceNo=${exchangeDtl.exchangeInvoiceNo}" onclick="fnGoToDelivery(this);">
										<span>배송조회</span>
									</button>
								</div>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_21' or (exchangeDtl.chgGb == 'G680_40' and exchangeDtl.chgStat == 'G685_32')}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc" th:text="|${#numbers.formatInteger(exchangeDtl.addPayCost, 1, 'COMMA')}원 결제 후 교환 가능합니다.|"></p>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_20'}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc">교환 신청이 접수 되었습니다.<br> 신속하게 처리하여 드리겠습니다.</p>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_30'}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc">고객님이 요청하신 회수지로 상품을 회수 중에 있습니다.</p>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_31' and exchangeDtl.chgGb == 'G680_40'}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc">고객님이 교환하신 상품을 검수 중에 있습니다.</p>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_40' and (exchangeDtl.chgOrdDtlStat == 'G013_60' or exchangeDtl.chgOrdDtlStat == 'G013_70')}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc">교환이 완료되었습니다.</p>
							</div>
						</th:block>
						<th:block th:if="${exchangeDtl.chgStat == 'G685_49'}">
							<div class="goods_txt">
								<p class="cf_txt cf_desc">요청하신 교환을 취소하였습니다.</p>
							</div>
						</th:block>
					</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>
		<div class="inner">
			<div class="tbl_wrap">
				<div class="tbl_tit"> 
					<h3>교환 상품 배송지</h3>
					<th:block th:if="${oneData.chgOrdDtlStat == 'G013_20' or oneData.chgOrdDtlStat == 'G013_25'}">
						<button type="button" class="btn_popup" onclick="fnChangeAddr('recip');">
							<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="recipNm" th:text="${oneData.recipNm}"></dd>
							</div>
							<div class="addr">
								<dt><span class="sr-only">배송주소</span></dt>
								<dd id="recipAddr" th:text="|${oneData.recipBaseAddr} ${oneData.recipDtlAddr}|"></dd>
							</div>
							<div class="phone">
								<dt><span class="sr-only">휴대폰 번호</span></dt>
								<dd id="recipPhnno" th:text="${oneData.recipPhnno}"></dd>
							</div>
							<div class="ship_request">
								<dt>배송요청 사항</dt>
								<dd id="delvMemo" th:text="${oneData.delvMemo}"></dd>
							</div>
						</dl>
					</div>
				</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_20' or oneData.chgStat == 'G685_21'}">
							<button type="button" class="btn_popup"  onclick="fnChangeAddr('chger');">
								<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" th:attr="wdInvoiceNo=${oneData.wdInvoiceNo}, shipCompCd=${oneData.shipCompCd}" onclick="fnGoToWithdrawDelivery(this)"><span>회수 조회</span></button>
					</div>
					<div class="tbl tbl_row">
						<dl>
							<dt class="sr-only">택배회사/송장번호</dt>
							<dd><span th:text="|${oneData.shipCompNm}|"></span> / <span th:text="${oneData.wdInvoiceNo}"></span></dd>
						</dl>
					</div>
				</div>
			</div>
		</th:block>
		<th:block th:if="${oneData.addPayCost > 0 and not #strings.isEmpty(oneData.pgTid)}">
			<div class="inner">
				<!-- 210409_수정 : 환불 정보 -> 결제 정보 영역으로 수정. -->
				<div class="tbl_wrap pay_wrap">
					<div class="tbl_tit">
						<h3>결제 정보</h3>
						<strong class="pay"><span th:text="${#numbers.formatInteger(oneData.addPayCost, 1, 'COMMA')}"></span>원</strong>
					</div>
					<div class="tbl type1">
						<table>
							<colgroup>
								<col width="227">
								<col width="*">
							</colgroup>
							<tbody>
								<tr>
									<td>
										<dl>
											<!-- 210415_ 변경 : 결제정보 테이블 내용 변경 -->
											<div>
												<dt>배송비</dt>
												<dd>
													<div>
														<span th:text="${#numbers.formatInteger(oneData.addPayCost, 1, 'COMMA')}"></span>원
													</div>
												</dd>
											</div>
	<!--										<div>-->
	<!--											<dt>제휴 할인</dt>-->
	<!--											<dd>-->
	<!--												<div>-->
	<!--													<span>-123,456,789</span>원-->
	<!--												</div>-->
	<!--											</dd>-->
	<!--										</div>-->
											<div>
												<dt>결제수단</dt>
												<dd>
													<div>
														<span th:if="${oneData.payMeans == 'G014_30'}" th:text="|${oneData.payMeansNm}(${oneData.cardNm}) / ${oneData.cardMips}|"></span>
														<span th:if="${oneData.payMeans == 'G014_60'}" th:text="${oneData.payMeansNm}"></span>
													</div>
												</dd>
											</div>
										</dl>
									</td>
								</tr>
							</tbody>
						</table>
						<th:block th:if="${oneData.payMeans == 'G014_30'}">
							<button type="button" class="btn btn_default" onclick="fnReceipt('card')"><span>신용카드 전표</span></button>
						</th:block>
					</div>
				<!-- 210415_ 추가 : 결제정보 안내 텍스트 추가/ [ .desc_txt ] 제거 -->
				<p class="txt_ref">NPAY등의 대체결제수단으로 결제 시 해당 결제 플랫폼에서 영수증 확인이 가능합니다.</p>
				</div>
			</div>
		</th:block>
		<div class="inner">
			<div class="btn_group"><button class="btn btn_dark" onclick="cfnGoToPage(_PAGE_NOMEMBER_CRE_LIST);"><span>확인</span></button></div>
		</div>
	</section>
</main>
<script src="/ux/plugins/gaga/gaga.paging.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	let oneData = [[${oneData}]];
	var isLogin = [[${isLogin}]];
	let jsonObj = {};
	let kcpReceiptUrl = [[${kcpReceiptUrl}]];
	let addrGb = '';
	let memoGb = '';

	// 추가배송비 전표 데이터 설정
	let paymentInfo = {};
	paymentInfo.pgTid = oneData.pgTid;
	paymentInfo.ordChgSq = oneData.ordChgSq;

	let orderAmtInfo = {};
	orderAmtInfo.realOrdAmt = oneData.addPayCost;
	orderAmtInfo.realDelvAmt = 0;

	$(document).ready(function() {
		// 타이틀명
		$('#htopTitle').text('교환상세');
	});
	
	// 배송메모 및 반품메모 변경 처리
	var fnChangeMemo = function(param) {
		memoGb = param;
		fnChangeDeliveryMemo();
	}
	
	// 배송지 및 교환지 변경 처리
	var fnChangeAddr = function(param) {
		addrGb = param;
		fnChangeDeliveryAddr();
	}
	
	// 배송지 및 회수지 정보 설정
	var delvAddrSet = function(delvObj) {
		let url = '';
		let ordNo			= oneData.ordNo;
		let ordChgSq 		= oneData.ordChgSq;
		let delvAddrSq 		= oneData.delvAddrSq;
		let recipNm 		= delvObj.recipNm;
		let recipPhnno 		= delvObj.recipPhnno;
		let recipZipcode 	= delvObj.recipZipcode;
		let recipBaseAddr 	= delvObj.recipBaseAddr;
		let recipDtlAddr 	= delvObj.recipDtlAddr;
		let delvMemo 		= delvObj.delvMemo;
		let recipAddr 		= recipBaseAddr + ' ' + recipDtlAddr;

		let data = {};

		if (addrGb == 'chger') {
			url = '/noMember/change/chger/addr';
			data.ordNo			= ordNo;
			data.ordChgSq 		= ordChgSq;
			data.chgerNm 		= recipNm;
			data.chgerPhnno 	= recipPhnno;
			data.chgerZipcode 	= recipZipcode;
			data.chgerBaseAddr 	= recipBaseAddr;
			data.chgerDtlAddr 	= recipDtlAddr;
			data.chgerRtnMemo 	= delvMemo;
		} else {
			url = '/noMember/change/delvery/addr';
			data.ordNo			= ordNo;
			data.delvAddrSq 	= delvAddrSq;
			data.recipNm 		= recipNm;
			data.recipPhnno 	= recipPhnno;
			data.recipZipcode 	= recipZipcode;
			data.recipBaseAddr 	= recipBaseAddr;
			data.recipDtlAddr 	= recipDtlAddr;
			data.delvMemo 		= delvMemo;
		}

		let jsonData = JSON.stringify(data);

		gagajf.ajaxJsonSubmit(url, jsonData, function (result) {
			if (result.status == '200') {
				if (addrGb == 'chger') {
					$('#chgerNm').text(recipNm);
					$('#chgerPhnno').text(recipPhnno);
					$('#chgerAddr').text(recipAddr);
					$('#chgerRtnMemo').text(delvMemo);
				} else {
					$('#recipNm').text(recipNm);
					$('#recipPhnno').text(recipPhnno);
					$('#recipAddr').text(recipAddr);
					$('#delvMemo').text(delvMemo);
				}
			}
		});
	}
/*]]>*/
</script>

</th:block>

</body>
</html>
