<script setup lang="ts">
    import { getCodeInfoApi, registerNowApi } from 'http/api/register/index'
    import { ElMessage } from 'element-plus'
    const router = useRouter()
    // const userStore = useStore()

    /* 注册参数 */
    const registerForm = ref({
        /* 用户手机号 */
        phonenumber: '',
        /* 登录账号 */
        username: '',
        /* 登录密码 */
        password: '',
        /* 验证码 */
        code: '',
        /* 确认密码 */
        checkPass: ''
    })

    /* 获取验证码 */
    const getCodeInfo = () => {
        registerFormRef.value.validateField('phonenumber', async (valid: any) => {
            if (valid) {
                const res: any = await getCodeInfoApi(registerForm.value.phonenumber)
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: res.msg,
                        type: 'success'
                    })
                    reduceSeconds()
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.msg,
                        type: 'info'
                    })
                }
            }
        })
    }

    /* 立即注册按钮 */
    const handlerRegisterNow = () => {
        registerFormRef.value.validate(async (valid: any) => {
            if (valid) {
                const res: any = await registerNowApi(registerForm.value)
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '注册成功',
                        type: 'success'
                    })
                    router.push('/login')
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.msg,
                        type: 'success'
                    })
                }
            }
        })
    }

    /* 手机号码校验规则 */
    const validatePhone = (rule: any, value: any, callback: any) => {
        // let phone = value.replace(/\s/g, '')
        let regexpPhone = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
        if (value === '') {
            callback(new Error('手机号码不能为空'))
        } else if (!regexpPhone.test(value)) {
            callback(new Error('手机号码输入不合法'))
        } else {
            callback()
        }
    }
    /* 确认密码校验 */
    const validatePass2 = (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请确认密码'))
        } else if (value !== registerForm.value.password) {
            callback(new Error('两次密码不一致，请确定'))
        } else {
            callback()
        }
    }
    /* 校验规则 */
    const registerRules = ref({
        phonenumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
    })

    const registerFormRef: any = ref(null)

    /* 获取验证码按钮禁用 */
    const getCodeBtnDisabled = ref(false)

    /* 定义倒计时的定时器 */
    const secondsTimer: any = ref(null)

    /* 剩余秒数 */
    const residuSeconds: any = ref(60)

    /* 开启一个定时器 */
    const reduceSeconds = () => {
        getCodeBtnDisabled.value = true
        secondsTimer.value = setInterval(() => {
            if (residuSeconds.value === 0) {
                clearInterval(secondsTimer.value)
                secondsTimer.value = null
                residuSeconds.value = 60
                getCodeBtnDisabled.value = false
                return
            } else {
                residuSeconds.value--
            }
        }, 1000)
    }

    onBeforeUnmount(() => {
        if (secondsTimer.value) {
            secondsTimer.value = null
        }
    })
</script>

<template>
    <!-- 注册页面 -->
    <div class="register-container">
        <div class="register-form">
            <h3>机具租赁共享平台</h3>

            <div class="register-container-box">
                <div class="register-type">用户注册</div>

                <el-form
                    label-position="top"
                    :model="registerForm"
                    :rules="registerRules"
                    ref="registerFormRef">
                    <el-form-item label="用户手机号" prop="phonenumber">
                        <el-input
                            v-model.trim="registerForm.phonenumber"
                            placeholder="输入手机号"
                            clearable />
                    </el-form-item>
                    <el-form-item label="登录帐号" prop="username">
                        <el-input
                            v-model.trim="registerForm.username"
                            placeholder="登录帐号"
                            clearable
                            type="text" />
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input
                            v-model.trim="registerForm.password"
                            placeholder="登录密码"
                            clearable
                            type="password"
                            show-password />
                    </el-form-item>

                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input
                            v-model.trim="registerForm.checkPass"
                            placeholder="确认密码"
                            clearable
                            type="password"
                            show-password />
                    </el-form-item>
                    <el-row>
                        <el-form-item label="验证码" class="get-code" prop="code">
                            <el-col :span="16">
                                <div>
                                    <el-input
                                        v-model.trime="registerForm.code"
                                        placeholder="验证码"
                                        clearable
                                        type="text" />
                                </div>
                            </el-col>

                            <el-col :span="8">
                                <div style="width: 100%">
                                    <el-button
                                        style="width: calc(100% - 8px); margin-left: 8px"
                                        type="primary"
                                        @click="getCodeInfo"
                                        :disabled="getCodeBtnDisabled">
                                        {{
                                            getCodeBtnDisabled
                                                ? `${residuSeconds}秒后重新发送`
                                                : '获取验证码'
                                        }}
                                    </el-button>
                                </div>
                            </el-col>
                        </el-form-item>
                    </el-row>

                    <el-form-item>
                        <el-button type="primary" @click="handlerRegisterNow" style="width: 100%">
                            立 即 注 册
                        </el-button>
                    </el-form-item>
                    <el-form-item class="forget-password">
                        <span>已有账号？</span>
                        <a @click="$router.push('/login')">去登录 &gt;</a>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
    .register-container {
        height: 100vh;
        background-color: #125ab6;
        display: flex;
        align-items: center;
        justify-content: center;
        .register-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;
            }

            .register-container-box {
                flex: 1;
                display: flex;
                flex-direction: column;
                background-color: #c7dff4;
                border-radius: 5px;
                .register-type {
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    margin-bottom: 10px;
                    // 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;

                        a {
                            color: #3498db;
                            cursor: pointer;
                        }
                    }

                    .get-code {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
