<template>
  <div class="container">

        <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">
              <h2 class="card-title text-center pb-0 fs-4">마이페이지</h2>
            </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 value="" disabled selected>부서를 선택하세요</option>
      <option v-for="(item, index) in DeptData" :key="index" :value="item.deptNM">
        {{ item.deptNM }}
      </option>
            </select>
          </div>
          <div class="col-12">
                <label for="yourlevel" class="form-label">직급</label>
                <select v-model="level" id="yourlevel" class="form-select">
                  <option value="" disabled selected>직급을 선택하세요</option>
              <option value="level0">계약직(인턴)</option>
              <option value="level1">사원</option>
              <option value="level2">주임</option>
              <option value="level3">대리</option>
              <option value="level4">과장</option>
            </select>
              </div>
              <div class="col-12">
                <label for="youremail" class="form-label">Email</label>
                <div class="input-group has-validation">
                  <input  v-model="email" type="text" name="username" class="form-control" id="youremail" required readonly>
                  <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>
            </form>

          </div>
        </div>
  </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.includes('@')) {
    alert('이메일은 @를 포함해야 합니다.');
    return; // Stop further processing if email is invalid
  }

  console.log('Email:', this.email);
  console.log('Password:', this.password);
  console.log('Name:', this.name);
  console.log('Accept Terms:', this.acceptTerms);
      if (this.email && this.password && this.name && this.acceptTerms && this.dept && this.level ) {
        // 로컬 스토리지에 회원가입 정보 저장
        const userData = {
          name: this.name,
          email: this.email,
          password: this.password,
          dept: this.dept,
          level: this.level,
        };

        console.log('User Data to be saved:', userData);
        try {
      localStorage.setItem("UserInfo", JSON.stringify(userData));
      alert('회원가입이 완료되었습니다!');
      
      // Redirect to login page
      this.$router.push("/login");
    } catch (error) {
      console.error("Error saving to localStorage:", error);
      alert("회원가입 중 오류가 발생했습니다.");
    }
      } else {
        alert("모든 필드를 입력해주세요.");
      }
    },
  },
  created() {
    // 로컬스토리지에서 데이터 불러오기
    const storedData = localStorage.getItem('DeptData');
    if (storedData) {
      this.DeptData = JSON.parse(storedData);
    }
  },
};
  </script>
  
  <style scoped>

  </style>
  