<template>
  <div class="">
    <div class="card mb-3">
              <div class="card-body">
                <div class="pb-2">
                  <h2 class="card-title text-center pb-0 fs-4"><img :src="logo" alt="로고"></h2>
                </div>

                <div class="row g-3 needs-validation" :class="{ 'was-validated': formSubmitted }">
                  <div class="box">
                    <label for="yourUsername" class="form-label"><img :src="idIcon" alt="아이디 아이콘">아이디</label>
                    <div class="input-group has-validation">
                      <input v-model="userInfo.loginId" ref="loginId" type="text" name="username" class="form-control sm" id="yourUsername" placeholder="아이디를 입력하세요." required>
                    </div>
                  </div>

                  <div class="box">
                    <label for="yourPassword" class="form-label"><img :src="passwordIcon" alt="비밀번호 아이콘">비밀번호</label>
                    <input v-model="userInfo.password" ref="password" type="password" name="password" class="form-control sm" id="yourPassword" placeholder="비밀번호를 입력하세요." required>
                  </div>

                  <div class="box">
                    <button class="btn md" type="submit" @click="handleLogin"><img :src="loginIcon" alt="로그인 아이콘">로그인</button>
                  </div>
                </div>
              </div>
            </div>
  </div>
</template>

<script>
import { loginProc } from "../../../resources/api/login.js";

export default {
  data() {
    return {
      // 임시 로그인 정보
      idIcon: "/client/resources/img/id.png",
      passwordIcon: "/client/resources/img/password.png",
      loginIcon: "/client/resources/img/loginicon.png",
      formSubmitted: false,
      logo: "/client/resources/img/logo.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
      // id: "admin", // 임시 아이디
      // password: "1234", // 임시 비밀번호
      userInfo:{
        loginId: "",
        password: "",
      }
    };
  },
  methods: {
    // 유효성 검사 함수
    validation(){
      if(this.userInfo.loginId === ""){
        alert("아이디를 입력해주세요.");
        this.$refs.loginId.focus();
        return false;
      }
      if(this.userInfo.password === ""){
        alert("비밀번호를 입력해주세요.");
        this.$refs.password.focus();
        return false;
      }
      return true;
    },
    // 로그인 처리 함수
    async handleLogin() {
      if(!this.validation()) {
        return; // 유효성 검사 실패 시 함수 종료
      }
      try {
        const response = await loginProc(this.userInfo);
        if(response.status === 200) {
          const newToken = response.headers.authorization;
          // 토큰 저장
          this.$store.commit('setAuthorization', newToken);
          // 사용자 정보 저장
          /** jwt토큰 디코딩 **/
          const base64String = newToken.split('.')[1];
          const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');
          const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => {
              return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join(''));
          const user = JSON.parse(jsonPayload);
          this.$store.commit("setUserInfo", {
            loginId: user.loginId,
            userId: user.userId,
            userNm: user.userNm,
            roles: Array.isArray(user.roles) ? user.roles.map(r => r.authority) : [],
          });
          // 로그인 성공 시
          localStorage.setItem('isLoggedIn', 'true');
          // 메인 페이지로 이동
          this.$router.push('/');
        } else {
          alert("로그인에 실패했습니다. 아이디와 비밀번호를 확인해주세요.");
        }
          
      } catch (err) {
        alert(err.response.data.message);
      }
    },
  },
};
</script>
