<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">
          <p v-show="tabView === 'id'">아이디 찾기</p>
          <p v-show="tabView === 'pw'">비밀번호 초기화</p>
        </div>
        <ul class="flex align-center find-tab mb30 pd10">
          <li
            v-for="(tab, idx) in tabList"
            :key="idx"
            @click="showTab(tab.id)"
            :class="{
              'gd-6 pd5 text-ct radius': true,
              'tab-active': tabView === tab.id,
            }"
          >
            {{ tab.name }}
          </li>
        </ul>
        <div class="tab-content">
          <div
            class="flex-column justify-center content"
            v-show="tabView === 'id'"
            style="min-height: 275px"
          >
            <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
            class="flex-column justify-center content"
            v-show="tabView === 'pw'"
            style="min-height: 275px"
          >
            <div>
              <div class="input-group mb20">
                <label for="lgnId" class="login-label">아이디</label>
                <input
                  type="text"
                  name=""
                  id="lgnId"
                  class="full-input login-input"
                  v-model="mbrVO.lgnId"
                  placeholder="아이디를 입력하세요"
                  ref="lgnId"
                />
              </div>
              <div class="input-group mb20">
                <label for="mbrNm" class="login-label">이름</label>
                <input
                  type="text"
                  name=""
                  id="mbrNm"
                  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="fnSearchPswd"
                  ref="eml"
                />
              </div>
              <button
                class="large-btn green-btn point-font fw-bold"
                @click="fnSearchPswd"
              >
                초기화
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  mixins: [validateParams],
  data: () => {
    return {
      tabList: [
        { id: "id", name: "아이디 찾기" },
        { id: "pw", name: "비밀번호 초기화" },
      ],
      mbrVO: {
        lgnId: null,
        mbrNm: null,
        eml: null,
      },
      tabView: "id",
    };
  },
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.tabView = tab;
    }
  },
  methods: {
    // tab conten 보여주기
    showTab(content) {
      this.tabView = content;
    },

    // axios: 아이디 찾기
    async fnSearchId() {
      // 유효성검사
      if (!this.validationId()) {
        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: "/invest/login.page",
          });
        }
      } catch (error) {
        alert(
          "입력한 정보와 일치하는 회원이 존재하지 않습니다.\n다시 시도하세요."
        );
        this.mbrVO = {
          mbrNm: null,
          eml: null,
        };
      }
    },

    // axios: 비밀번호 찾기
    async fnSearchPswd() {
      // 유효성검사
      if (!this.validationPswd()) {
        return;
      }
      // 데이터 세팅
      let data = this.mbrVO;
      // 실행
      try {
        const response = await resetPswdProc(data);
        if (response.status == 200) {
          let isCheck = confirm(
            "비밀번호 초기화에 성공했습니다.\n로그인 페이지로 이동하시겠습니까?"
          );
          if (isCheck) {
            this.$router.push({
              path: "/invest/login.page",
            });
          }
        }
      } catch (error) {
        alert(
          "입력한 정보와 일치하는 회원이 존재하지 않습니다.\n다시 시도하세요."
        );
        this.mbrVO = {
          mbrNm: null,
          eml: null,
        };
      }
    },
    // 아이디찾기 유효성검사
    validationId() {
      // 이름
      if (!this.validateNm(this.mbrVO.mbrNm)) {
        return false;
      }
      // 이메일
      if (!this.validateEmlFull(this.mbrVO.eml)) {
        return false;
      }
      return true;
    },

    // 비밀번호초기화 유효성검사
    validationPswd() {
      // 아이디
      if (!this.validateNm(this.mbrVO.lgnId)) {
        return false;
      }
      // 이름
      if (!this.validateNm(this.mbrVO.mbrNm)) {
        return false;
      }
      // 이메일
      if (!this.validateEmlFull(this.mbrVO.eml)) {
        return false;
      }
      return true;
    },
  },
};
</script>
