<template>
    <div class="login">
        <div class="tabs">
            <div class="tab active">用户注册</div>
        </div>

        <van-form @submit="submit" ref="form">
            <van-field
                type="tel"
                name="手机号码"
                placeholder="请输入手机号码"
                v-model="form.phone"
                :maxlength="11"
                :rules="[
                    { required: true, message: '请输入手机号码' },
                    {
                        pattern: phonePattern,
                        message: '手机号码格式错误'
                    }
                ]"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
                </template>
            </van-field>

            <van-field
                type="digit"
                name="验证码"
                placeholder="请输入验证码"
                v-model="form.code"
                :maxlength="4"
                :rules="[{ required: true, message: '请输入验证码' }]"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
                </template>
                <template #button>
                    <van-button
                        @click="sendPhone"
                        class="sub-code"
                        size="small"
                        plain
                        :disabled="isSend"
                        type="primary"
                    >
                        {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                    </van-button>
                </template>
            </van-field>

            <van-field
                type="password"
                name="密码"
                placeholder="请输入密码"
                v-model="form.password"
                :rules="[{ required: true, message: '请填写密码' }]"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
                </template>
            </van-field>

            <van-field
                type="password"
                name="密码"
                placeholder="请再次输入密码"
                v-model="form.password2"
                :rules="[
                    { required: true, message: '请再次填写密码' },
                    {
                        validator: val => {
                            if (val == form.password) {
                                return true;
                            } else {
                                return false;
                            }
                        },
                        message: '两次密码输入不一致'
                    }
                ]"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
                </template>
            </van-field>

            <van-field
                type="text"
                name="邀请码"
                placeholder="请输入邀请码"
                v-model="form.inviteCode"
                :disabled="!!$store.state.inviteCode"
            >
                <template #left-icon>
                    <img :src="require('@assets/svgs/login_icon_yao qingma.svg')" class="icon" />
                </template>
            </van-field>

            <div class="button">
                <van-button
                    round
                    block
                    native-type="submit"
                    :color="`linear-gradient(to right, ${$colors.prim}, ${$colors.warn})`"
                    class="sure"
                    >登录</van-button
                >
                <van-button class="del" round block plain @click="$router.replace('/login')"
                    >已有账号，立即登陆</van-button
                >
            </div>
        </van-form>

        <div class="xieyi">
            <van-checkbox v-model="checked">
                已阅读并同意
                <span @click.stop="$router.push('/agreement?page=service')"> 《用户服务协议》</span>
                和
                <span @click.stop="$router.push('/agreement')"> 《平台隐私协议》</span>
            </van-checkbox>
        </div>
    </div>
</template>

<script>
import phone from '../../mixins/phone';
export default {
    mixins: [phone],
    data() {
        return {
            active: 'phone',
            form: {
                phone: '',
                password: '',
                password2: '',
                code: '',
                inviteCode: this.$store.state.inviteCode || ''
            },
            checked: false
        };
    },
    methods: {
        sendPhone() {
            this.$refs.form.validate('手机号码').then(() => {
                this.sendMsg(this.form.phone);
            });
        },
        submit() {
            if (!this.checked) {
                this.$toast('请先阅读并同意隐私政策');
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/auth/phoneRegister', this.form)
                .then(res => {
                    localStorage.setItem('nineToken', res);
                    return this.$store.dispatch('getUserInfo');
                })
                .then(() => {
                    this.$toast.success('注册成功');
                    setTimeout(() => {
                        this.$router.back();
                    }, 1500);
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    padding: 40px 50px 100px;
}

.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .tab {
        font-size: 18px;
        color: #c8c9cc;
        line-height: 25px;

        &.active {
            font-size: 24px;
            font-weight: bold;
            color: @text0;
            line-height: 33px;
        }
    }
}

.icon {
    display: block;
    margin-top: 12px;
}
/deep/ .van-form {
    margin-top: 28px;
    .van-cell {
        padding: 0px 0;

        .van-field__left-icon {
            margin-right: 8px;
        }
    }

    .van-cell + .van-cell {
        margin-top: 20px;
    }
    .van-field__body {
        height: 44px;
        align-items: center;
    }
}
.button {
    margin-top: 60px;

    .del {
        margin-top: 20px;
        border-color: @text0;
    }

    .sure {
        color: @bg !important;
    }

    .van-button {
        font-weight: bold;
    }
}

.sub-code {
    padding-right: 0;
    border-width: 0;
}
.xieyi {
    .flex();
    justify-content: center;
    margin-top: 50px;
    font-size: @font1;

    span {
        color: @prim;
    }
}

/deep/.van-checkbox__icon--checked .van-icon {
    background: linear-gradient(135deg, @prim 0%, @warn 100%);
    border-width: 0;
}
</style>
