<template>
    <div class="login-page page" :class="{ 'loading-blur': isLoading }" :style="{ 'cursor': isLoading ? 'wait' : 'default' }">
        <div>
            <div class="admin-background-img">
                <p>
                    콘텐츠 관리 시스템에 오신 것을 환영합니다.<br />
                    원활한 관리와 운영을 위해 로그인하세요.
                </p>
            </div>
            <div class="login-wrap" v-if="!loginStep1 && !loginStep2">
                <div class="login">
                    <div :class="{
                        'login-title': true,
                        'user-login': !isAdminPage,
                    }">
                        LOGIN
                    </div>
                    <div class="form-group">
                        <label for="id" class="login-label">아이디</label>
                        <input type="text" name="" id="id" class="form-control md" placeholder="아이디를 입력하세요"
                            v-model="member['lgnId']" />
                    </div>
                    <div class="form-group">
                        <label for="pw" class="login-label">비밀번호</label>
                        <input type="password" name="" id="pw" class="form-control md" placeholder="비밀번호를 입력하세요"
                            v-model="member['pswd']" @keydown.enter="fnLogin" />
                    </div>
                    <button class="btn md main user-btn" v-if="!isAdminPage" @click="fnLogin" @keydown.enter="fnLogin">
                        로그인
                    </button>
                    <button class="btn md main" v-else @click="fnLogin" @keydown.enter="fnLogin">
                        로그인
                    </button>

                    <div class="input-group" v-if="!isAdminPage">
                        <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
                        <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
                    </div>
                </div>
            </div>
            <div class="login-wrap" v-else-if="loginStep1 && !loginStep2">
                <div>
                    <p>인증코드 입력</p>
                </div>
                <div>
                    <p>{{memberInfo.email}}로 전송된 6자리 인증코드를 입력하세요.</p>
                    <input type="text" class="form-control md" ref="code" @input="inputCode" v-model="memberInfo.code" maxlength="6" placeholder="인증코드를 입력하세요."/>
                </div>
                <div class="btn-wrap">
                    <button class="btn sm main" @click="fnCheck">인증코드 확인</button>
                </div>
                <div>
                    <p>인증코드를 받지 못하셨나요?</p>
                    <button class="btn sm tertiary" @click="fnResend">인증코드 다시받기</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { useStore } from "vuex";
import store from "../AppStore";
import { loginProc } from "../../../resources/api/login";
import { check2ndAuthProc, sendAuthEmailProc } from "../../../resources/api/email";
import queryParams from "../../../resources/js/queryParams";

