<template>
    <div class="login-container">
        <div class="loginRoot">
            <div class="login">
                <div class="leftLogo">
                    <div class="left-logo-container">
                        <img :src="systemLogo" />
                        <div class="shortBar"></div>
                        <div class="welcome-message">Welcome to log in and use this system platform</div>
                        <div class="welcome-label">欢迎登录</div>
                    </div>
                </div>
                <div class="rightForm">
                    <el-form ref="forgetRef" :model="forgetForm" :rules="forgetRules" class="login-form">
                        <div class="title-container">
                            <div class="title-label">{{ title }}</div>
                        </div>
                        <el-form-item prop="userName">
                            <el-input v-model="forgetForm.userName" type="text" size="large" class="custom-input"
                                auto-complete="off" placeholder="账号">
                            </el-input>
                        </el-form-item>
                        <!-- <el-form-item prop="email">
                            <el-input v-model="forgetForm.email" type="email" size="large" class="custom-input"
                                auto-complete="off" placeholder="邮箱">
                            </el-input>
                        </el-form-item> -->
                        <div style="float: right;margin: 55px 0 35px;">
                            <router-link to="/login" custom v-slot="{ href }">
                                <a class="routeLinkText" :href="href">返回登录</a>
                            </router-link>
                        </div>
                        <el-form-item style="width:100%;">
                            <el-button :loading="loading" size="large" type="primary" class="myLoginBtn"
                                style="width:100%;" @click.prevent="handleForgetPassword">
                                <span v-if="!loading">确 认</span>
                                <span v-else>提 交 中...</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!--  底部  -->
            <!-- <div class="el-login-footer">
        <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
      </div> -->
        </div>
    </div>
</template>

<script setup>
import systemLogo from '@/assets/images/systemLogo.png'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from "element-plus"
import { resetPwd } from "@/api/system/user"

const title = '忘记密码'

const router = useRouter()
const { proxy } = getCurrentInstance()

const forgetForm = ref({
    userName: undefined,
    email: undefined
})

const forgetRules = {
    userName: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
    email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
}
const loading = ref(false)

const handleForgetPassword = () => {
    proxy.$refs.forgetRef.validate(valid => {
        if (valid) {
            loading.value = true
            resetPwd(forgetForm.value).then(res => {
                if (res.code == 200) {
                    ElMessageBox.alert(
                        `<font color='red'>
              恭喜您，您的密码重置成功！<br>  
            </font>`,
                        "系统提示",
                        {
                            dangerouslyUseHTMLString: true,
                            type: "success",
                        }
                    ).then(() => {
                        router.push('/login')
                    }).catch(() => {
                        loading.value = false
                    })
                }
            }).catch(() => {
                loading.value = false
            })
        }
    })
}
</script>

<style lang='scss' scoped>
.login-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/login-background.png");
    background-size: cover;
}

.loginRoot {
    position: absolute;
    top: calc(50% - 290px);
    left: calc(50% - 500px);
    z-index: 2;
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1000px;
    height: 580px;
    border-radius: 6px;
}

.leftLogo {
    width: 500px;
    height: 580px;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中（可选） */
    justify-content: center;
    background-image: url("../assets/images/login-leftBg.png");
    background-size: cover;


    .left-logo-container {
        width: 302px;
        height: 154px;
        margin: 0 auto;
    }

    .shortBar {
        width: 40px;
        height: 6px;
        border-radius: 3px 3px 3px 3px;
        background: #ffffff;
        margin: 10px auto 24px auto;
    }

    .welcome-message {
        margin: 0 auto;
        font-family: Arial;
        font-weight: 400;
        width: 203px;
        height: 29px;
        font-size: 14px;
        text-align: center;
        color: #FFFFFF;
    }

    .welcome-label {
        padding-top: 12px;
        margin: 0 auto;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        width: 66px;
        height: 14px;
        font-size: 14px;
        text-align: center;
        color: #FFFFFF;
        letter-spacing: 1px;
    }
}

.rightForm {
    width: 500px;
    height: 580px;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    background: #ffffff;
}


.title-label {
    font-family: Alibaba PuHuiTi;
    font-weight: 500;
    height: 32px;
    font-size: 32px;
    text-align: center;
    color: #3B3B3B;
    letter-spacing: 2px;
    display: inline-flex;
}

.title-container {
    margin: 0px auto 70px auto;
    text-align: center;
}

:deep(.el-form-item--default) {
    margin-bottom: 20px;
}

:deep(.el-form-item__error) {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
}

:deep(.el-input .el-input__password) {
    font-size: 18px;
}

// 输入框样式
.custom-input {
    width: 310px;
    height: 50px;
    border-left: 5px solid #1A75E6;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #DCDCDC;
    letter-spacing: 1px;

    /* Vue 3 方式 */
    :deep(.el-input__wrapper.is-focus) {
        box-shadow: 0 0 0 1px #A6C9FF inset;
        background: #ffffff;
        font-family: Arial;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        letter-spacing: 1px;
    }

    :deep(.el-input__wrapper:hover) {
        box-shadow: 0 0 0 1px #A6C9FF inset;
        background: #ffffff;
        font-family: Arial;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        letter-spacing: 1px;
    }

    :deep(.el-input__wrapper) {
        background: #f7f7f7;
        border-radius: 0px;
    }
}

.captcha-input {
    :deep(.el-input__inner) {
        position: absolute;
        left: 15px;
        width: 170px;
    }
}

.routeLinkText {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #0090FF;
    cursor: pointer;
}

.login-form {
    width: 310px;
    height: 416px;
    margin: 0 auto;
    z-index: 1;

    .el-input {
        height: 50px;
        --el-input-border-color: transparent;

        input {
            height: 50px;
        }
    }

    .input-icon {
        height: 39px;
        width: 18px;
        margin-left: 0px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    width: 33%;
    height: 40px;
    position: absolute;
    right: 22px;
    z-index: 2;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.myLoginBtn {
    width: 310px;
    height: 50px;
    margin-top: 6px;
    border-radius: 25px 25px 25px 25px;
    background: #1a75e6;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    color: #FFFFFF;
    letter-spacing: 1px;
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.login-code-img {
    height: 40px;
    padding-left: 12px;
}
</style>
