<template>
    <div class="login">
        <LoginForm @login="login">
        </LoginForm>
    </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, reactive, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import md5 from "js-md5";
import { Api, LoginForm } from "noob-mengyxu";

const { state, commit, dispatch } = useStore();
const router = useRouter();

onBeforeMount(() => {
    state.size.headHeight = '0px';
    state.size.asideWidth = '0px';
    commit("initSize");
});

const login = user => {
    const param = JSON.parse(JSON.stringify(user));
    param.password = md5(param.password);
    Api.pub.login(param).then(rsp => {
        if (rsp) {
            state.size.headHeight = state.size.head + 'px';
            state.size.asideWidth = state.size.aside + 'px';
            commit("initSize");
            dispatch("getMenus");
            router.push('/')
        }
    })
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas {
    position: fixed;
    z-index: -1; // background-color: black;
}

.logo {
    width: 300px;
    height: 90px;
}
</style>