export default {
    mixins: [queryParams],
    data: () => {
        return {
            isLoading: false,
            member: {
                lgnId: null,
                pswd: null,
                lgnReqPage: 'A'
            },
            store: useStore(),
            isAdminPage: false,

            memberInfo: {
                email: '', // 이메일
                code: '', // 인증코드
            },

            // 인증 절차
            loginStep1: false, // 1차 인증
        };
    },
    methods: {
        init() {
            this.member = {
                lgnId: null,
                pswd: null,
                lgnReqPage: 'A'
            };
            this.memberInfo = {
                mbrId: '',
                email: '',
                code: '',
            };
            this.loginStep1 = false;
        },
        checkAdminPage() {
            if (
                this.restoreRedirect("redirect") &&
                this.restoreRedirect("redirect").includes("/adm/")
            ) {
                this.isAdminPage = true;
            } else {
                this.isAdminPage = false;
            }
        },
        async fnLogin() {
            this.isLoading = true;
            try {
                const res = await loginProc(this.member);
                if (res.status == 200) {
                    this.memberInfo = res.data; // 인증코드 전송을 위한 이메일 정보 저장
                    this.loginStep1 = true; // 1차 인증 성공
                }
            } catch (error) {
                const errorData = error.response.data;
                if (errorData.message != null && errorData.message != "") {
                    alert(error.response.data.message);
                } else {
                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                }
            } finally {
                this.isLoading = false;
            }
        },
        moveSearchId() {
            this.$router.push({
                path: this.$filters.ctxPath("/resetPswd.page"),
                query: {
                    tab: "id",
                },
            });
        },
        moveResetPswd() {
            this.$router.push({
                path: this.$filters.ctxPath("/resetPswd.page"),
                query: {
                    tab: "pw",
                },
            });
        },

        // 인증코드 입력
        inputCode(event) {
            const input = event.target.value.replace(/[^0-9]/g, '');
            this.code = input;
        },

        // 인증코드 확인
        async fnCheck() {
            const res = await check2ndAuthProc(this.memberInfo);
            if (res.status == 200) {
                const loginType = res.headers['login-type']; // 세션/토큰 로그인 구분
                if (loginType === 'J') {
                    // JWT 방식
                    store.commit("setAuthorization", res.headers.authorization);
                    store.commit("setLoginMode", "J");
                    localStorage.setItem("loginMode", "J");
                    const base64String = store.state.authorization.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 mbr = JSON.parse(jsonPayload);
                    store.commit("setMbrId", mbr.mbrId);
                    store.commit("setMbrNm", mbr.mbrNm);
                    store.commit("setRoles", mbr.roles);
                } else if (loginType === 'S') {
                    store.commit("setLoginMode", "S");
                    localStorage.setItem("loginMode", "S");
                    const mbr = res.data;
                    store.commit("setAuthorization", null);
                    store.commit("setMbrId", mbr.mbrId);
                    store.commit("setMbrNm", mbr.mbrNm);
                    const roles = mbr.roles.map(r => ({ authority: r.authrtCd }));
                    store.commit("setRoles", roles);
                } else {
                    alert("알 수 없는 로그인 방식입니다.");
                    return;
                }
                const isAdmin = store.state.roles.some(role => role.authority === "ROLE_ADMIN");
                let url = this.restoreRedirect("redirect");
                if (url != null && url != "") {
                    const ctx = store.state.contextPath;
                    if (ctx !== "") {
                        // redirect 값에서 Context Path 추가
                        url = this.$filters.ctxPath(url);
                    } else {
                        // redirect 값에서 기존 Context Path 제거
                        url = url.replace(/^\/[^\/]+/, ""); // 첫 번째 '/' 이후의 경로만 남김
                    }
                    const routeExists = this.$router.getRoutes().some(route => route.path === url);

                    if (url == this.$filters.ctxPath("/searchId.page") || url == this.$filters.ctxPath("/resetPswd.page")) {
                        this.$router.push({ path: this.$filters.ctxPath("/main.page") });
                    } else if (routeExists) {
                        this.$router.push({ path: url });
                    } else {
                        this.$router.push({
                            path: isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/")
                        });
                    }
                } else {
                    this.$router.push({
                        path: isAdmin ? this.$filters.ctxPath("/adm/main.page") : this.$filters.ctxPath("/")
                    });
                }
            } else {
                const errorData = error.response.data;
                if (errorData.message != null && errorData.message != "") {
                    alert(error.response.data.message);
                } else {
                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                }
            }
        },

        // 인증코드 재전송
        async fnResend() {
            this.isLoading = true;
            try {
                const res = await sendAuthEmailProc(this.memberInfo);
                if (res.status == 200) {
                    alert(res.data.message);
                }
            } catch (error) {
                const errorData = error.response.data;
                if (errorData.message != null && errorData.message != "") {
                    alert(error.response.data.message);
                } else {
                    alert("에러가 발생했습니다.\n관리자에게 문의해주세요.");
                }
            } finally {
                this.isLoading = false;
            }
        },
    },
    watch: {},
    computed: {},
    components: {},
    created() {
        this.init();
        this.checkAdminPage();
    },
    mounted() { },
};
</script>

<style scoped>
.loading-blur {
    pointer-events: none;
    opacity: 0.4;
    filter: grayscale(20%) blur(1px);
}
</style>
