<template>
    <div class="login">
        <div class="login-main">
            <div class="login-footer"></div>
            <div class="login-content">
                <div class="login-content-title">数据分析系统</div>
                <div class="login-content-form">
                    <a-form :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed">
                        <a-form-item>
                            <a-input v-model:value="formState.username" placeholder="Username">
                                <template #prefix>
                                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input v-model:value="formState.passwordBase64" type="password" placeholder="Password">
                                <template #prefix>
                                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button type="primary" html-type="submit" :loading="loading"
                                :disabled="formState.username === '' || formState.passwordBase64 === ''">
                                登录
                            </a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
import router from '@/router/index';
import { login } from '@/api/user.js';
import { message } from 'ant-design-vue';
import { useStore } from '@/store/index.js';
const userStore = useStore();
const loading = ref(false);
const formState = reactive({
    username: '',
    passwordBase64: ''
});
const handleFinish = async (values) => {
    let params = { username: formState.username, passwordBase64: btoa(formState.passwordBase64) };
    loading.value = true;
    try {
        userStore.getUserInfo(params);
    } catch (error) {
        loading.value = false;
    }


    loading.value = false;

    console.log(values);
};
const handleFinishFailed = errors => {
    console.log(errors);
};

</script>
<style lang="less">
.login {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url("@/assets/img/login/login_bg.png");
    background-size: 100% 100%;
    margin: 0;
    padding: 0;

    .login-main {
        width: 800px;
        height: 100%;
        position: relative;
        margin: auto;

        .login-footer {
            width: 450px;
            height: 450px;
            top: calc(13% + 350px);
            margin-left: calc(50% - 225px);
            position: absolute;
            background: url("@/assets/img/login/01-1.png");
            background-size: 100% 100%;
        }

        .login-content {
            width: 500px;
            height: 500px;
            position: absolute;
            background: url("@/assets/img/login/02.png");
            background-size: 100% 100%;
            left: calc(50% - 250px);
            top: 10%;

            .login-content-title {
                color: #ffffff;
                position: absolute;
                top: 22%;
                font-size: 30px;
                font-weight: 500;
                left: 34%;
                background-color: #12698640;
            }

            .login-content-form {
                width: 340px;
                height: 225px;
                padding: 40px 50px 50px 50px;
                position: absolute;
                background: url("@/assets/img/login/03.png");
                background-size: 100% 100%;
                left: 17.5%;
                top: 31%;
                text-align: center;

                .anticon-user,
                .anticon-lock {
                    color: #1d2d46 !important;
                }
            }
        }
    }
}
</style>
    