<template>
	<div class="content pt50 pb50">
		<div class="content w1200">
			<div class="page-title point-font mb30">
				<p>회원가입</p>
			</div>

			<div class="content-zone  sch-full">
				<div class="content">
					<div class="scroll">
						<div class="form-box">
							<div class="form-box-title">
								<p>기본정보</p>
								<p><span>*</span>필수입력</p>
							</div>
							<div class="form-content">
								<div class="layout">
									<label class="form-title"><span>*</span>아이디</label>
									<input type="text" class="form-control sm" v-model="mbrVO.lgnId" ref="lgnId"
										minlength="5" maxlength="50" placeholder="아이디를 입력하세요."
										:disabled="mbrVO.mbrId != null" />
								</div>
								<div class="layout">
									<label class="form-title"><span>*</span>이름</label>
									<input type="text" class="form-control sm" ref="mbrNm" v-model="mbrVO.mbrNm"
										minlength="2" maxlength="50" placeholder="이름을 입력하세요." />
								</div>
								<div class="layout">
									<label class="form-title">
										<p><span>*</span>비밀번호</p>
									</label>
									<div class="form-group">
										<input type="password" class="form-control sm" ref="newPswd"
											v-model="pswd.newPswd" minlength="9" placeholder="영문, 숫자, 특수문자 조합 9자 이상" />
										<span :class="{
											'red-text': pswd.errorPwd,
										}">
											영문, 숫자, 특수문자를 조합하여 입력해주세요. (9자 이상)
										</span>
									</div>
								</div>
								<div class="layout">
									<label class="form-title">
										<p><span>*</span>비밀번호확인</p>
									</label>
									<input type="password" :class="{ 'form-control sm': true, 'error': pswd.pswdChk }"
										ref="newPswdChk" v-model="pswd.newPswdChk" minlength="9"
										placeholder="비밀번호 확인을 입력하세요." />
								</div>
								<!-- <template v-if="showOpt.isMblNo || showOpt.isTelNo"> -->
								<div v-if="showOpt.isMblNo" class="layout">
									<label class="form-title"><span>*</span>휴대폰번호</label>
									<input type="text" class="form-control sm" ref="mblTelno" v-model="mbrVO.mblTelno"
										@input="inputFormatPhone" maxlength="13" placeholder="휴대폰번호를 입력하세요." />
								</div>
								<!-- </template> -->
								<div v-if="showOpt.isTelNo" class="layout">
									<label class="form-title">전화번호</label>
									<input type="text" class="form-control sm" ref="telno" v-model="mbrVO.telno"
										@input="inputFormatTel" maxlength="13" placeholder="전화번호를 입력해주세요." />
								</div>
								<!-- <template v-if="showOpt.isEml || showOpt.isSmsAgree || showOpt.isEmlAgree"> -->
								<div v-if="showOpt.isEml" class="layout">
									<label class="form-title"><span>*</span>이메일</label>
									<div class="check-area">
										<input type="text" class="form-control sm" ref="emailId" v-model="email.id"
											oninput="this.value = this.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g, '');"
											placeholder="이메일을 입력하세요." />
										<div>@</div>
										<template v-if="email.select == 'self'">
											<input type="text" class="form-control sm" ref="emailAddress"
												v-model="email.address" />
										</template>
										<select class="form-select sm" ref="emailSelect" v-model="email.select">
											<option value="">선택하세요</option>
											<option value="self">직접입력</option>
											<option value="naver.com">naver.com</option>
											<option value="gmail.com">gmail.com</option>
											<option value="hanmail.net">hanmail.net</option>
											<option value="nate.com">nate.com</option>
											<option value="kakao.com">kakao.com</option>
										</select>
									</div>
								</div>
								<div v-if="showOpt.isSmsAgree" class="layout">
									<label class="form-title"><span>*</span>문자수신</label>
									<div class="check-area">
										<div class="form-check">
											<input type="radio" name="smsRcptnAgreYn" id="smsY" class="mr5"
												v-model="mbrVO.smsRcptnAgreYn" value="Y" />
											<label for="smsY">수신</label>
										</div>
										<div class="form-check">
											<input type="radio" name="smsRcptnAgreYn" id="smsN" class="mr5"
												v-model="mbrVO.smsRcptnAgreYn" value="N" />
											<label for="smsN">미수신</label>
										</div>
									</div>
								</div>
								<div v-if="showOpt.isEmlAgree" class="layout">
									<label class="form-title"><span>*</span>이메일수신</label>
									<div class="check-area">
										<div class="form-check">
											<input type="radio" name="emlRcptnAgreYn" id="y" class="mr5"
												v-model="mbrVO.emlRcptnAgreYn" value="Y" />
											<label for="y">수신</label>
										</div>
										<div class="form-check">
											<input type="radio" name="emlRcptnAgreYn" id="n" class="mr5"
												v-model="mbrVO.emlRcptnAgreYn" value="N" />
											<label for="n">미수신</label>
										</div>
									</div>
								</div>
								<!-- </template> -->
								<template v-if="showOpt.isAddr">
									<div class="layout">
										<label class="form-title"><span>*</span>우편번호</label>
										<input type="text" class="form-control sm" v-model="mbrVO.zip" readonly />

										<button :class="{
											'large-btn': true,
											'blue-border-btn': pageRole == 'adm',
											'green-border-btn': pageRole == 'portal',
										}" @click="fnZipSearch">
											찾기
										</button>
									</div>
									<div class="layout">
										<label class="form-title"><span>*</span>주소</label>
										<input type="text" class="form-control sm" v-model="mbrVO.addr" readonly />
									</div>
									<div class="layout">
										<label class="form-title">
											상세주소
										</label>
										<input type="text" class="form-control sm" ref="daddr" v-model="mbrVO.daddr"
											placeholder="상세주소를 입력해주세요." />
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>


			<div class="btn-wrap">
				<button :class="{
					'btn sm main': true,
					// 'blue-btn': pageRole == 'adm',
					// 'green-btn': pageRole == 'portal',
				}" @click="fnInsert">완료
				</button>
				<button class="btn sm tertiary" @click="fnCancel">취소</button>
			</div>
		</div>
	</div>
