<template>

<!-- 버튼 -->
<div>

<!--	s: 팝업	-->
		<div class="dimmed" @click="ModalClose();"></div>
		<div class="popup-wrap">


			<!-- 로그인실패: 확인 -->
			<div class="popup modal01">
				<div class="pop-head">
					<h3 class="pop-tit">로그인 실패</h3>
				</div>
				<div class="pop-cont">
					<p>아이디,비밀번호를 확인해주세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>


			<!-- 로그인실패: 5회 -->
			<div class="popup modal02">
				<div class="pop-head">
					<h3 class="pop-tit">로그인 실패</h3>
				</div>
				<div class="pop-cont">
					<p>로그인 5회 실패하였습니다.</p>
					<p>비밀번호 초기화 후 비밀번호를 변경해 주세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 로그인실패: 상태 -->
			<div class="popup modal03">
				<div class="pop-head">
					<h3 class="pop-tit">로그인 실패</h3>
				</div>
				<div class="pop-cont">
					<p>아이디 상태를 확인해 주세요.</p>
					<p>(사용중인 상태만 로그인 가능합니다.)</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 보안 알림 -->
			<div class="popup modal04">
				<div class="pop-head">
					<h3 class="pop-tit">보안 알림</h3>
				</div>
				<div class="pop-cont">
					<p>비밀번호를 변경하지 않은지 90일이</p>
					<p>지났습니다. 비밀번호를 변경하여</p>
					<p>이용 부탁드립니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="$router.push({ path: '/view/login/updatePassword' })">비밀번호 변경하기</button>
				</div>
			</div>
			
			<!-- 중복 로그인 -->
			<div class="popup modal05">
				<div class="pop-head">
					<h3 class="pop-tit">중복 로그인</h3>
				</div>
				<div class="pop-cont">
					<p>동일한 아이디로 로그인 되어 있습니다.</p>
					<p>이전 로그인 세션 종료 후 로그인하시겠습니까?</p>
					<p>확인 시 이전 로그인한 상태는 로그아웃됩니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 휴대폰번호 확인 -->
			<div class="popup modal06">
				<div class="pop-head">
					<h3 class="pop-tit">휴대폰번호 확인</h3>
				</div>
				<div class="pop-cont">
					<p>휴대폰번호를 확인해주세요.</p>
					<p>아이디에 등록된 휴대폰번호로만 인증이 가능합니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 인증번호: 발송 -->
			<div class="popup modal07">
				<div class="pop-head">
					<h3 class="pop-tit">인증번호 발송</h3>
				</div>
				<div class="pop-cont">
					<p>인증번호를 발송하였습니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 인증번호: 입력 -->
			<div class="popup modal08">
				<div class="pop-head">
					<h3 class="pop-tit">인증번호 입력</h3>
				</div>
				<div class="pop-cont">
					<p>인증번호를 입력하세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 인증실패: 인증번호 -->
			<div class="popup modal09">
				<div class="pop-head">
					<h3 class="pop-tit">인증실패</h3>
				</div>
				<div class="pop-cont">
					<p>잘못된 인증번호입니다.</p>
					<p>5회 실패 시 로그아웃됩니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 인증실패: 시간초과 -->
			<div class="popup modal10">
				<div class="pop-head">
					<h3 class="pop-tit">인증실패</h3>
				</div>
				<div class="pop-cont">
					<p>인증시간 초과되었습니다.</p>
					<p>다시 휴대폰번호를 입력해주세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 인증실패: 5회 -->
			<div class="popup modal11">
				<div class="pop-head">
					<h3 class="pop-tit">인증실패</h3>
				</div>
				<div class="pop-cont">
					<p>인증번호 5회 실패하였습니다.</p>
					<p>로그아웃되어 다시 로그인해주세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="$router.go(-1)">확인</button>
				</div>
			</div>
			
			<!-- 비밀번호 초기화 발송 -->
			<div class="popup modal12">
				<div class="pop-head">
					<h3 class="pop-tit">비밀번호 초기화</h3>
				</div>
				<div class="pop-cont">
					<p>해당 아이디에 저장되어 있는 핸드폰번호로</p>
					<p>비밀번호 초기화 문자가 발송되었습니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 아이디 오류 -->
			<div class="popup modal13">
				<div class="pop-head">
					<h3 class="pop-tit">아이디 오류</h3>
				</div>
				<div class="pop-cont">
					<p>등록되지 않은 아이디입니다.</p>
					<p>아이디를 다시 확인하세요</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 비밀번호 오류 -->
			<div class="popup modal14">
				<div class="pop-head">
					<h3 class="pop-tit">비밀번호 오류</h3>
				</div>
				<div class="pop-cont">
					<p>비밀번호를 확인해주세요.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 비밀번호 패턴 오류 -->
			<div class="popup modal15">
				<div class="pop-head">
					<h3 class="pop-tit">비밀번호 오류</h3>
				</div>
				<div class="pop-cont">
					<p>비밀번호를 사용할 수 없습니다.</p>
					<p>비밀번호는 영문/숫자/특수기호를 혼합하여</p>
					<p>8~16자리로 설정해주세요</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>
			
			<!-- 비밀번호 정상 변경 -->
			<div class="popup modal16">
				<div class="pop-head">
					<h3 class="pop-tit">비밀번호 오류</h3>
				</div>
				<div class="pop-cont">
					<p>비밀번호가 정상적으로 변경되었습니다.</p>
					<p>변경된 비밀번호로 다시 로그인 해주세요</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="$router.go(-1)">확인</button>
				</div>
			</div>

			
		</div>
<!--	e: 팝업	-->
	</div>


</template>

<script>


export default {
	data(){
		return{

		}
		},
		methods: {
		//모달 켜기
		ModalOpen(target){
			var dimmed = document.getElementsByClassName('dimmed');
			var wrap = document.getElementsByClassName('popup-wrap');
			var obj = document.getElementsByClassName(target);
			dimmed[0].style.display = 'block';
			wrap[0].style.display = 'block';
			obj[0].style.display = 'block';
		},
		// 모달 끄기
		ModalClose(){
			var dimmed = document.getElementsByClassName('dimmed');
			var wrap = document.getElementsByClassName('popup-wrap');
			var obj = wrap[0].childElementCount
			dimmed[0].style.display = 'none';
			wrap[0].style.display = 'none';
			for(var i = 0; i < obj; i++) {
				var target = document.getElementsByClassName('popup');
				target[i].style.display = 'none';
			}
		},
	}

}
</script>

<!--<style>-->
<!--.popup-btn-wrap {width: 500px; margin: auto; padding: 100px 0;}-->
<!--.popup-btn-wrap button {width: 100%; margin-bottom: 10px; height: 50px; border-radius: 5px; box-shadow: none; border: 1px solid #000; }-->
<!--.popup-btn-wrap button:hover {background: #000; color: #fff;}-->
<!--</style>-->