<template>
    <Form class="login_form" ref="registerForm" :model="form" :rules="rules" key=""
        @keydown.enter.native="handleSubmit">
        <FormItem prop="phone">
            <Input v-model="form.phone" :maxlength="11" placeholder="手机号"></Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem prop="confirmPassword">
            <Input type="password" v-model="form.confirmPassword" placeholder="请再次输入密码"></Input>
        </FormItem>
        <div class="submit_btn">
            <Button @click="handleSubmit" :disabled="registerDisable" long size="large" :loading="loading">注册</Button>
        </div>
    </Form>
</template>
<script>
import { checkPhone, isEmptyStr } from '@/utils'

export default {
    name: 'Register',
    title: process.env.VUE_APP_TITLE,
    data () {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else {
                if (this.form.confirmPassword !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.registerForm.validateField('confirmPassword')
                }
                callback()
            }
        }
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.form.password) {
                callback(new Error('两次密码输入不一致'))
            } else {
                callback()
            }
        }
        return {
            loading: false,
            // 等待验证码
            waitVerifyCode: false,
            waitTime: 60,
            form: {
                phone: '',
                verifyCode: '',
                verifyKey: '',
                clientType: 0,
                password: '',
                confirmPassword: '',
            },
            verifyCode: '',
            verifyCodeSession: '',
            verifyCodeImage: '',
            agreement: true,
            rules: {
                phone: [
                    {
                        required: true,
                        validator: this.handleValidatePhone.bind(this),
                        trigger: 'blur',
                    },
                ],
                password: [{ validator: validatePass, trigger: 'blur' }],
                confirmPassword: [{ validator: validatePassCheck, trigger: 'blur' }],
            },
        }
    },
    computed: {
        // 控制注册按钮是否可用
        registerDisable () {
            return (
                !this.agreement ||
                Object.keys(this.form).some((key) => {
                    if (key === 'verifyKey') {
                        return false
                    }
                    return isEmptyStr(this.form[key])
                })
            )
        },
    },
    created () {
    },
    methods: {
        handleSubmit () {
            this.$refs['registerForm'].validate((valid) => {
                if (valid) {
                    this.loading = true
                    this.$http.post(`/scrm/v1/user-info/p/${(navigator.language || navigator.userLanguage) === 'zh-CN' ? 'phone' : 'email'}Register`, {
                        ...this.form,
                        email: this.form.phone
                    }).then((response) => {
                        let { code, msg, desc } = response
                        if (code === 1) {
                            this.$Notice.success({
                                title: '注册成功',
                                duration: 0.5,
                                desc,
                                onClose: () => {
                                    // 注册成功后，跳转到登录页
                                    this.$emit('change-password-success')
                                },
                            })
                        } else {
                            this.$Notice.error({
                                title: msg,
                                desc,
                            })
                        }
                    }).finally(() => {
                        this.loading = false
                    })
                }
            })
        },
        /**
         * 校验手机号码
         * @param rule
         * @param value
         * @param callback
         */
        handleValidatePhone (rule, value, callback) {
            if (!value || isEmptyStr(value)) {
                callback(new Error('请输入手机号'))
            } else if (!checkPhone(value)) {
                callback(new Error('请输入正确的手机号'))
            } else {
                callback()
            }
        },
    },
}
</script>
<style lang="less" scoped>
.login_form {
    width: 340px;
    margin-top: 12px;
    /deep/.ivu-form-item {
        margin-bottom: 24px;
        .ivu-form-item-content {
            line-height: inherit;
        }
    }

    /deep/.ivu-input {
        height: 36px;
        border: none;
        padding: 0px;
        color: #222222;
        border-bottom: 1px solid #CCD6E6;
        border-radius: 0;
    }

    /deep/.ivu-form-item-error-tip {
        font-weight: 400;
        font-size: 12px;
        color: #FF4E4E;
        padding-top: 8px;
    }
    /deep/.ivu-input:hover,
    /deep/.ivu-input:focus {
        border: none;
        border-bottom: 1px solid #CCD6E6;
        box-shadow: inherit !important;
        border-color: #CCD6E6 !important;
        border-radius: 0;
    }
    .submit_btn {
        padding-top: 28px;
        .ivu-btn{
            width: 340px;
            height: 48px;
            background: #35E89A;
            border-radius: 10px;
            font-weight: bold;
            color: #FFFFFF;
            font-size: 16px;
            border: none;
        }
        .ivu-btn[disabled],
        .ivu-btn[disabled]:hover {
            opacity: 0.2;
        }

    }
}
</style>
