<!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  : MypageCreCancelDetailFormWeb.html
 * @desc    : 마이페이지 > 취소/반품/교환내역 > 취소상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.12   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 th:unless="${oneData.giftPackYn == 'Y'}">주문일 <span th:text="${oneData.ordDt}"></span></p>
							<p th:if="${oneData.giftPackYn == 'Y'}">선물일 <span th:text="${oneData.ordDt}"></span></p>
						</div>
						<div class="goods_cont">
							<!-- 주문상품 -->
							<th:block th:if="${cancelDetailList.cancelDetailList}" th:each="cancelDtl, status : ${cancelDetailList.cancelDetailList}" 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=${cancelDtl.goodsCd}, optCd1=${cancelDtl.goodsType == 'G056_N' ? cancelDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
													<span class="thumb">
														<img th:src="${imageUrl + '/' + cancelDtl.sysImgNm + '?RS=100'}" width="100%" alt="">
													</span>
													<p>
														<span class="brand" th:text="${cancelDtl.brandNm}"></span>
														<span class="tag primary" th:if="${cancelDtl.shotDelvYn == 'Y'}">총알배송</span>
														<span class="tag" th:if="${cancelDtl.shotDelvYn == 'N' and cancelDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</span>
														<span class="tag" th:if="${cancelDtl.selfGoodsYn == 'N'}">업체직배송</span>
													</p>
													<p>
														<span class="name" th:text="${cancelDtl.goodsNm}"></span>
													</p>
												</a>
											</div>
											<div class="gd_opt">
												<div class="option_wrap">
													<span class="title sr-only">주문 옵션</span>
													<span class="option" th:if="${cancelDtl.goodsType == 'G056_S'}" th:each="option, status : ${cancelDtl.colorNmArr}" th:text="|${cancelDtl.itemNmArr[status.index]} / ${option} / ${cancelDtl.optCd2Arr[status.index]}|"></span>
													<span class="option" th:unless="${cancelDtl.goodsType == 'G056_S'}" th:text="|${cancelDtl.colorNm} / ${cancelDtl.optCd2}|"></span>
												</div>
											</div>
											<div class="gd_calc">
												<p>
													<span class="count"><em th:text="${cancelDtl.chgQty}"></em>개</span>
												</p>
											</div>
										</div>
										<div class="status_box">
											<p>
												<th:block th:if="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}">
													<th:block th:if="${cancelDtl.giftPackYn == 'Y' and cancelDtl.giftAddrInpYn == 'N' && cancelDtl.giftCancelDay >= 3}" th:text="|선물취소|"></th:block>
													<th:block th:if="${cancelDtl.giftPackYn != 'Y' and cancelDtl.chgReason == 'G686_30'}" th:text="|품절취소|"></th:block>
													<th:block th:if="${cancelDtl.giftPackYn != 'Y' and cancelDtl.chgReason != 'G686_30'}" th:text="|주문취소|"></th:block>
												</th:block>
												<th:block th:unless="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}" th:text="${cancelDtl.chgStatNm}"></th:block>
												<span class="date" th:text="${cancelDtl.chgDate}"></span>
												<span class="time" th:text="${cancelDtl.chgTime}"></span>
											</p>
										</div>
										<div class="button_box">
											<p><button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);"><span>1:1 문의</span></button></p>
										</div>
									</div>

									<!-- 선물취소 -->
									<div class="order_text" th:if="${cancelDtl.giftPackYn == 'Y' && cancelDtl.giftAddrInpYn == 'N' && cancelDtl.giftCancelDay >= 3 && cancelDtl.chgStat == 'G685_18'}"><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>
					<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 + oneData.rfDelvGfcdUseAmt, 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 + oneData.rfDelvGfcdUseAmt), 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, 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 + oneData.rfDelvGfcdUseAmt, 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>
												<dd th:if="${oneData.pgGb == 'ISTYLE'}">상품권</dd>
											</div>
											<div th:if="${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_MYPAGE_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}]];
	let kcpReceiptUrl = [[${kcpReceiptUrl}]];
	let refundYn = [[${refundYn}]];
	var isLogin = [[${isLogin}]];

	$(document).ready(function() {
		// 마이페이지 LNB 설정
		fnSetMypageLnbList(2);
		
		// 마이페이지 location 설정
		fnSetMypageLocation('취소/반품/교환 내역', '_PAGE_MYPAGE_CRE_LIST', '취소 상세');
	});
/*]]>*/
</script>

</th:block>

</body>
</html>
