<!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/DefaultLayoutWeb">
<!--
 *******************************************************************************
 * @source  : SnsJoinFormWeb.html
 * @desc    : 회원정보 입력 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.02.05   jsshin     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<style>
	.hide{display:none}
</style>
<div id="container" class="container mb">
	<div class="wrap">
		<div class="content join2"> <!-- 페이지특정 클래스 = join1 -->
			<div class="cont_head">
				<h4>회원정보 입력</h4>
			</div>
			<div class="cont_body">
				<!-- form start -->
				<form id="joinForm" name="joinForm" class="form_wrap form_col_c form_full" role="form">
					<div class="form_field">
						<label class="input_label sr-only">이메일</label>
						<div class="input_wrap form_full">
							<input type="text" id="email" name="email" th:value="${custSnsInfo.email}" placeholder="이메일" class="form_control" required="required" data-valid-name="이메일" maxlength="30" autocomplete="no" autocapitalize="no"/><!-- 잘못기입된 경우 class "err" 추가 -->
							<!-- case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
							<div class="help_block">
								<!-- 이메일 형식이 바르지않을경우 -->
								<p id="failEmail" class="t_err hide">
									이메일 형식이 올바르지 않습니다.
								</p>
								<!-- //이메일 형식이 바르지않을경우 -->
								<!-- 이미 가입되어있는 이메일인경우 -->
								<p id="dupEmail" class="t_err hide">
									이미 가입된 이메일 주소입니다. 다른 이메일 주소를 입력하여 주세요.
								</p>
								<div id="dupEmailDiv" class="mt20 hide">
									<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_LOGIN);">
										<span>로그인</span>
									</button>
									<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
										<span>아이디 찾기</span>
									</button>
								</div>
								<!-- //이미 가입되어있는 이메일인경우 -->
							</div>
							<!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
						</div>
					</div>
					<div class="form_field">
						<label class="input_label sr-only">휴대폰번호</label>
						<div class="ui_row">
							<div class="ui_col_9">
								<div class="input_wrap">
									<input type="text" id="cellPhnno" name="cellPhnno" placeholder="휴대폰 인증 해주세요." class="form_control" minlength="10" maxlength="11" required="required" data-valid-type="numeric" data-valid-name="휴대폰" readonly="readonly"/>
								</div>
							</div>
							<div class="ui_col_3">
								<button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_block">
									<span>본인인증</span>
								</button>
							</div>
						</div>
						<!-- case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
						<div class="help_block">
							<!-- 휴대폰번호 형식이 맞지 않을경우 -->
							<p id="failPhnno" class="t_err hide">휴대폰번호를 형식에 맞게 정확히 입력해주세요</p>
							<!-- //휴대폰번호 형식이 맞지 않을경우 -->
							<!-- 이미 가입되어있는 핸드폰번호일경우 -->
							<p id="dupPhnno" class="t_err hide">I***D로 가입한 이력이 있습니다.</p>
							<div id="dupPhnnoDiv" class="mt20 hide">
								<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_LOGIN);">
									<span>로그인</span>
								</button>
								<button type="button" class="btn btn_default btn_sm" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
									<span>아이디 찾기</span>
								</button>
							</div>
							<!-- //이미 가입되어있는 핸드폰번호일경우 -->
						</div>
						<!-- //case (휴대폰번호 형식이 맞지 않을경우,이미 가입되어있는 핸드폰번호일경우) -->
					</div>
					<div class="mt40">
						<button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
							<span>동의하고 가입하기</span>
						</button>
					</div>
					<div class="desc_wrap t_c mt20">
						<p>
							본인은&nbsp;만 14세 이상이며&nbsp;<a href="javascript:void(0)" onclick="cfnUseTermsLayer();">STYLE24이용약관<i class="ico ico_blank ml5"></i></a>
							,&nbsp;<a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer();">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,<br>
							<a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a> 내용을 확인 하였으며,동의합니다.
						</p>
					</div>
					<input type="hidden" name="snsId" th:value="${custSnsInfo.snsId}"/>
					<input type="hidden" name="snsType" th:value="${custSnsInfo.snsType}"/>
					<input type="hidden" name="ci" th:value="${custSnsInfo.ci}"/>
					<input type="hidden" name="memNo" th:value="${custSnsInfo.memNo}"/>
				</form>
				<!-- form End -->
			</div>
		</div>
	</div>
