<script setup lang="ts">
    import { loginApi } from 'http/api/myInfo'
    import { ElMessage } from 'element-plus'
    import { useRouter } from 'vue-router'
    import { useStore } from 'store/main'
    const userStore = useStore()
    const router = useRouter()
    const loginForm = ref({
        username: '',
        password: ''
    })

    const handlerLogin = async () => {
        const res: any = await loginApi(loginForm.value)
        console.log( '登录成功**',res)
        if (res.code === 200) {
            ElMessage({
                showClose: true,
                message: '登录成功',
                type: 'success'
            })
        }
        userStore.setToken(res.data.access_token)
        // 跳转登录页面
        router.push('/')
    }
</script>

<template>
    <div class="login-container">
        <div class="login-form">
            <h3>机具租赁共享平台</h3>

            <div class="form-container">
                <div class="login-type">
                    <div class="active">账号登录</div>
                    <div>手机登录</div>
                </div>

                <el-form>
                    <el-form-item>
                        <el-input v-model.trim="loginForm.username" placeholder="账号" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-input
                            v-model.trim="loginForm.password"
                            placeholder="密码"
                            clearable
                            type="password"
                            show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handlerLogin">登 录</el-button>
                    </el-form-item>
                    <el-form-item class="forget-password">
                        <a href="">忘记密码</a>
                        <a href="">立即注册</a>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    .login-container {
        height: 100vh;
        background-color: #125ab6;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("../assets/img/loginBg.png") ;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        .login-form {
            width: 500px;
            height: 360px;
            display: flex;
            flex-direction: column;

            h3 {
                color: #fff;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                margin-bottom: 30px;
            }

            .form-container {
                flex: 1;
                display: flex;
                flex-direction: column;
                background-color: #c7dff4;
                border-radius: 5px;
                .login-type {
                    height: 40px;
                    margin-bottom: 40px;
                    display: flex;
                    color: #333;
                    div {
                        flex: 1;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        &:hover {
                            cursor: pointer;
                        }
                    }

                    .active {
                        color: #3498db;
                        border-bottom: 1px solid #3498db;
                    }
                }
                .el-form {
                    padding: 0 50px;

                    .el-input {
                        height: 37px;
                    }
                    .el-button {
                        width: 100%;
                        height: 37px;
                    }

                    .forget-password {
                        margin-bottom: 0;
                    }

                    .forget-password .el-form-item__content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
</style>
