<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : CnclCompleteView.html
 * @desc    : 취소완료정보화면
 *============================================================================
 * STYLE24
 * Copyright(C) 2019 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.06.30   jsh77b       최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="1400" data-height="600">
	<div class="panelStyle">
		<div class="panelTitle">
			<th:block th:if="${chgStat} == 'G720_30'">
				<h2>취소완료</h2>
				<button type="button" class="close" onclick="fnPopupClose();"><i class="fa fa-times"></i></button>
			</th:block>
			<th:block th:if="${chgStat} == 'G720_50'">
				<h2>반품완료</h2>
				<button type="button" class="close" onclick="fnPopupClose();"><i class="fa fa-times"></i></button>
			</th:block>
		</div>
			
		<div class="panelContent" style="height:90%; overflow-y:auto; padding:0px 20px !important; ">
			<form id="cancelRequestFrm" name="cancelRequestFrm">
				
				<th:block th:if="${chgStat} == 'G720_30'">
					<h4 id="orderInfoTitle">취소완료정보</h4>
				</th:block>
				<th:block th:if="${chgStat} == 'G720_50'">
					<h4 id="orderInfoTitle">반품완료정보</h4>
				</th:block>
			
				<div id="gridCnclRtnCompleteList" style="width:100%; height: 200px;" class="ag-theme-balham"></div>

				<div style="text-align:right; padding-bottom:5px; padding-top:5px;">
					<button type="button" class="btn btn-success" id="cnclCompleteBtn" onclick="fnPopupClose();">확인</button>
				</div>
				
				<table class="frmStyle">
					<colgroup>
						<col style="width:160px;" />
						<col style="width:320px;" />
						<col style="width:160px;" />
						<col />
					</colgroup>
					<tbody>
						<tr>
							<th>변경사유 <i class="star"></i></th>
							<td id="chgReasonNm"></td>
							<th>귀책사유</th>
							<td><span id="imputeReason"></span></td>
						</tr>
						<tr>
							<th>요청메모</th>
							<td colspan="3">
								<textarea id="chgMemo" name="chgMemo" style="height:80px;" placeholder="취소사유를 300자내외로 작성해 주세요"></textarea>
							</td>
						</tr>
					</tbody>
				</table>
				
				<h4>환불예정금액</h4>
				<table class="frmStyle">
					<colgroup>
						<col style="width:20%;"/>
						<col style="width:30%;"/>
						<col style="width:20%;"/>
						<col style="width:30%;"/>
					</colgroup>
					<tbody>
						<tr>
							<th>상품 주문 금액</th>
							<td><span id="spanOrdAmt"></span>원</td>
							<th>상품 취소 금액</th>
							<td><span id="spanCnclRtnAmt"></span>원</td>
						</tr>
						<tr>
							<th>포인트 취소 금액</th>
							<td colspan="3"><span id="spanTotPntDcAmt"></span>원 (고객 포인트 : <span id="spanPntDcAmt"></span>원 + 상품 선포인트 : <span id="spanPrePntDcAmt"></span>원) </td>
						</tr>
						<tr>
							<th>쿠폰 취소 금액</th>
							<td colspan="3"><span id="spanCpnDcAmt"></span>원 (즉시할인쿠폰 : <span id="spanCpn1DcAmt"></span>원 + 상품쿠폰 : <span id="spanGoodsCpnDcAmt"></span>원 + 장바구니쿠폰 : <span id="spanCartCpnDcAmt"></span>원 + 배송비쿠폰 : <span id="spanDelvCpnDcAmt"></span>원)</td>
						</tr>
						<tr>
							<th>다다익선 취소 금액</th>
							<td colspan="3"><span id="spanTmtbDcAmt"></span>원 (수량할인 : <span id="spanTmtb1DcAmt"></span>원 + 금액할인 : <span id="spanTmtb2DcAmt"></span>원)</td>
						</tr>
						<tr>
							<th>상품권 취소 금액</th>
							<td colspan="3"><span id="spanGfcdUseAmt"></span>원</td>
						</tr>
						<tr>
							<th>상품 실결제 취소 금액</th>
							<td><span id="spanRealCnclRtnAmt"></span>원</td>
							<th>환불 배송비 금액</th>
							<td><span id="spanRealDelvAmt"></span>원</td>
						</tr>
						<tr>
							<th>환불 금액</th>
							<td colspan="3"><span id="spanRefundAmt"></span>원</td>
						</tr>
					</tbody>
				</table>
				
				<div id="refundAccount" style="width:100%">
					<h4>환불계좌정보</h4>
					<!-- TABLE -->
					<table class="tableStyle">
						<colgroup>
							<col width="">
							<col width="">
							<col width="">
							<col width="">
							<col width="">
						</colgroup>
						<thead>
							<tr>
								<th>은행명</th>
								<th>은행코드</th>
								<th>계좌번호</th>
								<th>예금주</th>
								<th>기본여부</th>
							</tr>
						</thead>
						<tbody>
							<tr style="height:30px;">
								<td class="bankNm"></td>
								<td class="bankCd"></td>
								<td class="accountNo"></td>
								<td class="accountNm"></td>
								<td class="defaultYn"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<br>
			</form>
		</div>
	</div>
