<template>
    <div class="login">
        <div class="login_title">
            <span class="title">注册账号</span>
            <span style="color: #c8c9cc; cursor: pointer" @click="$router.push({ name: 'home' })">返回首页</span>
        </div>
        <div class="form">
            <el-form :model="formData" :rules="rules" label-width="80px" label-position="right" ref="form">
                <el-form-item prop="mail">
                    <el-input v-model="formData.mail" placeholder="请输入邮箱" class="ipt"></el-input>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名" class="ipt"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="formData.password"
                        placeholder="请输入8-16位密码，建议数字、大小写字母组合"
                        type="password"
                        class="ipt2"
                        autocomplete="off"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item prop="passwordagain">
                    <el-input
                        v-model="formData.passwordagain"
                        placeholder="请再次输入密码"
                        type="password"
                        class="ipt2"
                        autocomplete="off"
                    >
                    </el-input>
                </el-form-item>
                <!-- <div class="agree"><span>平台注册协议</span></div> -->
                <!-- <div class="agree"> -->
                <el-form-item prop="agree" class="agree">
                    <el-checkbox v-model="formData.agree"> </el-checkbox>
                    <span>点击同意</span>
                    <span class="protocol" @click="dialogVisible = true">平台注册协议</span>
                </el-form-item>
                <!-- </div> -->
            </el-form>

            <div class="login_btn">
                <el-button class="btn1" :loading="loading" @click="goRegister">立即注册</el-button>
                <button class="btn2" @click="$router.push({ name: 'login' })">已有账号，立即登录</button>
            </div>
        </div>
        <el-dialog title="平台注册协议" :visible.sync="dialogVisible" width="500px">
            <!-- <span>平台注册协议</span> -->
            <protocol></protocol>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import protocol from '../../components/protocol';
export default {
    components: { protocol },
    name: 'register',
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (value !== this.formData.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        var validateCode = (rule, value, callback) => {
            if (value !== this.code) {
                callback(new Error('验证码错误'));
            } else {
                callback();
            }
        };

        return {
            time: 0,
            code: '',
            formData: {
                phone: '',
                password: ''
            },
            dialogVisible: false,
            rules: {
                mail: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur'
                    },
                    {
                        pattern: /(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z]).{8,30}/,
                        message: '密码必须包含大小写字母和数字，且长度为8-30',
                        trigger: 'blur'
                    }
                ],
                passwordagain: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ],
                agree: [{ required: true, message: '请阅读平台协议', trigger: 'change' }]
            },
            loading: false
        };
    },
    methods: {
        checkTime() {
            this.time = 60;
            let i = setInterval(() => {
                this.time--;
                if (this.time === 0) {
                    clearInterval(i);
                }
            }, 1000);
        },
        goRegister() {
            this.onSave();
        },
        authCode() {
            this.checkTime();
            // this.$message({
            //     message: '发送验证码成功',
            //     type: 'success'
            // });
            // this.$http
            //     .get('/sms/sendVerify', {
            //         phone: this.formData.phone
            //     })
            //     .then(res => {
            //         this.code = res;
            //     })
            //     .catch(e => {
            //         console.log(e);
            //         this.$message.error(e.error);
            //     });
        },
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            this.loading = true;
            this.$http
                .post('/auth/registerByMail', {
                    mail: this.formData.mail,
                    username: this.formData.username,
                    password: this.formData.password
                })
                .then(res => {
                    this.loading = false;
                    this.$message.success('注册成功');
                    this.$router.replace('/login');
                })
                .catch(e => {
                    console.log(e);
                    this.loading = false;
                    this.$message.error(e.error || '注册失败，请稍后再试');
                });
        }
    }
};
</script>
<style lang="less" scoped>
.login {
    // height: 700px;
    background: white;
    padding-top: 20px;

    .login_title {
        margin: auto;
        width: 900px;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid #bf1616;
        background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        padding-left: 20px;

        .title {
            color: #bf1616;
            font-weight: 500;
            margin-right: 20px;
            padding-right: 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
    .form {
        margin-top: 30px;

        .el-form {
            position: relative;
            margin: auto !important;
            width: 450px;
        }
        .el-input {
            height: 44px;
            width: 300px;
            + .el-input {
                margin-top: 20px;
            }
        }

        .code {
            position: absolute;
            top: 66px;
            right: 80px;

            width: 100px;
            height: 34px;
            background: #c8c9cc;
            border-radius: 4px;
            height: 34px;
            font-size: 13px;
            color: #ffffff;
            &.active {
                background: #bf1616;
            }
        }
        /deep/.el-input--small .el-input__inner {
            height: 44px;
            border: none;
            border-radius: 0px;
            border-bottom: 1px solid #f2f3f5;
            padding: 0px;
        }
        .agree {
            height: 22px;

            font-size: 13px;
            color: #939599;
            .el-checkbox {
                margin-right: 5px;
            }
            .protocol {
                color: #bf1616;
                cursor: pointer;
            }
        }
        .login_btn {
            margin: auto;
            width: 300px;
            margin-top: 40px;
        }
        button {
            width: 300px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn1 {
            background: #bf1616;
            color: #fff;
            margin-bottom: 20px;
            border: none;
        }
        .btn2 {
            background: #ffffff;
            color: #bf1616;
            border: 1px solid #bf1616;
        }
        .ipt {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon01.png');
            }
        }
        .ipt2 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon02.png');
            }
        }
        .ipt3 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon03.png');
            }
        }
    }
}
</style>
