<template>
       <div class="container">

<section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">

        <div class="d-flex justify-content-center py-4">
          <a href="index.html" class="logo d-flex align-items-center w-auto">
            <span class="d-none d-lg-block"> <img :src="logo" alt=""></span>
          </a>
        </div><!-- End Logo -->

        <div class="card mb-3">

          <div class="card-body">

            <div class=" pb-2">
              <h5 class="card-title text-center pb-0 fs-4">회원가입</h5>
            </div>

            <form class="row g-3 needs-validation "  :class="{ 'was-validated': formSubmitted }" @submit.prevent="handleRegister" novalidate>
              <div class="col-12">
                <label for="yourName" class="form-label">이름</label>
                <input  v-model="name" type="text" name="name" class="form-control" id="yourName" required>
                <div class="invalid-feedback">이름을 입력해주세요.</div>
              </div>
              <div class="col-12">
            <label for="yourdept" class="form-label">부서</label>
            <select v-model="dept" id="inputState" class="form-select">
              <option selected></option>
              <option></option>
            </select>
          </div>
          <div class="col-12">
                <label for="yourlevel" class="form-label">직급</label>
                <input  v-model="level" type="text" name="name" class="form-control" id="yourlevel" required>
                <div class="invalid-feedback">직급을 입력해주세요.</div>
              </div>
              <div class="col-12">
                <label for="youremail" class="form-label">Email</label>
                <div class="input-group has-validation">
                  <span class="input-group-text" id="inputGroupPrepend">@</span>
                  <input  v-model="email" type="text" name="username" class="form-control" id="youremail" required>
                  <div class="invalid-feedback">회사 이메일을 입력해주세요.</div>
                </div>
              </div>

              <div class="col-12">
                <label for="yourPassword" class="form-label">비밀번호</label>
                <input  v-model="password" type="password" name="password" class="form-control" id="yourPassword" required>
                <div class="invalid-feedback">비밀번호를 입력해주세요.</div>
              </div>

              <div class="col-12">
                <div class="form-check">
                  <input v-model="acceptTerms"  class="form-check-input" name="terms" type="checkbox" value="" id="acceptTerms" required>
                  <label class="form-check-label" for="acceptTerms">이용약관에 동의합니다.</label>
                  <div class="invalid-feedback">이용약관에 동의하셔야 합니다.</div>
                </div>
              </div>
              <div class="col-12">
                <button class="btn btn-primary w-100"  type="submit">계정 생성</button>
              </div>
              <div class="col-12">
                <p class="small mb-0">이미 계정이 있으신가요?  <router-link to="Login">로그인</router-link></p>
              </div>
            </form>

          </div>
        </div>

      </div>
    </div>
  </div>

</section>

</div>
  </template>
  
  <script>
    export default {
  data() {
    return {
      name: '',
      email: '',
      password: '',
      dept: '',
      level: '',
      acceptTerms: false,
      formSubmitted: false,
      logo: "/client/resources/img/logo_t.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
    };
  },
  methods: {
    handleRegister() {
      this.formSubmitted = true; 
      // 이메일과 비밀번호가 빈 값이 아니어야 한다
      if (this.email && this.password && this.name && this.acceptTerms && this.dept && this.level) {
        // 로컬 스토리지에 회원가입 정보 저장
        const userData = {
          name: this.name,
          email: this.email,
          password: this.password,
        };
        localStorage.setItem("user", JSON.stringify(userData));  // 로컬 스토리지에 데이터 저장
        
        // 계정 생성 후 로그인 페이지로 리디렉션
        this.$router.push("/login");
      } else {
      }
    },
  },
};
  </script>
  
  <style scoped>

  </style>
  