<template>
    <div class="login-container">
        <div class="title-container">
            <h3 class="title">{{ title }}</h3>
        </div>
        <div class="content">
            <el-tabs :stretch="true">
                <el-tab-pane label="账户登录">
                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
                        label-position="left">
                        <el-form-item prop="username">
                            <el-input class="username" ref="username" type="text" placeholder="账户/邮件账户" clearable
                                v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input class="password" ref="password" placeholder="请输入密码" clearable
                                v-model="loginForm.password" show-password></el-input>
                        </el-form-item>
                        <el-form-item class="vertification">
                            <el-input style="width: 140px;display: flex;" placeholder="请输入验证码"
                                v-model="loginForm.vertification"></el-input>
                            <identify :identifyCode="identifyCode" style="width: 90px; height: 40px;"></identify>
                            <el-button style="margin-left: 20px; width:50px;font-size: 14px;" type="text"
                                @click="refreshCode">看不清？</el-button>
                        </el-form-item>
                        <el-form-item style="margin-top:30px;">
                            <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登 录</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox style="display: block; float: left;" v-model="remeber">记住密码</el-checkbox>
                            <a style="margin-left: 150px;" href="">忘记密码？</a>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="手机登陆">
                    <el-form ref="loginForm2" :model="loginForm2" :rules="loginRules2" class="login-form" autocomplete="on">
                        <el-form-item prop="phone">
                            <el-input class="phone" placeholder="请输入手机号码" clearable v-model="loginForm2.phone"></el-input>
                        </el-form-item>
                        <el-form-item class="vertification">
                            <el-input style="width: 160px;display: flex;" placeholder="请输入验证码"
                                v-model="loginForm2.vertification"></el-input>
                            <el-button class="phone_vertification" type="primary" @click="getVetifiedCode">获取验证码</el-button>
                        </el-form-item>
                        <el-form-item style="margin-top:60px">
                            <el-button :loading="loading" type="primary" @click.native.prevent="phoneHandleLogin">登
                                录</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { validUsername } from '@/utils/validate';
import identify from '@/components/Identify/index'
export default {
    components: { identify },
    data() {
        const validateUsername = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空！'));
            } else if (!validUsername(value)) {
                callback(new Error('请输入正确的用户名！'));
            } else {
                callback();
            }
        };
        const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error('密码长度不少于6位！'));
            } else {
                callback();
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('手机号不能为空！'));
            } else if (!/^1\d{10}$/.test(value)) {
                callback(new Error('手机号格式错误！'));
            } else {
                callback();
            }
        };
        return {
            title: '智慧运营管理中心',
            loginForm: {
                username: 'admin',
                password: '123456',
                vertification: '',
            },
            loginForm2: {
                phone: '',
                vertification: ''
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
                password: [{ required: true, trigger: 'blur', validator: validatePassword }]
            },
            loginRules2: {
                phone: [{ required: true, trigger: 'blur', validator: validatePhone }],

            },
            remeber: true,
            loading: false,
            identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',//随机串内容
            identifyCode: '',
            //redirect: undefined
        }
    },
    // watch: {
    //     $route: {
    //         handler: function (route) {
    //             const query = route.query;
    //             if (query) {
    //                 this.redirect = query.redirect;
    //             }
    //         },
    //         immediate: true
    //     }
    // },
    methods: {
        // handleLogin() {
        //     if (this.loginForm.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
        //         this.$message.error('请输入正确的验证码!');
        //         this.refreshCode();
        //     } else {
        //         this.$refs.loginForm.validate(valid => {
        //             if (valid) {
        //                 this.loading = true;
        //                 this.$store.dispatch('user/login', this.loginForm).then(() => {
        //                     this.$router.push({ path: '/home' });
        //                     this.loading = false;
        //                 }).catch(() => {
        //                     this.loading = false;
        //                 })
        //             } else {
        //                 return false;
        //             }
        //         })
        //     }
        // },
        handleLogin() {
            if (this.loginForm.vertification.toLowerCase() != this.identifyCode.toLowerCase()) {
                this.$message.error('请输入正确的验证码!');
                this.refreshCode();
            } else {
                if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
                    this.$router.push('/home');
                }
            }
        },
        refreshCode() {
            this.identifyCode = '';
            this.makeCode(4);
        },
        makeCode(l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
            }
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        },
        getVetifiedCode() {

        }
    },
    mounted() {
        if (this.loginForm.username === '') {
            this.$refs.username.focus();
        } else if (this.loginForm.password === '') {
            this.$refs.password.focus();
        };

        //初始化验证码
        this.identifyCode = '';
        this.makeCode(4);
    }
}
</script>

<style lang="less" scoped>
.login-container {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    position: fixed;
    overflow: hidden;
    background-image: url("../../assets/images/background@2x.png")
}

.title-container {
    position: relative;

    .title {
        font-size: 48px;
        float: left;
        margin-top: 150px;
        margin-left: 400px;
        text-align: center;
        font-weight: bold;
        letter-spacing: 20px;
        color: #000000;
    }
}

.content {
    position: absolute;
    top: 250px;
    height: 400px;
    right: 300px;
    width: 400px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 2px 2px lightgrey;

    .el-form-item {
        width: 300px;
        margin-left: 50px;
    }

    /deep/.el-tabs__content {
        margin-top: 40px;
    }
}

.username {
    /deep/.el-input__inner {
        background: url('./images/username@2x.png') no-repeat 15px center;
        background-size: 20px;
        padding: 0 50px;
    }
}

.password {
    /deep/.el-input__inner {
        background: url('./images/password@2x.png') no-repeat 15px center;
        background-size: 20px;
        padding: 0 50px;
    }
}

.phone {
    /deep/.el-input__inner {
        background: url('./images/shouji@3x.png') no-repeat 15px center;
        background-size: 20px;
        padding: 0 50px;
    }
}

.vertification {
    /deep/.el-form-item__content {
        display: flex;
    }
}

.phone_vertification {
    width: 130px !important;
    font-size: 18px;
    height: 40px;
    margin-left: 10px;
    padding: 5px;
}

.el-button {
    width: 300px;
    font-size: 18px;
}

.el-checkbox {
    display: flex;
}

/deep/.el-tabs__item {
    font-size: 20px;
}

/deep/.el-tabs__nav-wrap {
    padding: 15px 10px 0 10px;
}
</style>