<template>
    <div class="tasks">
        <van-image class="bg" width="100%" :src="registerBg" fit="scale-down" />
        <div class="box">
            <div class="title">帮好友助力获得白名单权限</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: '手机号码格式错误'
                        }
                    ]"
                >
                </van-field>

                <van-field
                    type="digit"
                    name="验证码"
                    placeholder="请输入验证码"
                    v-model="form.code"
                    :maxlength="4"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                >
                    <template #button>
                        <van-button
                            round
                            @click="sendPhone"
                            class="sub-code"
                            size="small"
                            color="#0F0F0F"
                            :disabled="isSend"
                        >
                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <div class="button">
                    <van-button round block native-type="submit" color="#0F0F0F" class="sure"> 立即助力 </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
export default {
    mixins: [phone],
    data() {
        return {
            form: {
                phone: '',
                code: '',
                invitor: '',
                collectionId: ''
            },
            checked: false,
            registerBg: ''
        };
    },
    computed: {
        ...mapState(['productId', 'invitor'])
    },
    mounted() {
        if (this.productId) {
            this.form.collectionId = this.productId;
            this.$http.get('/collection/get/' + this.productId).then(res => {
                this.registerBg = res.registerBg;
            });
        }
        if (this.invitor) {
            this.form.invitor = this.invitor;
        }
    },
    methods: {
        sendPhone() {
            this.$refs.form.validate('手机号码').then(() => {
                this.sendMsg(this.form.phone);
            });
        },
        submit() {
            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.replace('/home');
                    }, 1000);
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        }
    }
};
</script>

<style lang="less" scoped>
.tasks {
    background-color: #181818;
    position: relative;
}
.bg {
    display: block;
}
.box {
    width: calc(100vw - 40px);
    background: #ffffff;
    border-radius: 30px;
    position: absolute;
    top: 268px;
    left: 20px;
    padding-bottom: 14px;
}

.title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 22px;
    text-align: center;
    padding: 16px 0 12px;
}

/deep/.van-form {
    padding: 0 20px;

    .van-field__control {
        background: #f5f7fa;
        border-radius: 22px;
        height: 38px;
        padding: 0 10px 0 20px;
    }
    .van-cell {
        padding: 0;
        &::after {
            content: none;
        }
    }
    .van-cell + .van-cell {
        margin-top: 10px;
    }

    .button {
        margin-top: 16px;
    }

    .sub-code {
        min-width: 98px;
    }
}
</style>
