<template>
    <div :class="bem()">
        <div :class="bem('title')">手机号登录</div>
        <div :class="bem('item')">
            <PhoneNumber
                v-model="vm.form.phone"
                :countries="vm.countries"
                name="username"
            />
        </div>
        <div :class="bem('item')">
            <Input
                label="密码"
                type="password"
                v-model="vm.form.password"
                name="password"
                placeholder="输入6-30位密码"
                maxlength="30"
            />
        </div>
        <div :class="bem('links')">
            <Button nativeType="button" type="text" :class="bem('resetwod')" @click="vm.switchType('resetpwd')">忘记密码</Button>
        </div>

        <Button
            rect
            type="primary"
            size="large"
            nativeType="submit"
            :class="bem('submit')"
            :disabled="this.loading"
            @click="onLogin"
        >{{this.loading ? '登录中…' : '登录'}}</Button>
        <div :class="bem('third-parties')">
            <div @click="vm.switchType('wechat')">
                <img src="../../assets/img/wechat.svg" :class="bem('icon-wechat')" alt="wechat">
                微信登录
            </div>
            <div @click="vm.switchType('qq')">
                <img src="../../assets/img/qq.svg" :class="bem('icon-qq')" alt="qq">
                QQ登录
            </div>
        </div>
        <div :class="bem('footer')">
            <Button
                type="text"
                @click="vm.switchType('register')">
                <span>手机号注册</span><Icon name="arrow-right"/>
            </Button>
        </div>
    </div>
</template>
<script>
import Button from '../Button';
import Icon from '../Icon';
import Tips from '../Tips';
import PhoneNumber from './PhoneNumber';
import Input from '../Input';
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('auth-login'),
    components: { Button, PhoneNumber, Icon, Input },
    mixins: [componentMixin],
    inject: ['vm'],
    props: {
        countries: {
            type: Array,
            required: true,
        }
    },
    data() {
        return {
            loading: false,
        };
    },
    methods: {
        onLogin() {
            if (this.loading) return;

            this.loading = true;
            this.vm.requestUms('login', this.vm.form).then(res => {
                this.loading = false;
                this.vm.onLogin(res.authorization_code, 'mobile');
            }).catch(error => {
                Tips(error);
                this.loading = false;
                this.vm.$emit('error', {
                    error,
                    action: 'login',
                    type: 'mobile'
                });
            });
        },
    }
};
</script>
<style lang="less">
@import '../_styles/base.less';

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

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

    & &__title {
        color: #000;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 24px;
    }
    & &__footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    & &__qq {
        display: flex;
        align-items: center;

        .@{icon} {
            font-size: 44px;
        }
    }

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

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

    & &__links {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin-top: 4px;
        font-weight: 400;
    }

    & &__resetwod {
        color: #999;
    }

    & &__icon-wechat,
    & &__icon-qq {
        width: 24px;
        height: 24px;
        margin-right: 6px;
    }

    & &__third-parties {
        width: 100%;
        margin-top: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px;

        & > div {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 16px;
            cursor: pointer;
        }
    }

    & &__footer {
        position: absolute;
        display: flex;
        flex-direction: row-reverse;
        bottom: 0;
        left: 0;
        height:48px;
        width: 100%;
        color: #005CF9;
        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>
