<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="[
                                    'userName',
                                    {
                                        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 { setToken, clearToken, setUserId, setUserInfoByRequest } from '@/utils';
import loginI18n from './i18n';

export default {
    components: { CommonLayout },
    i18n: loginI18n,
    data() {
        return {
            checked: true,
            logging: false,
            form: this.$form.createForm(this),
        };
    },
    created() {
        clearToken();
    },
    computed: {
        applicationName() {
            return this.$store.state.settingModule.systemName;
        },
    },
    methods: {
        onSubmit(e) {
            e.preventDefault();
            this.form.validateFields(async err => {
                if (!err) {
                    this.logging = true;
                    const userName = this.form.getFieldValue('userName');
                    const password = this.form.getFieldValue('password');
                    try {
                        const result = await login(userName, password);
                        const { token, userId } = result;
                        setToken(token);
                        setUserId(userId);
                        await setUserInfoByRequest();
                        this.$router.replace('/');
                    } catch (error) {
                        // todo
                    }
                    this.logging = false;
                }
            });
        },
        onChange(e) {
            this.checked = e.target.checked;
        },
    },
};
</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>
