<template>    
	<div class="wrap bg-wrap">
		<!-- 시스템관리 팝업 -->
		<!-- <div class="popup-btn-wrap">		 -->
			<!-- <button class="trigger" onclick="ModalOpen('modal17');">ID 조회</button>
			<button class="trigger" onclick="ModalOpen('modal18');">관리자 ID 조회</button>
			<button class="trigger" onclick="ModalOpen('modal19');">유치채널 ID 조회</button>
			<button class="trigger" onclick="ModalOpen('modal20');">관리자 등록</button>
			<button class="trigger" onclick="ModalOpen('modal21');">관리자 상세정보</button>
			<button class="trigger" onclick="ModalOpen('modal22');">유치채널 사용자 등록</button>
			<button class="trigger" onclick="ModalOpen('modal23');">유치채널 상세정보</button> -->

            <!-- <button class="trigger" @click="ModalOpen('modal20');">관리자 등록</button> -->
		<!-- </div> -->
		
<!--	s: 팝업	-->
		<div class="dimmed" @click="ModalClose();"></div>
		<div class="popup-wrap">
			
			
			

			<!-- 시스템관리 팝업 -->

			<!-- ID 조회 -->
			<div class="popup modal17">
				<div class="pop-head">
					<h3 class="pop-tit">ID 조회</h3>
				</div>
				<div class="pop-cont">
					<p>입력하신 마당ID를 조회할 수 없습니다</p>
				</div>
				<div class="pop-btn1">
					<button class="btn-pcolor" @click="ModalClose();">확인</button>
				</div>
			</div>

			<!-- 관리자 ID 조회 -->
			<div class="popup modal18">
				<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 : uplus01</li>
					<li>이름 : 홍길동</li>
					<li>휴대폰번호 : 01012345555</li>
					<li>이메일 : abc@abc.com</li>
				</ul>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">확인</button>
				</div>
			</div>
			
			<!-- 유치채널 ID 조회 -->
			<div class="popup modal19">
				<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 : uplus01</li>
					<li>이름 : 홍길동</li>
					<li>휴대폰번호 : 01012345555</li>
					<li>이메일 : abc@abc.com</li>
					<li>코드 : 1234</li>
				</ul>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">확인</button>
				</div>
			</div>

			<!-- 관리자 등록 -->
			<div class="popup modal20 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">관리자 등록</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>마당 ID</th>
								<td class="input_search">
									<input type="text" placeholder="아이디 입력">
									<button type="button" class="button grey" @click="ModalOpen('modal17')">조회</button>
								</td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>이름</th>
								<td><input type="text"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="text" placeholder="- 자 제외 숫자만 입력"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email"></td>
							</tr>
							<tr>
								<th>권한</th>
								<td>
									<div :class="select_box">
										<select name="" id="right">
											<option value="">선택</option>
											<option value="전체">전체</option>
											<option value="운영자">운영자</option>
										</select>
									</div>
								</td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="state" value="사용" id="popup_radio1" checked>
									<label for="popup_radio1">사용</label>
									<input type="radio" name="state" value="정지" id="popup_radio2">
									<label for="popup_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">저장</button>
				</div>
			</div>

			<!-- 관리자 상세정보 -->
			<div class="popup modal21 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">관리자 상세정보</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>ID</th>
								<td><input type="text" disabled value="uplus1"></td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>이름</th>
								<td><input type="text" disabled value="홍길동"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="text" disabled value="01012345678"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email" disabled value="adm@site.com"></td>
							</tr>
							<tr>
								<th>권한</th>
								<td>
									<div class="select_box">
										<select name="" id="right">
											<option value="전체">전체</option>
											<option value="운영자">운영자</option>
										</select>
									</div>
								</td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="state" value="사용" id="popup_radio1" checked>
									<label for="popup_radio1">사용</label>
									<input type="radio" name="state" value="정지" id="popup_radio2">
									<label for="popup_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">저장</button>
				</div>
			</div>

			<!-- 유치채널 사용자 등록 -->
			<div class="popup modal22 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">유치채널 사용자 등록</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>ID</th>
								<td class="input_search">
									<input type="text" placeholder="아이디 입력">
									<button type="button" class="button grey">조회</button>
								</td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>이름(대리점명)</th>
								<td><input type="text"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="text" placeholder="- 자 제외 숫자만 입력"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email"></td>
							</tr>
							<tr>
								<th>코드</th>
								<td><input type="text"></td>
							</tr>
							<tr>
								<th>권한</th>
								<td><input type="text" disabled value="대리점"></td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="state" value="사용" id="popup_radio1" checked>
									<label for="popup_radio1">사용</label>
									<input type="radio" name="state" value="정지" id="popup_radio2">
									<label for="popup_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">저장</button>
				</div>
			</div>

			<!-- 유치채널 상세정보 -->
			<div class="popup modal23 popup_form">
				<div class="pop-head">
					<h3 class="pop-tit">유치채널 상세정보</h3>
				</div>
				<form autocomplete="off">
					<table>
						<tbody>
							<tr>
								<th>ID</th>
								<td><input type="text" disabled value="uplus1"></td>
							</tr>
							<tr>
								<th>비밀번호</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>비밀번호 확인</th>
								<td><input type="password"></td>
							</tr>
							<tr>
								<th>이름(대리점명)</th>
								<td><input type="text" disabled value="플러스"></td>
							</tr>
							<tr>
								<th>휴대폰번호</th>
								<td><input type="text" disabled value="01012345678"></td>
							</tr>
							<tr>
								<th>이메일</th>
								<td><input type="email" disabled value="abc@abc.com"></td>
							</tr>
							<tr>
								<th>코드</th>
								<td><input type="text" disabled value="5678"></td>
							</tr>
							<tr>
								<th>권한</th>
								<td><input type="text" disabled value="대리점"></td>
							</tr>
							<tr>
								<th class="center">상태</th>
								<td>
									<input type="radio" name="state" value="사용" id="popup_radio1" checked>
									<label for="popup_radio1">사용</label>
									<input type="radio" name="state" value="정지" id="popup_radio2">
									<label for="popup_radio2">정지</label>
								</td>
							</tr>
						</tbody>
					</table>
				</form>
				<div class="pop-btn2">
					<button class="btn-default" @click="ModalClose();">취소</button>
					<button class="btn-pcolor">저장</button>
				</div>
				
			</div>
			<!-- 시스템관리 팝업 끝-->
		</div>
<!--	e: 팝업	-->
	</div>
	
</template>

<script>

export default {
	data(){
        return{
            
        }
    },
	methods :{
		// 모달 띄우기
		ModalOpen(target){
			console.log("ModalOpen");
			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';
			}
		},
		//메뉴바
		testClick(){
			const menuList = document.querySelectorAll('.main_menu .is-sub');
	for(const menu of menuList){
		menu.addEventListener('click', (e)=> {
			if(e.target.classList.contains('menu_target') || e.target.classList.contains('menu_btn')){
				const menuListCheck = e.target.parentNode;
				if(menuListCheck.classList.contains('is-current')){
					menuListCheck.classList.remove('is-current');
				} else {
					for(const other of menuList){
						other.classList.remove('is-current');
					}	
					menuListCheck.classList.add('is-current');
				}
			}
		})
	}
		}
	}
}
</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>