<template>
  <div class="login-page page">
    <div class="flex-column justify-center align-center content">
      <div class="login-wrap pd30 border">
        <div v-show="pageStep === 0">
        <div class="page-title text-ct mb40">LOGIN</div>
        <div class="input-group field mb20">
          <input type="text" name="" id="id" class="full-input login-input" placeholder="아이디를 입력하세요"
          v-model="member['lgnId']" />
          <label for="id" class="login-label">아이디</label>
        </div>
        <div class="input-group field mb20">
          <input type="password" name="" id="pw" class="full-input login-input" placeholder="비밀번호를 입력하세요"
          v-model="member['mbrEncptPswd']" @keyup.enter="fnValid" />
          <label for="pw" class="login-label">비밀번호</label>
        </div>
        <div class="find-zone flex justify-end align-center mb40">
          <p class="detail-text pl10 pr10" @click="goFindInfo('id')">아이디 찾기
            <!-- <router-link :to="{ name: 'FindInfo', params: { type: 'id' } }">아이디 찾기</router-link> -->
          </p>
          <p class="detail-text pl10 pr0" @click="goFindInfo('pw')">비밀번호 찾기
            <!-- <router-link :to="{ name: 'FindInfo', params: { type: 'password' } }">비밀번호 찾기</router-link> -->
          </p>
        </div>
        <button class="large-btn darkg-btn fw-bold" title="로그인" @click="fnValid">
          로그인
        </button>
      </div>
      <div v-show="pageStep > 0">
        <div>
            <h1 v-show="pageStep < 3" class="text-ct mb30 page-title">OTP 설정</h1>
            <h1 v-show="pageStep > 2" class="text-ct mb30 page-title">OTP 인증</h1>
        </div>
        <progressBar v-if="pageStep !== 4" :steps="steps" :pageNumber="pageStep" />

        <!-- 1,2 step은 최초에만 -->
        <div v-show="pageStep === 1">
            <p class="mt30 mb30">본인 인증을 위해 Google OTP 인증이 필요합니다. OTP 인증을 위해 아래 링크를 따라 휴대폰에 인증 앱을 설치해주세요.</p>
            <div class="flex jusitfy-start align-center mb30 login-step">
                <div class="gd-6 pl0">
                    <a href="https://play.google.com/store/search?q=google+authenticator&c=apps" class="otp-img"><img src="../../../resources/img/google.png" alt="구글스토어 아이콘" ></a>
                </div>
                <div class="gd-6 pr0">
                    <a href="https://apps.apple.com/kr/app/google-authenticator/id388497605" class="otp-img"><img src="../../../resources/img/appstore.png" alt="앱스토어 아이콘" ></a>
                </div>
            </div>
            <button class="large-btn blue-btn ml0" title="다음" @click="OTPgenerate()">다음</button>
        </div>
        <div v-show="pageStep === 2">
            <div class="mt30 mb15">
                <p class="mb10">설치한 Google OTP 앱으로 아래 QR코드를 스캔하세요 또는 앱에서 수동으로 하단 코드를 직접 입력하세요.</p>
                <div class="qr-zone mb10 text-ct" id="qrcode">
                    <img :src="qrCodeSrc" alt="QR Code" class="inline" />
                </div>
                <input type="text" class="full-input mb10" :value="otp.encodedKey" disabled>
            </div>
            <button class="large-btn blue-btn ml0" title="다음" @click="stepGo(3)">다음</button>
        </div>
        <div v-show="pageStep === 3">
            <div class="mt30 mb15">
                <input type="text" class="full-input mb10" placeholder="인증코드를 입력해주세요." v-model="otp.onetimePw" @keyup.enter="fnAdminLogin()">
            </div>
            <button class="large-btn blue-btn ml0" title="인증" @click="fnAdminLogin()" >인증</button>
        </div>
        <div v-show="pageStep === 4">
            <div class="mt30 mb15">
                <input type="text" class="full-input mb10" placeholder="인증코드를 입력해주세요." v-model="otp.onetimePw" @keyup.enter="fnAdminLogin()">
            </div>
            <button class="large-btn blue-btn ml0" title="인증" @click="fnAdminLogin()" >인증</button>
        </div>
      </div>
      </div>

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

<script>
import { useStore } from "vuex";
import store from "../AppStore";
import { loginProc , findMngrYnByMbr , generateOTP , loginOTP } from '../../../resources/api/login';
import queryParams from "../../../resources/js/queryParams";
import ProgressBar from "../../component/progressbar/ProgressBar.vue";
import VueCookies from "vue-cookies";

