<!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/MypageLayoutMob">
<!--
 *******************************************************************************
 * @source  : MypageCreCancelDetailFormWeb.html
 * @desc    : 마이페이지 > 취소/반품/교환내역 > 취소상세 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.27   jsh77b     최초 작성
 *******************************************************************************
 -->
<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">
					<th:block th:if="${oneData.giftPackYn == 'Y'}">
						<div class="goods_date">선물일<span class="date" th:text="${oneData.ordDt}"></span></div>
					</th:block>
					<th:block th:unless="${oneData.giftPackYn == 'Y'}">
						<div class="goods_date">주문일<span class="date" th:text="${oneData.ordDt}"></span></div>
					</th:block>
				</div>
				
				<th:block th:if="${cancelDetailList.cancelDetailList}" th:each="cancelDtl, status : ${cancelDetailList.cancelDetailList}" th:with="imageUrl=${@environment.getProperty('upload.goods.view')}">
					<div class="goods_section">
						<div class="goods_status">
							<!-- 2021.07.01 선물하기 기간완료 처리 -->
							<th:block th:if="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}">
								<p class="dlvr_staus"	th:if="${cancelDtl.giftPackYn == 'Y' and cancelDtl.giftAddrInpYn == 'N' and cancelDtl.giftCancelDay >= 3}">선물취소</p>
								<p class="dlvr_staus"	th:if="${cancelDtl.giftPackYn != 'Y' and cancelDtl.chgReason == 'G686_30'}">품절취소</p>
								<p class="dlvr_staus"	th:if="${cancelDtl.giftPackYn != 'Y' and cancelDtl.chgReason != 'G686_30'}">주문취소</p>
							</th:block>
							<p class="dlvr_staus" 	th:unless="${cancelDtl.chgStat == 'G685_17' or cancelDtl.chgStat == 'G685_18'}" th:text="${cancelDtl.chgStatNm}"></p>
							<p class="dlvr_desc" 	th:text="|${cancelDtl.chgDate} ${cancelDtl.chgTime}|"></p>
						</div>
						<div class="goods_detail">
							<a href="javascript:void(0)" th:attr="goodsCd=${cancelDtl.goodsCd}, optCd1=${cancelDtl.goodsType == 'G056_N' ? cancelDtl.optCd1 : ''}, ithrCd='IN21_02'" onclick="fnGoToGoodsDetail(this)">
								<div class="thumb_box">
									<img th:src="${imageUrl + '/' + cancelDtl.sysImgNm + '?RS=90'}" width="100%" alt="">
								</div>
								<div class="info_box">
									<div class="od_name">
										<div class="brand">
											<span th:text="${cancelDtl.brandNm}"></span>
											<div class="badge_wrap">
												<em class="order_badge order_bullet_badge" 	th:if="${cancelDtl.shotDelvYn == 'Y'}">총알배송</em>
												<em class="order_badge" 					th:if="${cancelDtl.shotDelvYn == 'N' and cancelDtl.selfGoodsYn == 'Y'}">STYLE24 일반배송</em>
												<em class="order_badge" 					th:if="${cancelDtl.selfGoodsYn == 'N'}">업체직배송</em>
											</div>
										</div>
										<div class="name" th:text="${cancelDtl.goodsNm}"></div>
									</div>
									<div class="od_opt">
										<!-- 세트상품일때 -->
										<th:block th:if="${cancelDtl.goodsType} == 'G056_S'">
											<th:block th:each="option , index2 : ${cancelDtl.colorNmArr}">
												<div class="option">
													<em th:text="${cancelDtl.itemNmArr[index2.index]}"></em>
													<em th:text="${option}"></em>
													<em th:text="${cancelDtl.optCd2Arr[index2.index]}"></em>
												</div>
											</th:block>
										</th:block>
										<!-- //세트상품일때 -->
										<!-- 단품상품일때 -->
										<th:block th:unless="${cancelDtl.goodsType} == 'G056_S'">
											<div class="option">
												<em th:text="${cancelDtl.colorNm}"></em>
												<em th:text="${cancelDtl.optCd2}"></em>
											</div>
										</th:block>
										<!-- //단품상품일때 -->
									</div>
									<div class="od_calc">
										<p class="price">
											<span class="count"><em th:text="${cancelDtl.chgQty}"></em>개</span>
										</p>
									</div>
								</div>
							</a>
						</div>
						<div class="goods_btn_wrap btn_group_flex">
							<div>
								<button type="button" class="btn btn_default" onclick="cfnGoToPage(_PAGE_ONETOONE_QNA);">
									<span>1:1 문의</span>
								</button>
							</div>
						</div>
						<th:block th:if="${cancelDtl.giftPackYn == 'Y' and cancelDtl.giftAddrInpYn == 'N' and cancelDtl.giftCancelDay >= 3 and cancelDtl.chgStat == 'G685_18'}">
							<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 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 + oneData.rfDelvGfcdUseAmt), 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>
												<span th:if="${oneData.pgGb == 'ISTYLE'}">상품권</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 + oneData.rfDelvGfcdUseAmt, 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_MYPAGE_CRE_LIST);"><span>확인</span></button></div>
			</div>
		</div>
	</section>
</main>
<script th:inline="javascript">
/*<![CDATA[*/
let oneData = [[${oneData}]];
var isLogin = [[${isLogin}]];
let kcpReceiptUrl = [[${kcpReceiptUrl}]];
let refundYn = [[${refundYn}]];

$(document).ready(function() {
	// 타이틀명
	$('#htopTitle').text('취소상세');
});
/*]]>*/
</script>
</th:block>

</body>
</html>
