<template>
	<!-- <div class="wrap bg-wrap"> -->
	<div>
		<div class="dimmed searchID" @click="searchIDCancel"></div>
		<div class="popup-wrap searchID">
			<!-- 관리자 ID 조회 -->
			<div class="popup searchID">
				<div class="pop-head">
					<h3 class="pop-tit">관리자명 조회</h3>
				</div>
				<div class="pop-cont-detail input_box">
					<label>ID</label>
					<div class="input_search">
						<input class="search-box" type="text" placeholder="아이디 입력">
						<button type="button" class="button grey" @click="searchID">조회</button>
					</div>
				</div>
				<div class="pop-btn2">
					<button class="btn-pcolor" @click="searchIDClose">확인</button>
					<button class="btn-default" @click="searchIDCancel">취소</button>
				</div>
			</div>
		</div>
		<!-- 관리자명 조회 실패시 -->
		<div class="dimmed searchIDFail" @click="searchIDFailClose"></div>
		<div class="popup-wrap searchIDFail">
			<div class="popup searchIDFail">
				<div class="pop-head">
					<h3 class="pop-tit">관리자명 조회</h3>
				</div>
				<div class="pop-cont">
					<p>입력하신 마당 ID를 조회할 수 없습니다.</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="searchIDFailClose">확인</button>
				</div>
			</div>
		</div>
		<!-- 관리자 ID 조회 -->
		<div class="dimmed searchIDSuccess" @click="searchIDSuccessCancel"></div>
		<div class="popup-wrap searchIDSuccess">
			<div class="popup searchIDSuccess">
				<div class="pop-head">
					<h3 class="pop-tit">관리자 ID 조회</h3>
				</div>
				<div class="pop-cont">
					<p>선택하신 정보가 아래와 같습니다.</p>
					<p>유치자 정보를 수정하시겠습니까?</p>
				</div>
				<ul class="pop-cont-detail">
					<li>마당ID : {{loginId}}</li>
					<li>코드 : {{userCode}}</li>
					<li>이름 : {{name}}</li>
					<li>대리점명 : {{exDeptCd}}</li>
				</ul>
				<div class="pop-btn2">
					<button class="btn-pcolor" @click="searchIDSuccessClose">확인</button>
					<button class="btn-default" @click="searchIDCancel">취소</button>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
import api from '@/service/api';

export default {
	name: "searchID",
	data(){
		return{
			row:{},
			title:'',
			msg: '',
			sParam:{},
			loginId:'',
			userCode:'',
			name:'',
			exDeptCd:'',

		}
	},
	methods :{
		// 마당 ID 조회.
		async searchID(){
			try {
				const response = await api.subsDetail(this.row);
				const result = response.data;
				if (result != null && result.retCode == "0000") {
				}
			} catch (error) {
			}
		},
        // ID 검색 모달 오픈
		searchIDOpen(props){
			var dimmed = document.getElementsByClassName('searchID');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}

		},
		// ID 검색 모달 닫기
		searchIDClose(){
			var dimmed = document.getElementsByClassName('searchID');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
            
            this.row.result = true;
            // 부모 함수 호출.
            this.$parent.searchIDCalbackFnc(this.row);
		},
        // ID 검색 모달 취소
		searchIDCancel(){
			var dimmed = document.getElementsByClassName('searchID');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}

            this.row.result = false;
            // 부모 함수 호출.
            this.$parent.searchIDCalbackFnc(this.row);
		},
		// 검색 성공 모달 오픈
		searchIDSuccessOpen(){
			var dimmed = document.getElementsByClassName('searchIDSuccess');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}

		},
		// 검색 성공 모달 닫기
		searchIDSuccessClose(){
			var dimmed = document.getElementsByClassName('searchIDSuccess');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
            
            this.row.result = true;
		},
		// 검색 성공 취소
		searchIDSuccessCancel(){
			var dimmed = document.getElementsByClassName('searchIDSuccess');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}

            this.row.result = false;
		},
		// 결과없음 모달 오픈
		searchIDFailOpen(){
			var dimmed = document.getElementsByClassName('searchID');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'block';
			}

		},
		// 결과없음 모달 닫기
		searchIDFailClose(){
			var dimmed = document.getElementsByClassName('searchID');
			for(var i = 0; i < dimmed.length; i++){
				dimmed[i].style.display = 'none';
			}
            
            this.row.result = true;
		},
	}
}
</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>