<template>
    <div class="login-box">
        <div class="logo">
            <h1>AI 디지털교과서 통합지원센터</h1>
            <p class="sub-logo">관리자단</p>
        </div>
        <div class="id-zone">
            <label for="id">
                <input type="text" name="" ref="mngr_id" id="id" placeholder="ID를 입력하세요." v-model="mngrLogin.mngr_id"
                    @keyup.enter="handleEnterKey">
            </label>
        </div>
        <div class="pw-zone">
            <label for="pw">
                <input type="password" name="" id="pw" placeholder="PASSWORD를 입력하세요." v-model="mngrLogin.mngr_pw"
                    @keyup.enter="handleEnterKey">
            </label>
        </div>

        <button class="blue-btn join-blue-btn " @click="login">
            로그인
        </button>
    </div>
</template>
  
<script>
import axios from 'axios';
import crypto from "crypto-js";
import { useStore } from 'vuex';

export default {
    data() {
        return {
            mngrLogin: {
                mngr_id: null,
                mngr_pw: null
            },
            store: useStore(),
        };
    },
    methods: {
        //로그인
        login: function () {
            let vm = this;
            var iv = this.store.state.key.iv;
            var salt = this.store.state.key.salt;
            var passPhrase = this.store.state.key.ENC_KEY;
            var keySize = 128;
            var iterationCount = 1000;
            var key128Bits100Iterations = crypto.PBKDF2(passPhrase, crypto.enc.Hex.parse(salt), { keySize: keySize / 32, iterations: iterationCount });

            // var encrypted = CryptoJS.AES.encrypt(
            // this.mngrLogin.mngr_id = crypto.AES.encrypt(this.mngrLogin.mngr_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            // this.mngrLogin.mngr_pw = crypto.AES.encrypt(this.mngrLogin.mngr_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            let encryptedMngrId = crypto.AES.encrypt(this.mngrLogin.mngr_id, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();
            let encryptedMngrPw = crypto.AES.encrypt(this.mngrLogin.mngr_pw, key128Bits100Iterations, { iv: crypto.enc.Hex.parse(iv) }).toString();

            var loginData = {
                mngr_id: encryptedMngrId,
                mngr_pw: encryptedMngrPw
            };

            axios({
                
                url: '/managerLogin.json',
                method: 'post',
                validateStatus: function (status) {
                    return status >= 200 && status < 303;
                },
                headers: {
                    'Content-Type': 'application/json; charset=UTF-8'
                },

                data: loginData
            }).then(function (response) {
                if (response.data == true) {
                    vm.$emit("updateIsLogin", true);
                    vm.$router.push({ path: '/adm.page', query: {} });
                } else {
                    alert('로그인 정보를 다시 확인해주세요.');
                    vm.$refs['mngr_id'].focus();
                    vm.mngrLogin.mngr_id = null;
                    vm.mngrLogin.mngr_pw = null;
                }
            }).catch(function (error) {
                console.log("login - error : ", error);
                vm.mngrLogin.mngr_id = null;
                vm.mngrLogin.mngr_pw = null;
            });
        },
        handleEnterKey() {
            this.login();
        },
    },
    watch: {},
    computed: {},
    components: {},
    mounted() {
        console.log("login::::::::::")
    },
};
</script>

