<!-- 忘记密码页面 -->

<template>
    <div class="box">

        <div class="box-content">

            <div class="box-content-title">
                <h2>忘记密码</h2>
                <el-steps style="max-width: 600px" :active="g_progressStatus" align-center>
                    <el-step title="验证身份" />
                    <el-step title="重置密码" />
                    <el-step title="完成修改" />
                </el-steps>
            </div>

            <!-- 忘记密码框 1 -->
            <el-form v-if="g_progressStatus == 1" :model="g_formData" label-position="left" label-width="auto"
                style="max-width: 600px;">

                <el-form-item label="手机号">
                    <el-input v-model="g_formData.mobileNumber" placeholder="请输入手机号" />
                </el-form-item>

                <el-form-item label="验证码">
                    <el-input v-model="g_formData.code" placeholder="请输入验证码" />
                    <el-button type="primary" class="box-content-item-forget-getCode"
                        @click="act_getCode">获取验证码</el-button>
                </el-form-item>

                <el-form-item class="box-content-item-forget">
                    <el-button type="primary" @click="act_nextStep">下一步</el-button>
                </el-form-item>

                <div class="box-content-item-footer">
                    <el-link :underline="false" @click="act_SwitchPage('/login')">返回登录</el-link>
                </div>
            </el-form>

            <!-- 忘记密码框 2 -->
            <el-form v-if="g_progressStatus == 2" :model="g_formData" label-position="left" label-width="auto"
                style="width: 50%;max-width: 500px;">

                <el-form-item label="新密码">
                    <el-input v-model="g_formData.mobileNumber" placeholder="请输入新密码" />
                </el-form-item>

                <el-form-item label="确认新密码">
                    <el-input v-model="g_formData.code" placeholder="请重新输入新密码" />
                </el-form-item>

                <el-form-item class="box-content-item-forget">
                    <el-button type="primary" @click="act_nextStep">下一步</el-button>
                </el-form-item>

                <div class="box-content-item-footer">
                    <el-link :underline="false" @click="act_SwitchPage('/login')">返回登录</el-link>
                </div>
            </el-form>

            <!-- 忘记密码框 3 -->
            <el-form v-if="g_progressStatus == 3" :model="g_formData" label-position="left" label-width="auto"
                style="width: 50%;max-width: 500px;">

                <el-form-item>
                    <svg t="1715773378816" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4274" width="150" height="150">
                        <path
                            d="M511.950005 512.049995m-447.956254 0a447.956254 447.956254 0 1 0 895.912508 0 447.956254 447.956254 0 1 0-895.912508 0Z"
                            fill="#20B759" p-id="4275"></path>
                        <path
                            d="M458.95518 649.636559L289.271751 479.95313c-11.698858-11.698858-30.697002-11.698858-42.39586 0s-11.698858 30.697002 0 42.395859l169.683429 169.68343c11.698858 11.698858 30.697002 11.698858 42.39586 0 11.798848-11.598867 11.798848-30.597012 0-42.39586z"
                            fill="#FFFFFF" p-id="4276"></path>
                        <path
                            d="M777.62406 332.267552c-11.698858-11.698858-30.697002-11.698858-42.39586 0L424.158578 643.437164c-11.698858 11.698858-11.698858 30.697002 0 42.39586s30.697002 11.698858 42.39586 0l311.069622-311.069622c11.798848-11.798848 11.798848-30.796992 0-42.49585z"
                            fill="#FFFFFF" p-id="4277"></path>
                    </svg>
                    <h3>恭喜你，你已成功重置密码</h3>
                </el-form-item>

                <el-form-item class="box-content-item-forget">
                    <el-button type="primary" @click="act_SwitchPage('/login')">完成</el-button>
                </el-form-item>
            </el-form>

        </div>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'




/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取路由对象
const g_route = useRoute() // 解构出当前路由对象的各种属性
const g_router = useRouter() // 解构出路由实例的各种方法
// 进度状态
const g_progressStatus = ref(1)
// 表单数据
const g_formData = reactive({
    name: '', // 用户名
    Email: '', // 邮箱
    password: '', // 密码
    confirmPassword: '', // 确认密码
    mobileNumber: '', // 手机号
    code: '', // 验证码
})



/************************************************
 * 生命周期函数
 ************************************************/
// 挂载完成
onMounted(() => {

})




/************************************************
* 事件处理
* 
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

// 获取验证码
const act_getCode = () => {
    console.log("获取验证码")
}

// 下一步
const act_nextStep = () => {
    console.log("下一步")
    g_progressStatus.value += 1
    // g_router.push("/")
}

// 切换页面
const act_SwitchPage = (page) => {
    g_router.push(page)
}




/************************************************
 * 获取数据
 * 
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/




</script>

<style scoped>
.box {
    flex: 1;
    width: 100%;
    min-height: calc(100% - 66px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-content {
    min-width: 360px;
    width: 60%;
    max-width: 900px;
    height: 70%;
    max-height: 530px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 8px;
    overflow: auto;
    border: 1px solid rgb(223 223 223);
    box-shadow: 0px 0px 15px rgb(215 215 215);
}

.box-content-item-footer {
    text-align: center;
}


.box-content-item-forget-getCode {
    margin-left: 10px;
}

.box-content-title {
    padding: 32px 0;
    text-align: center;
}

::v-deep .el-step {
    margin: 0px 6px;
}

::v-deep .el-input {
    flex: 1;
}

::v-deep .el-form-item__content {
    display: flex;
    justify-content: center;
}

/* 移动端样式 */
@media screen and (max-width: 700px) {
    .box-content {
        min-width: auto;
        width: auto;
        max-width: auto;
        height: auto;
        max-height: auto;
        padding: 0;
        border-radius: 8px;
        overflow: auto;
        border: none;
        box-shadow: 0 0 0 rgb(0, 0, 0, 0);
    }
}
</style>