export default {
  mixins: [queryParams],
  data: () => {
    return {
      pageStep : 0,
      member: {
        lgnId: null,
        mbrEncptPswd: null,
      },

      steps: ["앱설치", "코드등록", "인증"],
      store: useStore(),
      isAdminPage: false,

      otp: {
        lgnId : null,
        onetimePw: null,
        encodedKey: null,
        qrCodeImage: null,
      },
      redirect: store.state.redirect || null,
    };
  },
  methods: {
    loginValidCheck : function () {
      if(this.member.lgnId == null || this.member.lgnId.trim() == ''){
        alert("아이디를 입력해주세요.")
        document.getElementById("id").focus()
        return false
      }

      if(this.member.mbrEncptPswd == null || this.member.mbrEncptPswd.trim() == ''){
        alert("비밀번호를 입력해주세요.")
        document.getElementById("pw").focus()
        return false
      }
      return true
    },

    
    //아이디비밀번호 유효성 & 관리자 여부 확인
    async fnValid() {
      const vm = this;
      if(!this.loginValidCheck()) return

      try {
        const res = await findMngrYnByMbr(this.member);
        if(res.status == 200){        
          //관리자의 경우
          if(res.data.data.mngrYn == "Y") {
            //OTP유무 확인
            this.$isEmpty(res.data.data.otpUnqNo)? vm.pageStep = 1 : vm.pageStep = 4;
          } else {
            //일반사용자 로그인 처리
            this.fnLogin()
          }
        } 
      }  catch(error) {
        alert(error.response.data.message);
      }
    },
    
    async fnLogin() {
      try {
        const res = await loginProc(this.member);      
        if(res.status == 200) {
          store.commit("setAuthorization", res.headers.authorization);
         // store.commit("setRefresh", res.headers.refresh);
        // this.$cookies.set('refresh',res.headers.refresh)
         
          /** jwt토큰 복호화 **/
          const base64String = store.state.authorization.split('.')[1];

          const base64 = base64String.replace(/-/g, '+').replace(/_/g, '/');          
          const mbr = JSON.parse(decodeURIComponent(window.atob(base64).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join('')));
        
          store.commit("setMbrId", mbr.mbrId);
          store.commit("setMbrNm", mbr.mbrEncptFlnm);
          store.commit("setAuthrtNm", mbr.authrtNm);
          store.commit("setAuthrtTypeLvl", mbr.authrtTypeLvl);
          store.commit('setRoles', mbr.roles);
          /** jwt토큰 복호화 **/
          // const url = this.restoreRedirect('redirect');
          // !this.$isEmpty(url) ? this.$router.push({path: url}) : this.$router.push({path: '/'})
          // const isAdmin = mbr.roles.some(role => role.authority === 'ROLE_ADMIN');
          // isAdmin? this.$router.push({path:'/kdm/main.page'}) : this.$router.push({path:'/'});
          
          const isAdmin = mbr.roles.some(role => role.authority === 'ROLE_ADMIN');
          if(this.redirect){
            if (isAdmin && this.redirect.indexOf('/kdm') !== -1) {
              store.commit('setRedirect', null)
              this.$router.push({ path: '/kdm/main.page' });  
              return;
            }
          }
          this.$router.push({path: '/'});
        }
      } catch(error) {
         console.log('error',error)
      }
    },

    // 관리자 OTP 발급
    async OTPgenerate() {
      try {
         const res = await generateOTP(this.member)
         if(res.status == 200) {
          this.otp = res.data.data;
          this.stepGo(2)
         }
      } catch(error) {  
        alert(error.response.data.message);
      }
    },

    otpLoginValid : function() {
      if(this.otp.onetimePw == null || this.otp.onetimePw.trim() == '') {
        alert("2차비밀번호를 입력해주세요.")
        return false
      }

      if(!this.otp.onetimePw.match(/^\d{6}$/)) {
        alert("2차비밀번호는 6자리 숫자만 입력 가능합니다.");
        return false;
      }
      
      return true
    },

    // //관리자 OTP 로그인
    async fnAdminLogin() {
      if(!this.otpLoginValid()) return
      this.otp.lgnId = this.member.lgnId
      try {
        const res = await loginOTP(this.otp)
        if(res.status == 200){
            this.fnLogin()
          // this.$router.push({path: '/' });
        }
      } catch(error) {
        alert(error.response.data.message);
      }
    },

    goFindInfo: function(type) {
      this.$router.push({ path: "/cmmn/findInfo.page", query: { 'type': type }});
    },

    stepGo: function (num) {
      this.pageStep = num
    },
  },
  watch: {

  },
  computed: {
    qrCodeSrc() {
        return `data:image/png;base64,${this.otp.qrCodeImage}`;
    },
  },
  components: {
    ProgressBar : ProgressBar
  },
  created() {},
  mounted() {
  },
};
</script>

