<template>
    <common-layout>
        <div class="top">
            <div class="header">
                <img alt="logo" class="logo" src="@/assets/img/logo.png" />
                <span class="title">{{ applicationName }}</span>
            </div>
            <div class="desc">{{ $t('appName') }}</div>
        </div>
        <div class="login">
            <a-form @submit="onSubmit" :form="form">
                <a-tabs size="large" :tabBarStyle="{ textAlign: 'center' }">
                    <a-tab-pane :tab="$t('tabTitle')" key="1">
                        <a-form-item>
                            <a-input autocomplete="autocomplete" size="large" :placeholder="$t('idPlaceHolder')" v-decorator="[
                                    'name',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: $t('idNotBlankValider'),
                                                whitespace: true,
                                            },
                                        ],
                                    },
                                ]">
                                <a-icon slot="prefix" type="user" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input size="large" :placeholder="$t('pwdPlaceHolder')" autocomplete="autocomplete" type="password" v-decorator="[
                                    'password',
                                    {
                                        rules: [
                                            {
                                                required: true,
                                                message: $t('pwdNotBlankValider'),
                                                whitespace: true,
                                            },
                                        ],
                                    },
                                ]">
                                <a-icon slot="prefix" type="lock" />
                            </a-input>
                        </a-form-item>
                    </a-tab-pane>
                </a-tabs>
                <div>
                    <a-checkbox :checked="checked" @change="onChange">{{ $t('autoLoginLink') }}</a-checkbox>
                    <a style="float: right">{{ $t('forgetPwdLink') }}</a>
                </div>
                <a-form-item>
                    <a-button :loading="logging" class="logging-button" size="large" htmlType="submit" type="primary">{{ $t('loginButton') }}</a-button>
                </a-form-item>
            </a-form>
        </div>
    </common-layout>
</template>

<script>
import CommonLayout from '@/pages/frame/layouts/CommonLayout';
import { login } from '@/pages/frame/services/accountService';
import { setAuthorization } from '@/utils/requestUtil';
import { loadRoutes } from '@/utils/routerUtil';
import { mapMutations } from 'vuex';
import loginI18n from './i18n';

export default {
    name: 'yarn',
    components: { CommonLayout },
    i18n: loginI18n,
    data() {
        return {
            checked: true,
            logging: false,
            form: this.$form.createForm(this),
        };
    },
    computed: {
        applicationName() {
            return this.$store.state.settingModule.systemName;
        },
    },
    methods: {
        ...mapMutations('accountModule', ['setUser', 'setPermissions', 'setRoles']),
        onSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err) => {
                if (!err) {
                    this.logging = true;
                    const name = this.form.getFieldValue('name');
                    const password = this.form.getFieldValue('password');

                    login(name, password).then(this.afterLogin);
                }
            });
        },
        onChange(e) {
            this.checked = e.target.checked;
        },
        afterLogin(result) {
            this.logging = false;
            const loginResult = result.data;

            if (loginResult.code >= 0) {
                const { user, permissions, roles, routers } = loginResult.data;
                this.setUser(user);
                this.setPermissions(permissions);
                this.setRoles(roles);
                setAuthorization({
                    token: loginResult.data.token,
                    expireAt: new Date(loginResult.data.expireAt),
                });
                // 获取路由配置
                loadRoutes(routers);
                this.$router.push('/dashboard/workbench');
                this.$message.success(loginResult.message, 2);
            } else {
                this.$message.error(loginResult.message, 2);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.common-layout {
    .top {
        text-align: center;
        .header {
            height: 44px;
            line-height: 44px;
            a {
                text-decoration: none;
            }
            .logo {
                height: 44px;
                vertical-align: top;
                margin-right: 16px;
            }
            .title {
                font-size: 33px;
                color: @title-color;
                font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
                font-weight: 600;
                position: relative;
                top: 2px;
            }
        }
        .desc {
            font-size: 14px;
            color: @text-color-second;
            margin-top: 12px;
            margin-bottom: 24px;
        }
    }
    .login {
        width: 368px;
        margin: 0 auto;
        @media screen and (max-width: 576px) {
            width: 95%;
        }
        @media screen and (max-width: 320px) {
            .captcha-button {
                font-size: 14px;
            }
        }
        .icon {
            font-size: 24px;
            color: @text-color-second;
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: @primary-color;
            }
        }
    }
    .logging-button {
        width: 100%;
        margin-top: 24px;
    }
}
</style>
