<style lang="scss" src="./index.scss">
</style>

<template>
    <div class="login-container">
        <header class="login-header">
            <div class="login-wrap">
                <a href="/">
                    <img :src="`${BASE_URL}img/logo/logo_full.png`" class="login-logo">
                </a>
            </div>

        </header>
        <section class="login-content">
            <div class="login-wrap">
                <el-form
                    ref="loginForm"
                    :model="loginForm"
                    :rules="loginRules"
                    class="login-form"
                    autocomplete="on"
                    label-position="left"
                >
                    <div class="title-container">
                        <h3 class="title">启效智慧云平台</h3>
                    </div>
                    <el-form-item prop="username">
                        <el-input
                            ref="username"
                            v-model="loginForm.username"
                            placeholder="登录账号"
                            name="username"
                            type="text"
                            tabindex="1"
                            autocomplete="on"
                            maxlength="50"
                        />
                        <span class="svg-container">
                            <svg-icon icon-class="user"/>
                        </span>
                    </el-form-item>

                    <el-tooltip v-model="capsTooltip" content="大写锁定" placement="right" manual>
                        <el-form-item prop="password">
                            <el-input
                                :key="passwordType"
                                ref="password"
                                v-model="loginForm.password"
                                :type="passwordType"
                                placeholder="登录密码"
                                name="password"
                                tabindex="2"
                                autocomplete="on"
                                maxlength="20"
                                @keyup.native="checkCapslock"
                                @blur="capsTooltip = false"
                                @keyup.enter.native="handleLogin"
                            />
                            <span class="svg-container">
                                <svg-icon icon-class="password"/>
                            </span>
                        </el-form-item>
                    </el-tooltip>
                    <div class="login-code-item">
                        <el-form-item prop="code">
                            <el-input
                                ref="code"
                                v-model="loginForm.code"
                                placeholder="验证码"
                                name="code"
                                type="text"
                                tabindex="3"
                                autocomplete="on"
                                maxlength="6"
                                @keyup.enter.native="handleLogin"
                            />
                            <span class="svg-container">
                                <svg-icon icon-class="security"/>
                            </span>
                        </el-form-item>
                        <img
                            class="login-code-img"
                            :src="imgCodeUrl"
                            alt="图形验证码"
                            title="点击图形验证码"
                            @click="changeImgCode"
                        >
                    </div>

                    <el-button
                        :loading="loading"
                        type="primary"
                        style="width:100%;margin-bottom:30px;"
                        @click.native.prevent="handleLogin"
                    >登录
                    </el-button>
                </el-form>
            </div>
        </section>
        <footer class="login-footer">Copyright @2020 合肥青谷信息科技有限公司版权所有 Rights Reserved 皖ICP备16015686号-1</footer>
    </div>
</template>

<script>
    import {getCode} from '@/api/moudles/uc/user';

    export default {
        name: 'Login',
        data() {
            const validatePassword = (rule, value, callback) => {
                if (value.length < 6) {
                    callback(new Error('密码必须大于6个字符'));
                } else {
                    callback();
                }
            };
            return {
                imgCodeUrl: '',
                loginForm: {
                    username: '',
                    password: '',
                    code: '',
                    key: ''
                },
                BASE_URL: process.env.BASE_URL,
                loginRules: {
                    user: [{required: true, trigger: 'blur', message: '请输入登录账号'}],
                    password: [
                        {required: true, trigger: 'blur', validator: validatePassword}
                    ],
                    code: [{required: true, trigger: 'blur', message: '请输入验证码'}]

                },
                passwordType: 'password',
                capsTooltip: false,
                loading: false,
                showDialog: false,
                redirect: undefined,
                otherQuery: {}
            };
        },
        watch: {
            $route: {
                handler: function(route) {
                    const query = route.query;
                    if (query) {
                        this.redirect = query.redirect;
                        this.otherQuery = this.getOtherQuery(query);
                    }
                },
                immediate: true
            }
        },

        created() {
            this.changeImgCode();
        },

        mounted() {
            if (this.loginForm.username === '') {
                this.$refs.username.focus();
            } else if (this.loginForm.password === '') {
                this.$refs.password.focus();
            }
        },
        destroyed() {
        },
        methods: {
            checkCapslock({shiftKey, key} = {}) {
                if (key && key.length === 1) {
                    if (
                        (shiftKey && (key >= 'a' && key <= 'z')) ||
                        (!shiftKey && (key >= 'A' && key <= 'Z'))
                    ) {
                        this.capsTooltip = true;
                    } else {
                        this.capsTooltip = false;
                    }
                }
                if (key === 'CapsLock' && this.capsTooltip === true) {
                    this.capsTooltip = false;
                }
            },
            changeImgCode() {
                getCode({key: this.loginForm.key}).then(response => {
                    const result = response;
                    if (result && result.success) {
                        this.loginForm.key = result.data.key;
                        this.imgCodeUrl = result.data.img;
                    } else {
                        this.$message({
                            duration: 1500,
                            type: 'error',
                            message: '获取验证码失败'
                        });
                    }
                });
            },

            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$store
                            .dispatch('user/login', this.loginForm)
                            .then(() => {
                                this.$store.dispatch('user/getInfo').then((res) => {
                                    console.log('res', res);
                                });

                                this.$router.push({
                                    path: decodeURI(this.redirect) || '/',
                                    query: this.otherQuery
                                });
                                this.loading = false;
                            })
                            .catch(() => {
                                this.loading = false;
                                this.changeImgCode();
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getOtherQuery(query) {
                return Object.keys(query).reduce((acc, cur) => {
                    if (cur !== 'redirect') {
                        acc[cur] = query[cur];
                    }
                    return acc;
                }, {});
            }
        }
    };
</script>