<!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/LoginLayoutMob">
<!--
 *******************************************************************************
 * @source  : SnsJoinFormMob.html
 * @desc    : 회원정보 입력 Page
 *============================================================================
 * STYLE24
 * Copyright(C) 2021 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2021.04.16   jsshin     최초 작성
 *******************************************************************************
 -->
<body>
<th:block layout:fragment="content">
<style>
	.hide{display:none}
</style>
<main class="container mb">
	<!-- ★ 컨텐츠 시작 -->
	<section class="content mb_join_2">
		<div class="inner">
			<div class="close">
				<a href="javascript:void(0);" class="btn_close" onclick="cfnGoToPage(_PAGE_CUSTOMER_JOIN_TYPE);"><span></span><span></span></a>
			</div>
		</div>
		<div class="inner">
			<h2 class="title">회원정보 입력</h2>
		</div>
		<div class="inner">
			<form id="joinForm" name="joinForm" class="form_wrap form_full" role="form">
				<div class="form_head">
					<h2 class="title sr-only">회원정보 입력</h2>
				</div>
				<!-- 오류시 부모 div에서 제어 -->
				<div class="form_field">
					<label class="input_label sr-only">이메일</label>
					<div class="input_wrap form_full">
						<input type="text" id="email" name="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 mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
									<span>로그인</span>
								</button>
								<button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
									<span>아이디 찾기</span>
								</button>
							</div>
							<!-- //이미 가입되어있는 이메일인경우 -->
						</div>
						<!-- //case (이메일 형식이 바르지않을경우,이미 가입되어있는 이메일인경우) -->
					</div>
				</div>
				<!-- 210415_수정 : 휴대폰 인증 수정 -->
				<div class="form_field">
					<label class="input_label sr-only">휴대폰번호</label>
					<!-- 휴대폰 인증 입력 전 -->
					<div class="input_wrap form_full">
						<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"/>
						<button type="button" id="btnCellPhoneCertify" class="btn btn_dark btn_hp_certi">
							<span>본인인증</span>
						</button>
					</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 mini" onclick="cfnGoToPage(_PAGE_LOGIN);">
								<span>로그인</span>
							</button>
							<button type="button" class="btn btn_default btn_sm mini" onclick="cfnGoToPage(_PAGE_CUSTOMER_ID_FIND);">
								<span>아이디 찾기</span>
							</button>
						</div>
					</div>
				</div>
				<div class="btn_group_flex">
					<div>
						<button type="button" id="btnJoin" class="btn btn_primary btn_block" disabled="disabled">
							<span>동의하고 가입하기</span>
						</button>
					</div>
				</div>
				<!-- //210415_수정 : 버튼 형식 변경. -->
				<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>,<br>
						<a href="javascript:void(0)" onclick="cfnPrivacyPolicyLayer('join');">개인정보 수집 및 이용<i class="ico ico_blank ml5"></i></a>,
						<a href="javascript:void(0)" onclick="cfnPrivacyTrustLayer();">개인정보 취급 위탁<i class="ico ico_blank ml5"></i></a><br>
						내용을 확인 하였으며,동의합니다.
					</p>
				</div>
				<input type="hidden" name="snsId" value=""/>
				<input type="hidden" name="snsType" value=""/>
				<input type="hidden" name="ci" value=""/>
				<input type="hidden" name="memNo" value=""/>
			</form>
		</div>
	</section>
	<!-- ★ 컨텐츠 종료 -->
</main>

