<template>
    <div :class="bem()">
        <div :class="bem('title')">注册账号</div>
        <div :class="bem('item')">
            <PhoneNumber v-model="vm.form.phone" :countries="vm.countries" />
        </div>

        <div :class="bem('item')">
            <Input v-model="vm.form.verifyCode" maxlength="4" autocomplete="off" placeholder="输入短信中的验证码"/>
            <Button
                rect
                :class="bem('sms-btn')"
                nativeType="button"
                @click="sendVerifyCode"
                :disabled="!!codePendingRemain"
            >
                {{codePendingRemain ? `${codePendingRemain}秒后获取` : '获取验证码'}}
            </Button>
        </div>
        <div :class="bem('item')">
            <Input
                id="password"
                type="password"
                label="密码"
                v-model="vm.form.password"
                name="new-password"
                autocomplete="off"
                placeholder="输入6-30位密码"
                maxlength="30"
            />
        </div>

        <Button
            type="primary"
            size="large"
            :class="bem('submit')"
            @click="onRegister"
            nativeType="submit"
            :disabled="loading">
            {{ loading ? '注册中...' : '注册账号'}}
        </Button>

        <div :class="bem('footer')">
            <span :class="bem('links')">已有账号？<Button type="text" @click="vm.switchType('phone')">去登录</Button></span>
        </div>

    </div>
</template>
<script>
import Button from '../Button';
import Tips from '../Tips';
import PhoneNumber from './PhoneNumber';
import Input from '../Input';
import { componentMixin, createComponentName } from '../_utils/component';
import guestUser from '../guestUser';

export default {
    name: createComponentName('auth-register'),
    components: { Button, PhoneNumber, Input },
    mixins: [componentMixin],
    inject: ['vm'],
    data() {
        return {
            loading: false,
            codePendingRemain: null,
        };
    },
    beforeDestroy() {
        clearTimeout(this.codePendingTimer);
    },
    methods: {
        async onRegister() {
            if (this.loading) return;

            this.loading = true;

            const guest = await guestUser.login();
            const XGuestToken = guest.guest_finger && guest.guest_finger !== '' ? {
                'X-Guest-Token': guest.guest_finger
            } : {};

            this.vm.requestUms('register', this.vm.form, XGuestToken).then(() => {
                Tips('注册成功，现在去登录吧');
                this.vm.switchType('login');
                this.loading = false;
                this.vm.$emit('success', {
                    action: 'register',
                    type: 'mobile',
                    phone: this.vm.form.phone.number,
                });
            }).catch(error => {
                this.loading = false;
                Tips(error);
                this.vm.$emit('error', {
                    action: 'register',
                    type: 'mobile'
                });
            });
        },
        async sendVerifyCode() {
            try {
                await this.vm.requestUms('sendVerifyCode', { ...this.vm.form, type: 'register' });
                this.startCheckCodePending();
            }
            catch (error) {
                Tips(error);
            }
        },
        startCheckCodePending() {
            const check = () => {
                this.codePendingRemain -= 1;

                if (this.codePendingRemain <= 0) {
                    this.codePendingRemain = null;

                    return;
                }

                this.codePendingTimer = setTimeout(check, 1000);
            };

            clearTimeout(this.codePendingTimer);

            this.codePendingTimer = setTimeout(check, 1000);
            this.codePendingRemain = 60;
        },
    }
};
</script>
<style lang="less">
@import '../_styles/base.less';

@auth-register: ~'@{prefix}-auth-register';

.@{auth-register} {
    line-height: 1.2;

    & &__title {
        color: #000;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 24px;
    }

    & &__item {
        display: flex;
    }

    & &__item + &__item {
        margin-top: @margin-sm;
    }

    & &__sms-btn {
        width: 100px;
        height: 45px;
        background: #ececec;
        color: #424242;
        flex: 0 0 auto;
        font-weight: 400;
        border: none;
        padding: 0;
        font-size: 14px;
        margin-left: 15px;
    }

    & &__sms-btn:hover {
        &:hover {
            background: #ccc;
            color: #111;
        }
    }

    & &__submit {
        margin-top: 24px;
        width: 100%;
        height: 45px;
    }

    & &__links {
        color: #A9A9A9;

        .@{button} {
            color: #0076FB;
        }
    }

    & &__footer {
        position: absolute;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        bottom: 0;
        left: 0;
        height:48px;
        width: 100%;
        padding: 0 @margin-lg;
        background:linear-gradient(216deg,rgba(249,250,251,1) 0%,rgba(248,250,251,1) 57%,rgba(240,242,246,1) 100%);
    }
}
</style>