</div>

<!-- data -->
<script th:inline="javascript">
/*<![CDATA[*/
var cnclRtnCompleteList 	= [[${cnclRtnCompleteList}]];				// 취소,반품 완료 정보 목록
var orderInfoList 			= [[${orderInfoList}]];						// 취소,반품 완료 정보 목록
var pgGb 					= orderInfoList[0].pgGb;					// 결제수단
var payMeans 				= orderInfoList[0].payMeans;				// 결제방법
var addPayCost				= cnclRtnCompleteList[0].addPayCost;		// 추가배송비
var realDelvAmt				= cnclRtnCompleteList[0].realDelvAmt;		// 환불배송비
var delvCpnDcAmt			= cnclRtnCompleteList[0].delvCpnDcAmt;		// 배송비쿠폰환불
var chgReason				= cnclRtnCompleteList[0].chgReason;			// 변경사유코드
var chgReasonNm				= cnclRtnCompleteList[0].chgReasonNm;		// 변경사유코드명
var chgMemo					= cnclRtnCompleteList[0].chgMemo;			// 변경사유메모
var raBankNm				= cnclRtnCompleteList[0].raBankNm;			// 환불계좌은행명
var raBank					= cnclRtnCompleteList[0].raBank;			// 환불계좌은행코드
var raNo					= cnclRtnCompleteList[0].raNo;				// 환불계좌번호
var raNm					= cnclRtnCompleteList[0].raNm;				// 환불계좌명
var chgStat 				= [[${chgStat}]];							// 변경요청상태값(정산상택값)

// 1. 취솨,반품완료 정보 목록 조회
var columnCnclRtnCompleteList = [
	{headerName: "주문번호"		, field: "ordNo"			, width: 80		, cellClass: 'text-center'},
	{headerName: "주문상세"		, field: "ordDtlNo"			, width: 80		, cellClass: 'text-center'},
	{headerName: "상품코드"		, field: "goodsCd"			, width: 100	, cellClass: 'text-left'},
	{headerName: "상품명"			, field: "goodsNm"			, width: 200	, cellClass: 'text-left'},
	{headerName: "상품타입"		, field: "goodsTypeNm"		, width: 100	, cellClass: 'text-center'},
	{
		headerName		: "주문"
		, field			: "ordQty"
		, width			: 80
		, cellClass		: 'text-center'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "취소"
		, field			: "cnclRtnQty"
		, width			: 80
		, cellClass		: 'text-center'
		, cellRenderer	: function (params) {
			var cnclRtnReqQty = parseInt(params.data.cnclRtnQty) + parseInt(params.data.ordReqChgQty);
			return cnclRtnReqQty;
		}
	},
	{
		headerName		: "주문"
		, field			: "ordAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "취소"
		, field			: "cnclRtnAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "즉시할인"
		, field			: "cpn1DcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "다다익선1"
		, field			: "tmtb1DcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "다다익선2"
		, field			: "tmtb2DcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "상품쿠폰"		
		, field			: "goodsCpnDcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "장바구니쿠폰"
		, field			: "cartCpnDcAmt"
		, width			: 100		
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "포인트"
		, field			: "pntDcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "선포인트"
		, field			: "prePntDcAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "상품권"
		, field			: "gfcdUseAmt"
		, width			: 80
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	},
	{
		headerName		: "실결제금액"
		, field			: "realOrdAmt"
		, width			: 100		
		, cellClass		: 'text-right'
		, cellRenderer	: function (params) {
			return params.value.addComma();
		}
	}
];
var gridOptionsCnclRtnCompleteList = gagaAgGrid.getGridOptions(columnCnclRtnCompleteList);