<script th:src="@{'/biz/customer.js?v=' + ${#calendars.format(#calendars.createNow(), 'yyyyMMddHHmmss')}}" src="/biz/customer.js"></script>
<script th:inline="javascript">
	/*<![CDATA[*/
	const sEncData = [[${sEncData}]];   //인증 후 해당 페이지로 리다이렉트함
	const authMethod = [[${authMethod}]]; //인증 후 해당 페이지로 리다이렉트함
	const custParams = [[${custParams}]];
	const custSnsInfo = [[${custSnsInfo}]];

	let emailCheck = false;
	let authCheck = false;


	//	이메일 확인
	$('#email').on('blur', function () {
		const $failEmail = $('#failEmail');
		const $dupEmail = $('#dupEmail');
		const $dupEmailDiv = $('#dupEmailDiv');
		$failEmail.hide();
		$dupEmail.hide();
		$dupEmailDiv.hide();

		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 () {
		let joinForm = $('#joinForm').serializeObject();
		let custParams = joinForm.email +','+ joinForm.snsId +','+ joinForm.snsType +','+ joinForm.ci +','+ joinForm.memNo;
		cfnOpenCellphoneCertify(_PAGE_CUSTOMER_SNS_JOIN, custParams);
	});

	// 나이스 본인인증 후 콜백
	var fnNiceCallBack = function(encData) {
		if (!gagajf.isNull(encData)) {
			let ci = $('#joinForm input[name=ci]').val();
			let custInfo = {};
			custInfo.encData = encData;
			if (!gagajf.isNull(ci)) custInfo.ci = ci;
			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);
		}
	};

	// 본인인증 후 데이터 입력 값 셋팅
	var fnDataSet = function (custParams) {
		const $email = $('#joinForm input[name=email]');
		const $snsId = $('#joinForm input[name=snsId]');
		const $snsType = $('#joinForm input[name=snsType]');
		const $ci = $('#joinForm input[name=ci]');
		const $memNo = $('#joinForm input[name=memNo]');

		let arrayParams = custParams.split(',');
		//[0]이메일/[1]SNS_ID/[2]SNS_TYPE/[3]CI/[4]memNo
		let email = arrayParams[0];
		let snsId = arrayParams[1];
		let snsType = arrayParams[2];
		let ci = arrayParams[3];
		let memNo = arrayParams[4];

		// console.log(arrayParams);
		if (!gagajf.isNull(email)) {
			$email.val(email);
		}
		if (!gagajf.isNull(snsId)) {
			$snsId.val(snsId);
		}
		if (!gagajf.isNull(snsType)) {
			$snsType.val(snsType);
		}
		if (!gagajf.isNull(ci)) {
			$ci.val(ci);
		}
		if (!gagajf.isNull(memNo)) {
			$memNo.val(memNo);
		}
		if (!gagajf.isNull(email)) {
			$email.val(email);
			$email.trigger('blur');
		}
	};

	var fnDataInit = function (custSnsInfo) {
		const $email = $('#joinForm input[name=email]');
		const $snsId = $('#joinForm input[name=snsId]');
		const $snsType = $('#joinForm input[name=snsType]');
		const $ci = $('#joinForm input[name=ci]');
		const $memNo = $('#joinForm input[name=memNo]');

		let email = custSnsInfo.email;
		let snsId = custSnsInfo.snsId;
		let snsType = custSnsInfo.snsType;
		let ci = custSnsInfo.ci;
		let memNo = custSnsInfo.memNo;

		if (!gagajf.isNull(email)) {
			$email.val(email);
		}
		if (!gagajf.isNull(snsId)) {
			$snsId.val(snsId);
		}
		if (!gagajf.isNull(snsType)) {
			$snsType.val(snsType);
		}
		if (!gagajf.isNull(ci)) {
			$ci.val(ci);
		}
		if (!gagajf.isNull(memNo)) {
			$memNo.val(memNo);
		}
		if (!gagajf.isNull(email)) {
			$email.val(email);
			$email.trigger('blur');
		}
	}

	$(document).ready(function () {
		if (!gagajf.isNull(custSnsInfo)) {
			fnDataInit(custSnsInfo);
		}
		if (!gagajf.isNull(custParams)) {
			fnDataSet(custParams);
		}
		if (!gagajf.isNull(sEncData)) {
			fnNiceCallBack(sEncData, authMethod);
		}
	});

	/*]]>*/
</script>
</th:block>
</body>
</html>