<template>
    <div class="container" style="margin-left: 7px">
        <div class="top">
            <div v-if="this.$route.query.identification == 1" class="box">
                <div></div>
                <div class="title">重置密码</div>
                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
            </div>
            <div v-else class="box">
                <div></div>
                <div class="title">注册账号</div>
                <img @click="all('/Home')" src="../assets/icon／close@3x.png" alt="" />
            </div>
        </div>
        <div class="con">
            <el-form :model="form" ref="form" :rules="rules" label-width="0">
                <el-form-item
                    prop="phone"
                    :rules="{
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }"
                >
                    <span class="el-icon-user"></span>
                    <el-select style="width: 90px" v-model="form.region" placeholder="请选择">
                        <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                    <el-input v-model="form.phone" style="width: 210px" placeholder="请输入手机号"> </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <span class="icon">
                        <img src="../assets/login_icon_yanzhengma@3x.png" alt="" />
                    </span>
                    <div>
                        <el-input style="width: 300px" v-model="form.code" placeholder="请输入短信验证码">
                            <div v-if="!form.phone" class="code" type="primary" :underline="false" slot="suffix">
                                发送验证码
                            </div>
                            <div
                                v-if="form.phone"
                                @click="send"
                                class="code1"
                                type="primary"
                                :underline="false"
                                slot="suffix"
                            >
                                {{ time === 0 ? '发送验证码' : `重新发送${time}s` }}
                            </div>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <span class="el-icon-unlock"></span>
                    <el-input
                        style="width: 300px"
                        v-model="form.password"
                        type="password"
                        autocomplete="off"
                        placeholder="请输入8-16位密码，建议数字、大小写字母组合"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="pass">
                    <span class="el-icon-unlock"></span>
                    <el-input
                        style="width: 300px"
                        v-model="form.pass"
                        type="password"
                        autocomplete="off"
                        placeholder="请再次输入密码"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template v-if="this.$route.query.identification != 1">
                <el-checkbox v-model="checked">
                    <el-link style="margin-bottom: 2px" @click.prevent="$refs.argeement.flag = true"
                        >点击同意注册协议</el-link
                    >
                </el-checkbox>
            </template>
            <div class="sub-btn" style="width: 300px" v-if="this.$route.query.identification == 1">
                <el-button type="primary" class="btn-block" @click="password">确定</el-button>
                <el-button
                    style="background: #f2f3f5; color: #292c33"
                    type="info"
                    class="btn-block"
                    @click="all('/Login')"
                    >想起密码，立即登录</el-button
                >
            </div>

            <div class="sub-btn" style="width: 300px" v-else>
                <el-button type="primary" class="btn-block" @click="doRegister">立即注册</el-button>
                <el-button
                    style="background: #f2f3f5; color: #292c33"
                    type="info"
                    class="btn-block"
                    @click="all('/Login')"
                    >已有账号</el-button
                >
            </div>
        </div>
        <agreement ref="argeement"></agreement>
    </div>
</template>

