<template>
    <div class="login-layout">
        <div class="login-content">
            <p class="login-title">
                有货商户平台
            </p>
            <Card class="login-card">
                <Form ref="formInline" :model="formInline" :rules="ruleInline">
                    <Form-item prop="user">
                        <Input type="text" size="large" v-model="formInline.user" placeholder="用户名" @on-enter="handleSubmit('formInline')">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" size="large" v-model="formInline.password" placeholder="密码" @on-enter="handleSubmit('formInline')">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item>
                        <captcha v-if="isCaptcha" @change="captchaChange"></captcha>
                    </Form-item>
                    <Form-item class="login-btn">
                        <Button type="primary" :loading="loading" @click="handleSubmit('formInline')">
                            登录
                        </Button>
                    </Form-item>
                </Form>
            </Card>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import _ from 'lodash';
import {Captcha} from './components';

export default {
    name: 'login',
    data() {
        return {
            loading: false,
            isCaptcha: false,
            captcha: '',
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.isCaptcha = this.$cookie.get('_captcha');
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.isCaptcha && !this.captcha) {
                        this.$Message.error('请将图形验证码翻转至正确方向');
                        return;
                    }
                    this.login(this.formInline.user, this.formInline.password, this.captcha);
                } else {
                    this.$Message.error('表单验证失败!');
                }
            });
        },
        captchaChange(vals) {
            this.captcha = _.join(vals, '');
        },
        login(username, password, captcha) {
            this.loading = true;
            Vue.passport.local(username, password, captcha).then(() => {
                this.loading = false;
                this.$router.push('/');
            }, (error) => {
                this.isCaptcha = error.captcha;
                this.loading = false;
                this.$Message.error(error.message);
            });
        }
    },
    components: {
        Captcha
    }
};
</script>

<style lang="scss" scoped>
.login-layout {
    background-color: rgb(70, 76, 91);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .login-content {
        width: 350px;
        margin: 200px auto;
    }

    .login-title {
        width: 100%;
        text-align: center;
        font-size: 30px;
        color: #fff;
        line-height: 50px;
        padding-bottom: 20px;
    }

    .ivu-form {
        width: 90%;
        margin: 20px auto;
    }

    .login-btn {
        text-align: right;

        button {
            width: 100%;
            height: 36px;
            font-size: 14px;
        }
    }

    .login-card {
        min-height: 250px;
    }
}
</style>