// Add on options
gridOptionsCnclRtnCompleteList.suppressRowClickSelection = true;
gridOptionsCnclRtnCompleteList.rowSelection = 'multiple';
</script>

<script>
// 현재 사유는 고객 입니다.
var isCustomer = true;

//  사유
var fnChangeChgReason = function(reasonCd){
	var customerReasonArr = ['G686_10', 'G686_20', 'G688_10'];

	isCustomer = false;
	
	// 귀책사유체크(취소,반품,교환)
	for (i=0 ; i<customerReasonArr.length ; i++) {
		if (customerReasonArr[i] == reasonCd) {
			isCustomer = true;
		}
	}
	
	// 귀책사유설정
	if (isCustomer) {
		$("#imputeReason").text("고객");
	} else {
		$("#imputeReason").text("회사");
	}

	$('#cancelRequestFrm input[name=chgReason]').val(reasonCd);
}

// 팝업닫기 확인버튼
var fnPopupClose = function() {
	if (chgStat == "G720_30") {
		uifnPopupClose('popupCancelRequestForm');
	} else if (chgStat == "G720_50") {
		uifnPopupClose('popupReturnRequestForm');
	}
}

$(document).ready(function() {
	
	// 1. 그리드생성
	gagaAgGrid.createGrid('gridCnclRtnCompleteList'		, gridOptionsCnclRtnCompleteList);			// 주문정보
	
	// 2. 그리드 데이타 싱크작업
	gridOptionsCnclRtnCompleteList.api.setRowData(cnclRtnCompleteList);								// 주문정보
	
	// 2.1 TOTAL ROWS 없애기
	gagaAgGrid.hideStatusBar('gridCnclRtnCompleteList');

	// 3. 무통장입금아닌경우 환불계좌 그리드 숨김처리
	if (payMeans !== 'G014_20') {
		$('#refundAccount').addClass("off");
	} else {
		$("#refundAccount .bankNm").text(raBankNm);
		$("#refundAccount .bankCd").text(raBank);
		$("#refundAccount .accountNo").text(raNo);
		$("#refundAccount .accountNm").text(raNm);
	}
	
	// 4. 변경사유설정
	$("#chgReasonNm").text(chgReasonNm);
	$("#chgMemo").text(chgMemo);
	$("#chgMemo").attr("disabled", "true");
	fnChangeChgReason(chgReason);
	
	// 5. 환불에정금액 
	var spanOrdAmt 			= 0;
	var spanCnclRtnAmt 		= 0;
	var spanTotPntDcAmt		= 0;
	var spanPntDcAmt		= 0;
	var spanPrePntDcAmt		= 0;
	var spanCpnDcAmt		= 0;
	var spanCpn1DcAmt		= 0;
	var spanGoodsCpnDcAmt	= 0;
	var spanCartCpnDcAmt	= 0;
	var spanTmtbDcAmt		= 0;
	var spanTmtb1DcAmt		= 0;
	var spanTmtb2DcAmt		= 0;
	var spanGfcdUseAmt		= 0;
	var spanRealCnclRtnAmt	= 0;
	var spanTotDeliveryFee	= addPayCost;
	var spanRefundAmt		= 0;
	var spanRealDelvAmt		= realDelvAmt;
	
	for (i=0 ; i<cnclRtnCompleteList.length ; i++) {
		spanOrdAmt 				= spanOrdAmt 			+ cnclRtnCompleteList[i].ordAmt;
		spanCnclRtnAmt 			= spanCnclRtnAmt 		+ cnclRtnCompleteList[i].cnclRtnAmt;
		spanPntDcAmt			= spanPntDcAmt			+ cnclRtnCompleteList[i].pntDcAmt;
		spanPrePntDcAmt			= spanPrePntDcAmt		+ cnclRtnCompleteList[i].prePntDcAmt;
		spanCpn1DcAmt 			= spanCpn1DcAmt 		+ cnclRtnCompleteList[i].cpn1DcAmt;
		spanGoodsCpnDcAmt 		= spanGoodsCpnDcAmt 	+ cnclRtnCompleteList[i].goodsCpnDcAmt;
		spanCartCpnDcAmt 		= spanCartCpnDcAmt 		+ cnclRtnCompleteList[i].cartCpnDcAmt;
		spanTmtb1DcAmt 			= spanTmtb1DcAmt 		+ cnclRtnCompleteList[i].tmtb1DcAmt;
		spanTmtb2DcAmt 			= spanTmtb1DcAmt 		+ cnclRtnCompleteList[i].tmtb2DcAmt;
		spanGfcdUseAmt 			= spanGfcdUseAmt 		+ cnclRtnCompleteList[i].gfcdUseAmt;
		spanRealCnclRtnAmt 		= spanRealCnclRtnAmt 	+ cnclRtnCompleteList[i].realOrdAmt;
	}
	
	spanTotPntDcAmt	= spanPntDcAmt + spanPrePntDcAmt;
	spanCpnDcAmt	= spanCpn1DcAmt + spanGoodsCpnDcAmt + spanCartCpnDcAmt + delvCpnDcAmt;
	spanTmtbDcAmt	= spanTmtb1DcAmt + spanTmtb2DcAmt;
	spanRefundAmt	= spanRealCnclRtnAmt + realDelvAmt;
	
	$("#spanOrdAmt").text(spanOrdAmt.addComma());
	$("#spanCnclRtnAmt").text(spanCnclRtnAmt.addComma());
	$("#spanTotPntDcAmt").text(spanTotPntDcAmt.addComma());
	$("#spanPntDcAmt").text(spanPntDcAmt.addComma());
	$("#spanPrePntDcAmt").text(spanPrePntDcAmt.addComma());
	$("#spanPntDcAmt").text(spanPntDcAmt.addComma());
	$("#spanCpn1DcAmt").text(spanCpn1DcAmt.addComma());
	$("#spanGoodsCpnDcAmt").text(spanGoodsCpnDcAmt.addComma());
	$("#spanCartCpnDcAmt").text(spanCartCpnDcAmt.addComma());
	$("#spanDelvCpnDcAmt").text(delvCpnDcAmt.addComma());
	$("#spanCpnDcAmt").text(spanCpnDcAmt.addComma());
	$("#spanTmtb1DcAmt").text(spanTmtb1DcAmt.addComma());
	$("#spanTmtb2DcAmt").text(spanTmtb2DcAmt.addComma());
	$("#spanTmtbDcAmt").text(spanTmtbDcAmt.addComma());
	$("#spanGfcdUseAmt").text(spanGfcdUseAmt.addComma());
	$("#spanRealCnclRtnAmt").text(spanRealCnclRtnAmt.addComma());
	$("#spanRealDelvAmt").text(realDelvAmt.addComma());
	$("#spanTotDeliveryFee").text(addPayCost.addComma());
	$("#spanRefundAmt").text(spanRefundAmt.addComma());
	
	// 2021.05.13 높이자동조절
	var cancelRequestTargetHeight = 50 + (40 * cnclRtnCompleteList.length);
	$("#gridCnclRtnCompleteList").css("height" , cancelRequestTargetHeight+"px");
});
</script>
</html>





