<!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  : MypageCustSecedeFormWeb.html
 * @desc    : 마이페이지 > 회원탈퇴 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.03.15   jsshin      최초 작성
 *******************************************************************************
 -->
<body>
<!--  container -->
<th:block layout:fragment="content">
	<div class="content myMbLeave"> <!-- 페이지특정 클래스 = myMbLeave -->
		<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>
				</div>
				<div class="sec_body">
					<div id="leaveIncomplete" class="highlight_area hide">
						<div class="mb_leave_incomplete">
							<p class="txt_primary">고객님께서는 진행중인 주문/취소/반품/교환건이 <span id="totalCnt"></span>건 이상 확인되어 탈퇴요청이 불가능 합니다.</p>
							<p class="txt_sub">진행중인 건이 종료된 후 다시 시도해 주세요.</p>
						</div>
					</div>
					<div class="tbl type5">
						<table>
							<colgroup>
								<col width="25%">
								<col width="25%">
								<col width="25%">
								<col width="25%">
							</colgroup>
							<thead>
							<tr>
								<th scope="col">진행중(주문/취소/반품/교환)</th>
								<th scope="col">포인트(보유/적립예정)</th>
								<th scope="col">상품권 잔여금액</th>
								<th scope="col">쿠폰</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>
								<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>
					<h4 class="subH3">
						보안을 위해 회원님의 아이디 및 비밀번호를 다시 확인합니다.
					</h4>
					<form id="secedeCustForm" class="form_wrap" action="/mypage/customer/secede/complete/form" method="post">
						<div class="tbl type1">
							<table>
								<colgroup>
									<col width="210">
									<col width="*">
								</colgroup>
								<tr>
									<th>아이디</th>
									<td>
										<div class="form_field">
											<div class="input_wrap">
												<input type="text" id="custId" name="custId" class="form_control" readonly="readonly"/>
											</div>
										</div>
									</td>
								</tr>
								<tr>
									<th>
										비밀번호
									</th>
									<td>
										<div class="form_field">
											<div class="input_wrap">
												<input type="password" id="passwd" name="passwd" class="form_control" placeholder="비밀번호를 입력해주세요." minlength="8" maxlength="20"/>
											</div>
										</div>
									</td>
								</tr>
							</table>
						</div>
						</form>
						<div class="com_info_txt">
							<p class="tit">회원 탈퇴 안내</p>
							<ul>
								<li>탈퇴시 소유하고 있는 포인트, 쿠폰등은 모두 소멸 됩니다.</li>
								<li>거래정보가 있는 경우, 전자상거래 등에서의 소비자 보호에 관한 법률에 따라 계약 또는 청약철회에 관한 기록, 대금결제 및 재화 등의 공급에 관한 기록은 5년동안 보존됩니다.</li>
								<li>보유하셨던 상품권 금액은 탈퇴와 함께 삭제되며 환불되지 않습니다.</li>
								<li>회원 탈퇴 후 STYLE24에 입력하신 상품문의 및 후기,댓글은 삭제되지 않으며,회원정보 삭제로 인해 작성자 본인을 확인 할 수 없어<br>편집 및 삭제처리가 원천적으로 불가능 합니다. 상품문의 및 후기, 댓글 삭제를 원하시는 경우에는 먼저 해당 게시물을 삭제하신 후 탈퇴를 신청하시기 바랍니다.</li>
								<li>진행중인 주문/취소/반품/교환건이 있을 경우에는 탈퇴가 되지 않습니다.</li>
							</ul>
							<div id="checkSecedeDiv" class="check_box">
								<div class="form_field">
									<div>
										<input type="checkbox" id="checkSecede" name="checkSecede" value="Y"/>
										<label for="checkSecede">
											<span>상기 STYLE24 회원탈퇴 시 처리사항 안내를 확인하였음에 동의합니다.</span>
										</label>
									</div>
								</div>
							</div>
						</div>
				</div>
				<div class="btn_footer_area">
					<button type="button" id="btnSaveSecede" class="btn btn_dark btn_md hide">
						<span>회원탈퇴</span>
					</button>
					<button type="button" id="btnConfirm" class="btn btn_dark btn_md hide" onclick="cfnGoToPage(_PAGE_MAIN);">
						<span>확인</span>
					</button>
				</div>
			</div>
		</div>
	</div>
<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('on');
			isPossible = false
		}

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

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

		if (orderStatInfo.exchangeCount > 0) {
			$('#exCnt').addClass('on');
			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();

		// 마이페이지 LNB 설정
		fnSetMypageLnbList(11);

		// 마이페이지 location 설정
		fnSetMypageLocation('회원탈퇴');

	});
	/*]]>*/
</script>
</th:block>
</body>
</html>


