<template>
    <div class="login-wrap">
        <div class="login-box">
            <div class="login-logo">
                <img src="../../../resources/img/content/login_logo.svg" alt="로고">
            </div>
            <div class="login-form">
                <div>
                    <div class="mb10">
                        <input type="text" id="loginId" class="form-control md" v-model="loginId" required
                            placeholder="아이디를 입력하세요">
                    </div>
                    <div class="mb20">
                        <input type="password" id="password" class="form-control md" v-model="password" required
                            placeholder="비밀번호를 입력하세요">
                    </div>
                </div>
                <div class="error-message mb20" v-if="!isValid">
                    <p><img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> 아이디 또는 비밀번호가
                        잘못되었습니다.</p>
                    <p><img src="../../../resources/img/component/common/ico_invalid_error_20.svg" alt=""> 아이디와 비밀번호를
                        정확히 입력해주세요.</p>
                </div>
                <button class="btn lg primary login-btn mb30" @click="loginProc"><span
                        class="icon-label lbtn">로그인</span></button>
            </div>
            <div class="layout center justify-center links">
                <router-link :to="{ path: '/find.page', query: { type: 'id' } }">아이디 찾기</router-link>
                <router-link :to="{ path: '/find.page', query: { type: 'pw' } }">비밀번호 찾기</router-link>
                <router-link to="/join.page">회원가입 찾기</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { loginProc } from '../../../resources/api/auth';
import AppStore from '../AppStore';
export default {
    data() {
        return {
            isValid: true,
            loginId: null,
            password: null,
        };
    },
    methods: {
        async loginProc() {
            const vm = this;
            // 사용자 아이디와 비밀번호 입력값 검증
            if (!vm.loginId || vm.loginId.trim() === '') {
                return;
            }
            if (!vm.password || vm.password.trim() === '') {
                return;
            }

            const loginData = {
                loginId : vm.loginId,
                password : vm.password
            }

            try {
                const res = await loginProc(loginData);
                if (res.status === 200) {
                    const accessToken = res.data.accessToken;
                    AppStore.commit('setAuthorization', accessToken);

                    const base64String = AppStore.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 mem = JSON.parse(jsonPayload);
                    AppStore.commit("setMemId", mem.memberId);
                    AppStore.commit('setMemNm', mem.memberName);
                    AppStore.commit('setMemLoginId', mem.loginId);

                    this.$router.push({ path: "/" });
                }
            } catch (error) {
            }
        },
    },
    watch: {},
    computed: {},
    components: {},
    created() { },
    mounted() { },
    beforeUnmount() { },
};

</script>