<!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  : MypageCustSecedeFormMob.html
 * @desc    : 마이페이지 > 탈퇴화면
 *
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.05.04   jsshin      최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<style>
.hide{display:none}
</style>
<main class="container my">
	<section class="content myMbLeave">
		<div class="inner">
			<div id="leaveIncomplete" class="message hide">
				<p class="msg_tit t_err">
					고객님께서는 진행중인 주문/취소/반품/교환건이<br>
					<span id="totalCnt"></span>건 이상 확인이 되어 탈퇴오청이 불가능 합니다.
				</p>
				<div class="content">
					<p>
						진행중인 건이 종료된 후 다시 시도해 주세요.
					</p>
				</div>
			</div>
			<div class="tbl type5">
				<table>
					<colgroup>
						<col width="25%">
						<col width="25%">
					</colgroup>
					<thead>
						<tr>
							<th scope="col">진행중<p>(주문/취소/반품/교환)</p></th>
							<th scope="col">포인트<p>(보유/적립예정)</p></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<span class="hold_order">
									<em id="ordCnt">0</em>&nbsp;/&nbsp;
									<em id="cnclCnt">0</em>&nbsp;/&nbsp;
									<em id="rtnCnt">0</em>&nbsp;/&nbsp;
									<em id="exCnt">0</em>
								</span>
							</td>
							<td>
								<span class="hold_point">
									<em id="pntAmt" th:text="|${#numbers.formatDecimal(pointInfo.rmPntAmt, 0, 'COMMA', 0, 'POINT')}P|">0P</em>&nbsp;/&nbsp;
									<em id="expAmt" th:text="|${#numbers.formatDecimal(pointInfo.expectedPntAmt, 0, 'COMMA', 0, 'POINT')}P|">0P</em>
								</span>
							</td>
						</tr>
					</tbody>
				</table>
				<table>
					<colgroup>
						<col width="25%">
						<col width="25%">
					</colgroup>
					<thead>
						<tr>
							<th scope="col">상품권 잔여금액</th>
							<th scope="col">쿠폰</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<span class="hold_voucher">
									<em id="giftAmt" th:text="|${#numbers.formatDecimal(rmGfcdAmt, 0, 'COMMA', 0, 'POINT')}원|">0원</em>
								</span>
							</td>
							<td>
								<span class="hold_coupon">
									<em id="cpnCnt" th:text="|${#numbers.formatDecimal(couponCnt, 0, 'COMMA', 0, 'POINT')}장|">0장</em>
								</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

		</div>
		<div class="inner">
			<form id="secedeCustForm" action="/mypage/customer/secede/complete/form" method="post">
			<div class="titWrap">
				<div class="">보안을 위해 회원님의<br>아이디 및 비밀번호를 다시 확인 합니다.</div>
			</div>
			<div class="tblWrap">
				<div class="tbl">
					<table>
						<colgroup>
							<col width="*">
						</colgroup>
						<tbody>
							<tr>
								<td>
									<div class="form_field">
										<input type="text" id="custId" name="custId" class="form_control" readonly="readonly"/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="form_field">
										<input type="password" id="passwd" name="passwd" class="form_control" placeholder="비밀번호를 입력해주세요." minlength="8" maxlength="20"/>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			</form>
		</div>
		<div class="inner">
			<div class="announce_txt">
				<div class="announce_list">
					<ul>
						<li>탈퇴 시 소유하고 있는 포인트, 쿠폰 등은 모두 소멸됩니다.</li>
						<li>거래 정보가 있는 경우 전자상거래 등에서의소비자 보호에 관한 법률에 따라 계약 또는 청약철회에 과난 기록, 대금 결제 및 재화 등의 공급에 대한 기록은 5년 동안 보존됩니다.</li>
						<li>보유하셨던 상품권 금액은 탈퇴와 함께 삭제되며 환불되지 않습니다.<br>회원탈퇴 후 STYLE24에 입력하신 상품문의 및 후기, 댓글은 삭제되지 않으면, 회원정보 삭제로 인해 작성자 본인을 확인할 수 없어 편집 및 삭제 처리가 원천적으로 불가능합니다. 상품문의 및 후기, 댓글 삭제를 원하시는 경우에는 먼저 해당 게시물을 삭제하신 후 탈퇴를 신청하시기 바랍니다.</li>
						<li>진행 중인 주문/취소/반품/교환 건이 있을 경우 탈퇴가 되지 않습니다.</li>
					</ul>
				</div>
			</div>
			<div id="checkSecedeDiv" class="check_box">
				<div class="form_field">
					<div>
						<input type="checkbox" name="checkSecede" id="checkSecede" value="Y">
						<label for="checkSecede">
							<span>STYLE24 회원탈퇴 시 처리사항 안내를 확인하였음에 동의합니다.</span>
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="inner">
			<div class="goods_btn_wrap btn_group_flex">
				<div>
					<button type="button" id="btnSaveSecede" class="btn btn_dark">
						<span>회원탈퇴</span>
					</button>
					<button type="button" id="btnConfirm" class="btn btn_dark hide" onclick="cfnGoToPage(_PAGE_MAIN);">
						<span>확인</span>
					</button>
				</div>
			</div>
		</div>
	</section>