</div>

<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	let emailCheck = false;
	let authCheck = false;

	//	이메일 확인
	$('#email').on('blur', function () {
		const $failEmail = $('#failEmail');
		let email = $(this).val();
		let validation;

		if(!gagajf.isNull(email)) {
			if (!fnCheckValidationEmail(email)) {
				$failEmail.show();
				emailCheck = false;
				validation = false;
			} else {
				validation = true;
				$failEmail.hide();
			}
			if (validation) {
				let custInfo = {};
				custInfo.email = email;
				let jsonData = JSON.stringify(custInfo);
				gagajf.ajaxJsonSubmit('/customer/email/check', jsonData, fnEmailConfirmCallBack);
			}
		}
	});

	// 이메일 확인 결과
	var fnEmailConfirmCallBack = function (result) {
		const $dupEmail = $('#dupEmail');
		const $dupEmailDiv = $('#dupEmailDiv');
		if (result.isFind) { // 중복된 아이디가 존재
			$dupEmail.show();
			$dupEmailDiv.show();
			emailCheck = false;
		} else {
			$dupEmail.hide();
			$dupEmailDiv.hide();
			emailCheck = true;
		}
		fnPossibleJoin();
	};

	//휴대폰 인증
	$('#btnCellPhoneCertify').on('click', function () {
		cfnOpenCellphoneCertify();
	});

	// 나이스 본인인증 후 콜백
	var fnNiceCallBack = function(encData) {
		if (!gagajf.isNull(encData)) {
			let custInfo = {};
			custInfo.encData = encData;
			let jsonData = JSON.stringify(custInfo);
			gagajf.ajaxJsonSubmit('/customer/authentication/check', jsonData, fnInfoConfirmCallBack);
		}
	};

	// 본인인증 후 결과
	var fnInfoConfirmCallBack = function (result) {
		const $cellPhnno = $('#cellPhnno');
		const $dupPhnno = $('#dupPhnno');
		const $dupPhnnoDiv = $('#dupPhnnoDiv');
		const $btnCellPhoneCertify = $('#btnCellPhoneCertify');
		$cellPhnno.val(result.cellPhnno);

		if (result.isFind) { // 가입된 고객 정보가 있으면
			let msg = '';
			if (result.custStat === 'G104_30') {
				msg = "탈퇴한 회원입니다. 탈퇴 후 60일 동안 재가입이 불가능합니다.";
			} else {
				msg = result.maskingCustId+"로 가입된 이력이 있습니다.";
			}
			$dupPhnno.html(msg);
			$dupPhnno.show();
			$dupPhnnoDiv.show();
			authCheck = false;
		} else {
			$dupPhnno.hide();
			$dupPhnnoDiv.hide();
			authCheck = true;
		}
		$btnCellPhoneCertify.find('span').text('인증완료');
		$btnCellPhoneCertify.attr('disabled', true);
		fnPossibleJoin();
	};

	// 저장
	$('#btnJoin').on('click', function () {
		mcxDialog.confirm("회원가입을 하시겠습니까?", {
			cancelBtnText: "취소",
			sureBtnText: "확인",
			sureBtnClick: function() {
				$('#btnJoin').attr('disabled', true);
				let jsonData = JSON.stringify($('#joinForm').serializeObject());
				gagajf.ajaxJsonSubmit('/customer/sns/join/save', jsonData, fnJoinSaveCallback);
			}
		});
	});

	var fnJoinSaveCallback = function (result) {
		cfnGoToPage(_PAGE_CUSTOMER_JOIN_COMPLETE);
	};


	// 가입 가능한지 확인
	var fnPossibleJoin = function () {
		const $btnJoin = $('#btnJoin');
		if (emailCheck && authCheck ) {
			$btnJoin.attr('disabled', false);
		} else {
			$btnJoin.attr('disabled', true);
		}
	};

	$(document).ready(function () {
		 $('#joinForm input[name=email]').trigger('blur');
	});

/*]]>*/
</script>

</th:block>

</body>
</html>
