<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>
            <!-- 학생 -->
            <div 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="userId" 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="passwordCheck" 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="tel1">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
                  </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="submitForm"><img
                     src="../resources/img/btn_.png" alt="">
                  <p>회원가입</p>
               </button>
            </div>
            <!-- 학부모 -->
            <div 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="userId" 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="passwordCheck" 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="tel1">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
                  </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" @click="submitForm"><img
                     src="../resources/img/btn_.png" alt="">
                  <p>회원가입</p>
               </button>
            </div>
            <!-- 선생님 -->
            <div 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="userId" 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="passwordCheck" 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="tel1">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel2">
                     <p class="title2">-</p><input style="width: 14rem;" type="text" id="username" v-model="tel3">
                  </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="submitForm"><img
                     src="../resources/img/btn_.png" alt="">
                  <p>회원가입</p>
               </button>
            </div>
         </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';
import axios from "axios";

export default {
   data() {
      return {
         mdiWindowClose: mdiWindowClose,
         userId: '',
         username: '',
         password: '',
         passwordCheck: '',
         tel1: '',
         tel2: '',
         tel3: '',
         email: null,
         selectedTab: 'tab1', // 초기 선택 탭
         showModal: false,
         searchOpen: false,
      }
   },
   methods: {
      submitForm() {
         const vm = this;

         const passwordPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{6,}$/;

         if (!vm.userId) {
            alert("로그인 아이디가 비어 있습니다!");
            return;
         }

         if (!vm.password) {
            alert("비밀번호가 비어 있습니다!");
            return;
         }

         if (vm.password !== vm.passwordCheck) {
            alert("비밀번호가 일치하지 않습니다.");
            return;
         }

         if (!passwordPattern.test(vm.password)) {
            alert("비밀번호는 영문, 숫자, 특수문자를 조합하여 6자리 이상이어야 합니다.");
            return;
         }

         if (!vm.username) {
            alert("유저 이름이 비어 있습니다!");
            return;
         }

         if (!vm.tel1 && !vm.tel2 && !vm.tel3) {
            alert("전화번호가 비어 있습니다!");
            return;
         }

         const telno = vm.tel1 + '-' + vm.tel2 + '-' + vm.tel3;

         let auth = null;

         if (vm.selectedTab === 'tab1') {
            auth = 'STUDENT'
         } else if (vm.selectedTab === 'tab2') {
            auth = 'PARENT'
         } else if (vm.selectedTab === 'tab3') {
            auth = 'TEACHER'
         }
         
         axios({
            url: "/auth/insertUser.json",
            method: "post",
            data: {

               loginId: vm.userId,
               password: vm.password,
               userNm: vm.username,
               email: vm.email,
               telno: telno,
               authcd: auth
            },
         }).then(function (response) {
            if(response.data.status === 'success'){
               alert("회원가입에 성공했습니다!")
               vm.goToApp();
            } else {
               alter("입력창을 다시 확인해주세요!")
            }
         }).catch(function (error) {
         });
         
      },
      goToApp() {
         this.$router.push('/Login.page');
      },
      closeModal() {
         this.showModal = false;
      },
      buttonSearch() {
         this.searchOpen = true;
      },
      closeBtn() {
         this.searchOpen = false;

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

<style scoped></style>