</template>

<script>
import { defaultUserInfoParams } from "../../../resources/js/defaultUserInfoParams";
import validateParams from "../../../resources/js/validateParams";
// import pageAuthMixin from "../../../views/common/pageAuthMixin.js";
// COMPONENETS
import UserInfoInsert from "../../component/userInfo/UserInfoInsert.vue";

import { mbrDetailProc, mbrInsertProc } from "../../../resources/api/mbrInfo";

export default {
	mixins: [validateParams],
	components: {
		UserInfoInsert,
	},
	data() {
		return {
			pageId: this.$store.state.mbrId, // 페이지 아이디
			mbrVO: {
				mbrStts: 1, // 회원상태
				smsRcptnAgreYn: "Y", // 문자수신동의
				emlRcptnAgreYn: "Y", // 이메일수신동의
			},
			showOpt: { ...defaultUserInfoParams }, // 유저정보 표시 여부 객체

			pswd: {
				newPswd: null,
				newPswdChk: null,
				errorPwd: null,
				pswdChk: null,
			},
			email: {
				id: null,
				select: "",
				address: null,
			},
		};
	},
	created() {
		// this.fnMbrViewDetail();
	},
	methods: {
		// axios: 사용자 정보 상세 조회
		async fnMbrViewDetail() {
			console.log("fnMbrViewDetail: ", this.pageId);
			// 데이터 세팅
			const data = { mbrId: this.pageId };
			// 실행
			try {
				const response = await mbrDetailProc(data);
				this.mbrVO = response.data.data;
				console.log("mbrVO: ", this.mbrVO);
			} catch (error) {
				const errorData = error.response.data;
				if (errorData.message != null && errorData.message != "") {
					alert(error.response.data.message);
				} else {
					alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
				}
			}
		},

		// axios: 사용자 정보 상세 조회
		async fnInsert() {
			// 유효성검사
			if (!this.validation()) {
				return;
			}

			// 데이터 세팅
			let data = this.mbrVO;
			this.fnDataSetting(data);
			// 실행
			try {
				const response = await mbrInsertProc(data);
				alert(response.data.message);
				this.$router.push({
					path: this.$filters.ctxPath("/"),
					query: {
						pageId:
							this.pageId == null ? response.data.data.mbrId : this.pageId,
					},
				});
			} catch (error) {
				const errorData = error.response.data;
				if (errorData.message != null && errorData.message != "") {
					alert(error.response.data.message);
				} else {
					alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
				}
			}
		},

		// 표기변경
		changeFormat() {
			// 휴대폰번호 포맷
			const mbl = this.mbrVO.mblTelno?.replace(/[^0-9]/g, '') || '';
			if (mbl.length === 10) {
				this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
			} else if (mbl.length === 11) {
				this.mbrVO.mblTelno = mbl.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
			}

			// 전화번호 포맷
			const tel = this.mbrVO.telno?.replace(/[^0-9]/g, '') || '';
			if (tel.startsWith('02')) {
				// 서울 지역번호 (2자리)
				if (tel.length === 9) {
					this.mbrVO.telno = tel.replace(/(\d{2})(\d{3})(\d{4})/, '$1-$2-$3');
				} else if (tel.length === 10) {
					this.mbrVO.telno = tel.replace(/(\d{2})(\d{4})(\d{4})/, '$1-$2-$3');
				}
			} else {
				// 나머지 지역번호 (3자리)
				if (tel.length === 10) {
					this.mbrVO.telno = tel.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
				} else if (tel.length === 11) {
					this.mbrVO.telno = tel.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
				}
			}

			// 이메일
			if (this.mbrVO.eml != null) {
				const email = this.mbrVO.eml.split("@");
				this.email.id = email[0];
				switch (email[1]) {
					case "naver.com":
					case "gmail.com":
					case "hanmail.net":
					case "nate.com":
					case "kakao.com":
						this.email.select = email[1];
						break;
					default:
						this.email.select = "self";
						this.email.address = email[1];
						break;
				}
			}
		},

		// 휴대폰 번호 입력 포맷
		inputFormatPhone(event) {
			let input = event.target.value.replace(/[^0-9]/g, '');

			if (input.length <= 3) {
				this.mbrVO.mblTelno = input;
			} else if (input.length <= 6) {
				this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3);
			} else if (input.length === 10) {
				// 10자리는 3-3-4
				this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
			} else {
				// 기본은 3-4-4
				this.mbrVO.mblTelno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
			}
		},

		// 전화번호 입력 포맷
		inputFormatTel(event) {
			let input = event.target.value.replace(/[^0-9]/g, '');

			if (input.startsWith('02')) {
				// 서울 지역번호 (2자리)
				if (input.length <= 2) {
					this.mbrVO.telno = input;
				} else if (input.length <= 5) {
					this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2);
				} else if (input.length <= 9) {
					this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 5) + '-' + input.slice(5);
				} else {
					this.mbrVO.telno = input.slice(0, 2) + '-' + input.slice(2, 6) + '-' + input.slice(6, 10);
				}
			} else {
				// 나머지 지역번호 (3자리)
				if (input.length <= 3) {
					this.mbrVO.telno = input;
				} else if (input.length <= 6) {
					this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3);
				} else if (input.length <= 10) {
					this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 6) + '-' + input.slice(6);
				} else {
					this.mbrVO.telno = input.slice(0, 3) + '-' + input.slice(3, 7) + '-' + input.slice(7, 11);
				}
			}
		},

		// 비밀번호변경 검증
		pswdCheck() {
			if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
				const validate =
					/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[$`~!@$!%*#^?&()\-_=+])/;
				if (
					!validate.test(this.pswd.newPswd)
				) {
					this.pswd.errorPwd = true;
				} else if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
					this.pswd.errorPwd = false;
				}
			} else {
				this.pswd.errorPwd = null;
			}
		},
		// 비밀번호변경확인 검증
		pswdChkCheck() {
			if (this.pswd.newPswdChk != null && this.pswd.newPswdChk != "") {
				if (this.pswd.newPswd == this.pswd.newPswdChk) {
					this.pswd.pswdChk = false;
				} else {
					this.pswd.pswdChk = true;
				}
			} else {
				this.pswd.pswdChk = null;
			}
		},

		// 우편번호 찾기 버튼
		fnZipSearch() {
			let width = 500; //팝업의 너비
			let height = 600; //팝업의 높이
			new window.daum.Postcode({
				oncomplete: (data) => {
					width: width;
					height: height;
					this.mbrVO.zip = data.zonecode;
					this.mbrVO.addr = data.roadAddress;
				},
			}).open({
				left: window.screen.width / 2 - width / 2,
				top: window.screen.height / 2 - height / 2,
			});
		},

		// 데이터 세팅
		fnDataSetting(data) {
			// 비밀번호
			if (this.pswd.newPswd != null && this.pswd.newPswd != "") {
				data.pswd = this.pswd.newPswd.replace(/(\s*)/g, "");
			} else {
				data.pswd = null;
			}

			// 휴대폰 번호
			data.mblTelno = this.mbrVO.mblTelno.replace(/-/g, ''); // 하이픈 제거

			// 전화 번호
			if (this.mbrVO.telno != null) {
				data.telno = this.mbrVO.telno.replace(/-/g, "");
			}

			// 이메일
			data.eml = this.emailSum();

			// 회원 상태가 차단이 아니면 차단일, 차단 사유 삭제
			if (data.mbrStts != 3) {
				data.cntrlDt = null;
				data.cntrlRsn = null;
			}
		},

		// 유효성검사
		validation() {
			// 아이디
			if (!this.validateId(this.mbrVO.lgnId)) {
				return false;
			}
			// 이름
			if (!this.validateNm(this.mbrVO.mbrNm)) {
				return false;
			}
			// 비밀번호
			if (!this.validatePswd(this.pageId, this.pswd)) {
				return false;
			}

			// 휴대폰번호
			if (this.showOpt.isMblNo) {
				if (!this.validateMblNo(this.mbrVO.mblTelno)) {
					return false;
				}
			}
			// 이메일
			if (this.showOpt.isEml) {
				if (!this.validateEml(this.email)) {
					return false;
				}
			}
			// 문자수신
			if (this.showOpt.isSmsAgree) {
				if (!this.validateSmsAgre(this.mbrVO.smsRcptnAgreYn)) {
					return false;
				}
			}
			// 이메일수신
			if (this.showOpt.isEmlAgree) {
				if (!this.validateEmlAgre(this.mbrVO.emlRcptnAgreYn)) {
					return false;
				}
			}
			// 주소
			if (this.showOpt.isAddr) {
				if (!this.validateAddr(this.mbrVO)) {
					return false;
				}
			}

			if (this.pageRole == "adm") {
				if (this.showOpt.isAuthor) {
					// 회원상태: 차단
					if (this.showOpt.isStts) {
						if (!this.validateBlock(this.mbrVO)) {
							return false;
						}
					}
					// 사용자 권한
					// if (this.mbrVO.authorList.length < 1) {
					//   alert("사용자의 권한을 최소 1개 이상 추가하세요.");
					//   return false;
					// }
				}
			}

			return true;
		},

		// 이메일 합체
		emailSum() {
			if (this.email.select != "self") {
				return this.email.id + "@" + this.email.select;
			} else {
				return this.email.id + "@" + this.email.address;
			}
		},

		// 취소
		fnCancel() {
			const isCheck = confirm("작성을 취소하시겠습니까?");
			if (isCheck) {
				if (this.pageRole != "adm") {
					this.$router.push({
						path: this.routerPaths.view,
					});
				} else {
					this.$router.push({
						path: this.routerPaths.list,
					});
				}
			}
		},
	},

	watch: {
		// 비밀번호변경 감시
		"pswd.newPswd"() {
			this.pswdCheck();
			this.pswdChkCheck();
		},
		// 비밀번호변경확인 감시
		"pswd.newPswdChk"() {
			this.pswdChkCheck();
		},
		// 회원상태 감시
		"mbrVO.mbrStts"() {
			if (this.mbrVO.mbrStts == 3) {
				this.mbrVO.cntrlDt = new Date().toISOString().substring(0, 10);
				this.$refs.cntrlRsn.focus();
			} else {
				this.mbrVO.cntrlDt = null;
				this.mbrVO.cntrlRsn = null;
			}
		},
	},
};
</script>
