<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
                :class="bem('sms-btn')"
                @click="sendVerifyCode"
                nativeType="button"
                :disabled="!!codePendingRemain">{{codePendingRemain ? `${codePendingRemain}秒后获取` : '获取验证码'}}
            </Button>

        </div>
        <div :class="bem('item')">
            <Input
                id="password"
                label="新密码"
                type="password"
                v-model="vm.form.password"
                @enter="resetPassword"
                name="new-password"
                autocomplete="off"
                placeholder="输入6-30位新密码"
                maxlength="30"/>
        </div>

        <Button
            :class="bem('submit')"
            type="primary"
            size="large"
            @click="resetPassword"
            nativeType="submit"
            :disabled="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';

export default {
    name: createComponentName('auth-resetpwd'),
    components: { Button, PhoneNumber, Input },
    mixins: [componentMixin],
    inject: ['vm'],
    data() {
        return {
            loading: false,
            codePendingRemain: null,
        };
    },
    beforeDestroy() {
        clearTimeout(this.codePendingTimer);
    },
    methods: {
        async sendVerifyCode() {
            try {
                await this.vm.requestUms('sendVerifyCode', { ...this.vm.form, type: 'find_password' });
                this.startCheckCodePending();
            }
            catch (error) {
                Tips(error);
            }
        },
        resetPassword() {
            if (this.loading) return;

            this.loading = true;
            this.vm.requestUms('resetPassword', this.vm.form).then(() => {
                Tips('密码修改成功，去登录吧');
                this.vm.switchType('phone');
                this.vm.$emit('success', {
                    action: 'resetpwd',
                    type: 'password'
                });
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                Tips(error);
                this.vm.$emit('error', {
                    action: 'resetpwd',
                    type: 'password'
                });
            });
        },
        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-resetpwd: ~'@{prefix}-auth-resetpwd';

.@{auth-resetpwd} {
    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;
    }

    & &__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>
