<template>
   <div class="login-container">
      <div class="login-bg">
         <div>
    
  </div>
      </div>
      <div class="login ">
         <div class="logo flex justify-end"><img src="../resources/img/logo.png" alt=""></div>

         <div class="join-box">
            <div class="flex align-center justify-start mb40">
               <img src="../resources/img/icon1.png" alt="" class="mr20">
               <h2>회원가입</h2>
            </div>
            <label class="mr20 title1">
      <input  type="radio" v-model="selectedTab" value="tab1" />
      학생
    </label>
    <label class="mr20 title1">
      <input type="radio" v-model="selectedTab" value="tab2" />
      학부모
    </label>
    <label class="mr20 title1">
      <input type="radio" v-model="selectedTab" value="tab3" />
      선생님
    </label>
            <!-- 학생 -->
            <form @submit.prevent="submitForm" class="login-form mt20" v-if="selectedTab === 'tab1'">
               <div class="mb10 flex justify-between align-center">
                  <p class="title" for="username">아이디</p>
                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
               </div>
               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호 확인</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
                     class="green ml10">비밀번호가 일치 합니다.</em></p>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">이름</p>
                  <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">전화번호</p>
                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
                       >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                  </div>
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학교</p>
                  <div class="search-wrap" style="width: 100%;">
                     <input type="text" placeholder="검색하세요.">
                     <button @click="buttonSearch" type="button" title="위원회 검색">
                        <img src="../resources/img/look_t.png" alt="">
                     </button>
                  </div>
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학교</p>
                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">학년</option>
                     </select>
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">반</option>
                     </select>
                     <select name="" id="" class="data-wrap">
                        <option value="">번호</option>
                     </select>
                     
                  </div>
               </div>
               <div class="flex justify-end align-center mb10">
                  <input type="checkbox" class="ui-checkbox mr10">
                  <p class="title2" for="password">개인정보 수집 동의</p>
               </div>
               <button style="width: 100%;" class="login-btn mt50" type="submit" @click="goToApp"><img src="../resources/img/btn_.png"
                     alt="">
                  <p>로그인</p>
               </button>
            </form>
            <!-- 학부모 -->
            <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab2'">
               <div class="mb10 flex justify-between align-center">
                  <p class="title" for="username">아이디</p>
                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
               </div>
               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호 확인</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
                     class="green ml10">비밀번호가 일치 합니다.</em></p>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">이름</p>
                  <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">전화번호</p>
                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
                       >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                  </div>
               </div>
              <div class="flex justify-between mb20">
                  <p class="title " for="username"><em class="yellow">학생 정보</em></p>
                  <div class="flex justify-end align-center mb10">
                     <img src="../resources/img/img192_78p.png" alt="">
                     <p class="title2 ml10" for="password">자녀 추가하기</p>
                  </div>
              </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학교</p>
                  <div class="search-wrap" style="width: 100%;">
                     <input type="text" placeholder="검색하세요.">
                     <button @click="buttonSearch" type="button" title="위원회 검색">
                        <img src="../resources/img/look_t.png" alt="">
                     </button>
                  </div>
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학생 정보</p>
                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">학년</option>
                     </select>
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">반</option>
                     </select>
                     <select name="" id="" class=" data-wrap">
                        <option value="">번호</option>
                     </select>
                     
                  </div>
               </div>
               <div class="flex justify-end align-center mb10">
                  <input type="checkbox" class="ui-checkbox mr10">
                  <p class="title2" for="password">개인정보 수집 동의</p>
               </div>
               <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png"
                     alt="">
                  <p>로그인</p>
               </button>
            </form>
            <!-- 선생님 -->
            <form @submit.prevent="submitForm" class="login-form mt20" v-else-if="selectedTab === 'tab3'">
               <div class="mb10 flex justify-between align-center">
                  <p class="title" for="username">아이디</p>
                  <input type="text" id="username" v-model="username" placeholder="아이디를 입력하세요.">
               </div>
               <p class="title2 flex align-center mb20 help" for="username"><img src="../resources/img/img193_78p.png"
                     alt=""><em class="green ml10">사용 가능한 아이디입니다.</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img194_78p.png" alt=""><em
                     class="gray ml10">영문, 숫자, 특수문자 3가지를 조합하여 주세요.(6자리 이상)</em></p>
               <div class="flex justify-between align-center mb10">
                  <p class="title" for="password">비밀번호 확인</p>
                  <input type="password" id="password" v-model="password" placeholder="비밀번호를 입력하세요.">
               </div>
               <p class="title2 mb20 flex align-center help" for="username"><img src="../resources/img/img193_78p.png" alt=""><em
                     class="green ml10">비밀번호가 일치 합니다.</em></p>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">이름</p>
                  <input type="text" id="username" v-model="username" placeholder="이름을 입력하세요.">
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">전화번호</p>
                  <div class="flex justify-between align-center" style="width: 100%;"><input style="width: 12rem;" type="text" id="username" v-model="username"
                       >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="username" >
                  </div>
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학교</p>
                  <div class="search-wrap" style="width: 100%;">
                     <input type="text" placeholder="검색하세요.">
                     <button @click="buttonSearch" type="button" title="위원회 검색">
                        <img src="../resources/img/look_t.png" alt="">
                     </button>
                  </div>
               </div>
               <div class="mb30 flex justify-between align-center">
                  <p class="title" for="username">학교</p>
                  <div class="search-wrap flex justify-end mb20" style="width: 100%;">
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">학년</option>
                     </select>
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">반</option>
                     </select>
                     <select name="" id="" class="data-wrap">
                        <option value="">번호</option>
                     </select>
                     
                  </div>
               </div>
               <div class="flex justify-end align-center mb10">
                  <input type="checkbox" class="ui-checkbox mr10">
                  <p class="title2" for="password">개인정보 수집 동의</p>
               </div>
               <button style="width: 100%;" class="login-btn mt50" type="submit" ><img src="../resources/img/btn_.png"
                     alt="">
                  <p>로그인</p>
               </button>
            </form>
         </div>
      </div>
   </div>
   <div v-show="searchOpen" class="popup-wrap">
                <div class="popup-box ">
                    <div class="flex justify-between mb30">
                        <p class="popup-title">학교 검색</p>
                        <button type="button" class="popup-close-btn" @click="closeBtn">
                            <svg-icon type="mdi" :path="mdiWindowClose" class="close-btn"></svg-icon>

                        </button>
                    </div>
                    <div class="mb30 flex justify-between align-center">
                  <p class="title1" for="username" style="width: 12rem;">시/도</p>
                  <div class="search-wrap flex justify-end" style="width: 100%;">
                     <select name="" id="" class="mr10 data-wrap">
                        <option value="">시</option>
                     </select>
                     <select name="" id="" class=" data-wrap">
                        <option value="">도</option>
                     </select>
                  </div>
               </div>
               <div class="mb10 flex justify-between align-center">
                  <p class="title1" for="username" style="width: 12rem;">학교명</p>
                  <div class="search-wrap" style="width: 100%;">
                     <input type="text" placeholder="검색하세요.">
                     <button @click="buttonSearch" type="button" title="위원회 검색">
                        <img src="../resources/img/look_t.png" alt="">
                     </button>
                  </div>
               </div>
               <p class="title2 mb20 flex align-center help" for="username" style="margin-left: 10rem;"><img src="../resources/img/img194_78p.png" alt=""><em
                  class="gray ml10">학교명을 입력 후 찾기 버튼을 클릭하십시오.</em></p>
                    <div class="flex justify-center ">
                        <button type="button" title="글쓰기" class="new-btn mr10">
                            취소
                        </button>
                        <button type="button" title="글쓰기" class="new-btn">
                            등록
                        </button>
                    </div>
                </div>
            </div>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
export default {
   data() {
      return {
         mdiWindowClose: mdiWindowClose,
         username: '',
         password: '',
         selectedTab: 'tab1', // 초기 선택 탭
         showModal: false,
            searchOpen: false,
      }
   },
   methods: {
      submitForm() {
         // 여기에 로그인 로직을 추가하세요.
         console.log('Username:', this.username);
         console.log('Password:', this.password);
      },
      goToApp() {
         this.$router.push('/app.page');
      },
      closeModal() {
            this.showModal = false;
        },
        buttonSearch() {
            this.searchOpen = true;
        },
        closeBtn() {
            this.searchOpen = false;

        },
   },
   components: {
        SvgIcon
    },
}
</script>

<style scoped></style>