</main>
<script th:inline="javascript">
	/*<![CDATA[*/
	const orderStatInfo = [[${orderStatInfo}]];
	const snsType = [[${snsType}]];
	const custId = [[${custId}]];


	var fnOrderStatInit = function () {
		let $leaveIncomplete = $('#leaveIncomplete');
		let $btnSaveSecede = $('#btnSaveSecede');
		let $btnConfirm = $('#btnConfirm');
		let $secedeCustForm = $('#secedeCustForm');
		let $subH3 = $('.subH3');
		let $checkSecedeDiv = $('#checkSecedeDiv');

		let isPossible = true;

		// 진행중인 주문건
		let orderTotal = orderStatInfo.depositWaitingCount + orderStatInfo.waitingAddPaymentCount
			+ orderStatInfo.paymentCompleteCount + orderStatInfo.goodsPrepareCount
			+ orderStatInfo.shipPrepareCount + orderStatInfo.shippingCount;
		let total = orderTotal + orderStatInfo.cancelCount + orderStatInfo.returnCount + orderStatInfo.exchangeCount;

		$('#ordCnt').text(orderTotal.addComma());
		// 진행중인 취소건
		$('#cnclCnt').text(orderStatInfo.cancelCount.addComma());
		// 진행중인 반품건
		$('#rtnCnt').text(orderStatInfo.returnCount.addComma());
		// 진행중인 교환건
		$('#exCnt').text(orderStatInfo.exchangeCount.addComma());
		// 토탈 건수
		$('#totalCnt').text(total);

		let custIdText = custId;
		if (snsType === 'NV') {
			custIdText = '네이버 간편가입회원'
		}
		if (snsType === 'KK') {
			custIdText = '카카오 간편가입회원'
		}
		if (snsType === 'YS') {
			custIdText = 'YES24 간편가입회원'
		}
		$('#secedeCustForm input[name=custId]').val(custIdText);

		if (orderTotal > 0) {
			$('#ordCnt').addClass('t_req');
			isPossible = false
		}

		if (orderStatInfo.cancelCount > 0) {
			$('#cnclCnt').addClass('t_req');
			isPossible = false
		}

		if (orderStatInfo.returnCount > 0) {
			$('#rtnCnt').addClass('t_req');
			isPossible = false
		}

		if (orderStatInfo.exchangeCount > 0) {
			$('#exCnt').addClass('t_req');
			isPossible = false
		}

		if (isPossible) {
			$subH3.show();
			$secedeCustForm.show();
			$btnConfirm.hide();
			$leaveIncomplete.hide();
			$btnSaveSecede.show();
			$checkSecedeDiv.show();
		} else {
			$subH3.hide();
			$secedeCustForm.hide();
			$btnSaveSecede.hide();
			$leaveIncomplete.show();
			$btnConfirm.show();
			$checkSecedeDiv.hide();
		}


	}

	$('#btnSaveSecede').on('click', function () {
		let secedeCustInfo = $('#secedeCustForm').serializeObject();
		let $checkSecede = $('#checkSecede');

		if (gagajf.isNull(secedeCustInfo.passwd)) {
			mcxDialog.alertC('비밀번호를 입력해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#secedeCustForm input[name=passwd]').focus();
				}
			});
			return;
		}

		if (!$checkSecede.is(':checked')) {
			mcxDialog.alertC('회원탈퇴 처리사항 안내에 동의해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
				}
			});
			return;
		}
		let params = {};
		params.passwd = secedeCustInfo.passwd;
		let jsonData = JSON.stringify(params);
		gagajf.ajaxJsonSubmit('/mypage/customer/password/confirm', jsonData, fnConfirmPassword)
	});

	var fnConfirmPassword = function (result) {
		if (result.isMatch) {
			$("#secedeCustForm").submit();
		} else {
			mcxDialog.alertC('비밀번호를 다시 확인해주세요.',{
				sureBtnText: "확인",
				sureBtnClick: function() {
					$('#secedeCustForm input[name=passwd]').focus();
				}
			});
			return;
		}
	}



	$(document).ready( function() {
		fnOrderStatInit();
		$('#htopTitle').text('회원탈퇴');
	});
	/*]]>*/
</script>
</th:block>
</body>
</html>