<!-- 注册账号页面 -->

<template>
    <div class="box">

        <div class="box-content">

            <div class="box-content-title">
                <h2>填写以下信息完成注册</h2>
            </div>

            <!-- 注册框 -->
            <el-form ref="registerRef" :model="g_registerForm" :rules="g_registerRules" label-position="left"
                label-width="auto" style="max-width: 600px;">

                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="g_registerForm.userName" type="text" size="large" auto-complete="off"
                        placeholder="请输入姓名">
                    </el-input>
                </el-form-item>

                <el-form-item label="账号" prop="phone">
                    <el-input v-model="g_registerForm.phone" type="text" size="large" auto-complete="off"
                        placeholder="请输入手机号">
                    </el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="g_registerForm.password" type="password" size="large" auto-complete="off"
                        placeholder="请输入密码" @keyup.enter="act_handleRegister">
                    </el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="g_registerForm.confirmPassword" type="password" size="large" auto-complete="off"
                        placeholder="请再次输入密码" @keyup.enter="act_handleRegister">
                    </el-input>
                </el-form-item>

                <el-form-item label="验证码" prop="code" v-if="g_captchaEnabled">
                    <el-input size="large" v-model="g_registerForm.code" auto-complete="off" placeholder="验证码"
                        style="width: 63%" @keyup.enter="act_handleRegister">
                    </el-input>
                    <div class="register-code">
                        <img :src="g_codeUrl" @click="get_Code" class="register-code-img" />
                    </div>
                </el-form-item>

                <el-form-item style="width:100%;">
                    <el-button :loading="g_loading" size="large" type="primary" style="width:100%;"
                        @click.prevent="act_handleRegister">
                        <span v-if="!g_loading">注 册</span>
                        <span v-else>注 册 中...</span>
                    </el-button>
                </el-form-item>

                <div class="box-content-item-footer">
                    <el-link :underline="false" @click="act_SwitchPage('/login')">已有账号，点击这里登录</el-link>
                </div>
            </el-form>

        </div>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCodeImg, register } from '@/http/api/pages/User/index'
import { ElMessage, ElMessageBox } from 'element-plus'




/************************************************
 * 全局变量
 * 
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/
// 获取路由对象
const g_route = useRoute() // 解构出当前路由对象的各种属性
const g_router = useRouter() // 解构出路由实例的各种方法
// 表单数据
const g_registerForm = ref({
    userName: "",
    phone: "",
    password: "",
    confirmPassword: "",
    code: "",
    uuid: ""
});
// 验证码
const act_equalToPassword = (rule, value, callback) => {
    if (g_registerForm.value.password !== value) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};
// 表单验证规则
const g_registerRules = {
    userName: [
        { required: true, trigger: "blur", message: "请输入您的姓名" },
    ],
    phone: [
        { required: true, trigger: "blur", message: "请输入您的账号" },
        { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
    ],
    password: [
        { required: true, trigger: "blur", message: "请输入您的密码" },
        { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
    ],
    confirmPassword: [
        { required: true, trigger: "blur", message: "请再次输入您的密码" },
        { required: true, validator: act_equalToPassword, trigger: "blur" }
    ],
    code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
// 验证码
const g_codeUrl = ref("");
// 登录状态
const g_loading = ref(false);
// 验证码开关
const g_captchaEnabled = ref(true);


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




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

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

// 注册
const act_handleRegister = () => {
    g_loading.value = true;
    register({ vrUser: g_registerForm.value }).then(res => {
        g_loading.value = false;
        if (res.code == 200) {
            const phone = g_registerForm.value.phone;
            ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + phone + " 注册成功！</font>", "系统提示", {
                dangerouslyUseHTMLString: true,
                type: "success",
            }).then(() => {
                act_SwitchPage("/login");
            }).catch(() => {
                g_captchaEnabled && get_Code();
            });
        } else {
            ElMessageBox.alert("<font color='red'> " + res.msg + " </font>", "错误提示", {
                dangerouslyUseHTMLString: true,
                type: "warning"
            })
        }
    })
}



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

// 获取验证码
const get_Code = () => {
    getCodeImg().then(res => {
        g_captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (g_captchaEnabled.value) {
            g_codeUrl.value = "data:image/gif;base64," + res.img;
            g_registerForm.value.uuid = res.uuid;
        }
    });
}



</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: 600px;
    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;
}

.register-code {
    margin-left: 10px;
    display: flex;
    align-items: center;
}

::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: 16px;
        border-radius: 8px;
        overflow: auto;
        border: none;
        box-shadow: 0 0 0 rgb(0, 0, 0, 0);
    }
}
</style>