<template>
  <div class="login-page page">
    <div class="flex-column justify-center align-center content">
      <div class="login-wrap pd30">
        <div class="login-title text-ct mb40 user-login">아이디 찾기</div>
        <div class="input-group mb20">
          <label for="name" class="login-label">이름</label>
          <input
            type="text"
            name=""
            id="name"
            class="full-input login-input"
            v-model="mbrVO.mbrNm"
            placeholder="이름을 입력하세요"
            ref="mbrNm"
          />
        </div>
        <div class="input-group mb20">
          <label for="eml" class="login-label">이메일</label>
          <input
            type="text"
            name=""
            id="eml"
            class="full-input login-input"
            v-model="mbrVO.eml"
            placeholder="이메일을 입력하세요"
            @keyup.enter="fnSearchId"
            ref="eml"
          />
        </div>
        <button
          class="large-btn green-btn point-font fw-bold"
          @click="fnSearchId"
        >
          조회
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import validateParams from "../../../resources/js/validateParams";
// API
import { searchIdProc } from "../../../resources/api/mbrInfo";

export default {
  mixins: [validateParams],
  data: () => {
    return {
      mbrVO: {},
    };
  },
  methods: {
    // axios: 아이디 찾기
    async fnSearchId() {
      // 유효성검사
      if (!this.validation()) {
        return;
      }
      // 데이터 세팅
      let data = this.mbrVO;
      // 실행
      try {
        const response = await searchIdProc(data);
        let lgnId = response.data.data;
        let isCheck = confirm(
          "아이디 조회에 성공했습니다.\n회원님의 아이디는 " +
            lgnId +
            "입니다.\n로그인 페이지로 이동하시겠습니까?"
        );
        if (isCheck) {
          this.$router.push({
            path: "/login.page",
          });
        }
      } catch (error) {
        alert(
          "입력한 정보와 일치하는 회원이 존재하지 않습니다.\n다시 시도하세요."
        );
        this.mbrVO = {
          mbrNm: null,
          eml: null,
        };
      }
    },
    // 유효성검사
    validation() {
      // 이름
      if (!this.validateNm(this.mbrVO.mbrNm)) {
        return false;
      }
      // 이메일
      if (!this.validateEmlFull(this.mbrVO.eml)) {
        return false;
      }
      return true;
    },
  },
};
</script>