<script>
import Agreement from '../components/popup/Agreement.vue';
export default {
    components: { Agreement },
    data() {
        return {
            show: false,
            identification: 2,
            form: {
                region: '0'
            },
            checked: false,
            time: 0,
            rules: {
                password: [{ min: 8, max: 16, message: '密码长度在 8 到 16 个字符', trigger: 'blur' }],
                pass: [
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.form.password) {
                                callback(new Error('两次密码输入不一致'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    },
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ]
            },
            list: [{ id: '0', name: 'CH +86' }]
        };
    },
    methods: {
        send() {
            this.sendCode(this.form.phone);
        },
        password() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$http
                        .get('/sms/verify', {
                            phone: this.form.phone,
                            code: this.form.code
                        })
                        .then(() => {
                            this.$http
                                .post('/user/forgotPassword', {
                                    phone: this.form.phone,
                                    password: this.form.password
                                })
                                .then(res => {
                                    localStorage.setItem('webToken', res);
                                    this.$message.warning('修改成功');
                                    return this.$store.dispatch('getUserInfo');
                                })
                                .then(() => {
                                    this.$router.replace('/');
                                })
                                .catch(e => {
                                    this.$message.error(e.error);
                                });
                        })
                        .catch(e => {
                            this.$message.error(e.error);
                        });
                }
            });
        },
        doRegister() {
            if (this.checked == false) {
                this.$message.warning('请点击同意注册协议');
                return;
            }
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$http
                        .get('/sms/verify', {
                            phone: this.form.phone,
                            code: this.form.code
                        })
                        .then(() => {
                            this.$http
                                .post('/auth/register', {
                                    phone: this.form.phone,
                                    password: this.form.password,
                                    code: this.form.code
                                })
                                .then(res => {
                                    localStorage.setItem('webToken', res);
                                    this.$message.warning('注册成功');
                                    this.$store.dispatch('getUserInfo');
                                    this.$router.push('/registration');
                                })
                                .catch(e => {
                                    this.$message.error(e.error);
                                });
                        })
                        .catch(e => {
                            this.$message.error(e.error);
                        });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background: #ffffff !important;
    margin-bottom: -20px;
    // margin-left: 2px;
}
/deep/ .el-checkbox {
    margin-left: -129px;
}
.el-form {
    /deep/ .el-input {
        .el-input__inner {
            border-width: 0px;
            border-bottom: 1px solid #f2f3f5;
            padding: 0 0 0;
            height: 50px;
            background: none;
            line-height: 50px;
            margin-left: 10px;
        }

        .el-input__prefix {
            color: #292c33;
            font-size: 18px;
        }

        .el-input-group__append {
            background-color: transparent;
            border-width: 0;
        }
    }
    .el-form-item {
        margin-bottom: 20px;
    }
}
/deep/ .el-form-item__content {
    display: flex;
    justify-content: center;
}
/deep/ .el-checkbox__inner {
    border-radius: 50%;
}
/deep/ .el-checkbox__label {
    font-size: 13px;
}
/deep/ .el-input__prefix {
    .el-input__icon {
        color: orange;
    }
}
/deep/ .el-form-item__error {
    top: 50px;
    left: 43.5%;
}
.code {
    width: 100px;
    line-height: 40px;
    background: #c8c9cc;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: -6px;
    text-align: center;
    color: #ffffff;
}
.code1 {
    width: 100px;
    line-height: 40px;
    background: orange;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: -6px;
    text-align: center;
    color: #ffffff;
}
/deep/.el-dialog--center .el-dialog__body {
    padding: 45px 75px 55px;
}
/deep/ .el-radio {
    margin-right: 120px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #000000;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.top {
    margin-bottom: 50px;
}
.box {
    margin: auto;
    width: 900px;
    height: 60px;
    .flex();
    background: linear-gradient(to right, #ffffff 0%, rgba(520, 226, 200, 0.2) 50%, #ffffff 100%);
    justify-content: space-between;
    box-shadow: -2px 0px 0px 0px #ff8700;
    img {
        width: 24px;
        height: 24px;
        z-index: 1;
    }
    .title {
        font-weight: 500;
        color: #ff8700;
        font-size: 16px;
    }
}
.con {
    text-align: center;
    .el-icon-user {
        color: orange;
        font-size: 24px;
        margin-top: 13px;
    }
    .el-icon-unlock {
        color: orange;
        font-size: 24px;
        margin-top: 12px;
    }
    .icon {
        color: orange;
        img {
            width: 28px;
            height: 28px;
            padding-top: 10px;
        }
    }
    .sub-btn {
        padding-top: 67px;
        text-align: center;
        width: 300px;
        margin: 0 auto;
        .el-button {
            font-size: 12px;
            line-height: 16px;
            border-width: 0px;
            &.el-button--default {
                background-color: @bg;
            }
        }
    }
}
</style>
