<template>
    <div class="login">
        <!-- <el-header class="header">
            <div class="head-title">
                <img src="../assets/login_bg_01.png" class="bg-01" />
                <img src="../assets/pc_top_bg_02.png" class="bg-02" />
                <div class="wrapper">
                    <img src="../assets/pc_logo.png" class="logo" />
                </div>
            </div>
        </el-header> -->
        <!-- <el-main> -->
        <!-- <div class="login-panel">
                <div class="tabs">
                    <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">登录</div>
                    <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">注册</div>
                </div>
                <div v-if="tab === 0" key="login" @keypress.enter="login">
                    <el-form
                        :model="loginForm"
                        :rules="loginFormRules"
                        label-width="80px"
                        label-position="right"
                        ref="loginForm"
                    >
                        <el-form-item prop="username">
                            <b slot="label">注册账号</b>
                            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <b slot="label">密码</b>
                            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="btns">
                        <el-button class="btn-login" type="primary" @click="login" :loading="logining">
                            登录
                        </el-button>
                        <el-button class="btn-cancel">返回</el-button>
                    </div>
                </div>
                <div v-else key="register">
                    <el-form
                        :model="registerForm"
                        :rules="registerFormRules"
                        label-width="80px"
                        label-position="right"
                        ref="registerForm"
                    >
                        <el-form-item prop="username">
                            <b slot="label">注册账号</b>
                            <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <b slot="label">密码</b>
                            <el-input
                                v-model="registerForm.password"
                                placeholder="请输入密码"
                                type="password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="passwordCfm">
                            <b slot="label">确认密码</b>
                            <el-input
                                v-model="registerForm.passwordCfm"
                                placeholder="请输入密码"
                                type="password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="agree">
                            <b slot="label">注册协议</b>
                            <el-checkbox v-model="registerForm.agree" class="cb-agree">同意<u>注册协议</u></el-checkbox>
                        </el-form-item>
                    </el-form>
                    <div class="btns">
                        <el-button class="btn-login" type="primary" @click="register" :loading="registering">
                            注册
                        </el-button>
                        <el-button class="btn-cancel">返回</el-button>
                    </div>
                </div>
            </div> -->
        <div class="login_title">
            <span class="title">登录账号</span>
            <span style="color: #C8C9CC;cursor: pointer;" @click="$router.push({ name: 'home' })">返回首页</span>
        </div>
        <div class="form">
            <el-form
                :model="loginForm"
                :rules="loginFormRules"
                label-width="80px"
                label-position="right"
                ref="loginForm"
            >
                <el-form-item prop="mail">
                    <el-input v-model="loginForm.mail" placeholder="请输入邮箱" class="ipt"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        type="password"
                        class="ipt2"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="loginForm.code" placeholder="请输入验证码" class="ipt3"></el-input>
                    <button class="code" type="button" @click="createCode(4)">{{ code }}</button>
                </el-form-item>

                <div class="forget" @click="$router.push({ name: 'retrieve' })">忘记密码？</div>
            </el-form>
            <div class="login_btn">
                <el-button :loading="logining" class="btn1" @click="login">登录</el-button>
                <button class="btn2 " @click="$router.push({ name: 'register' })">暂无账号，立即注册</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            code: '',
            tab: 0,
            logining: false,
            registering: false,
            loginForm: {
                username: '',
                password: '',
                mail: ''
            },
            loginFormRules: {
                mail: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        };
    },
    created() {
        if (this.$route.query.register) {
            this.tab = 1;
        }
        this.createCode(4);
    },
    methods: {
        createCode(len) {
            var arr = [
                1,
                2,
                3,
                4,
                5,
                6,
                7,
                8,
                9,
                0,
                'a',
                'A',
                'b',
                'B',
                'c',
                'C',
                'd',
                'o',
                'e',
                'E',
                'f',
                'F',
                't',
                'y',
                'u',
                'i',
                'w'
            ];
            let code = '';
            //随机到数组中取len位元素
            for (var i = 0; i < len; i++) {
                var index = parseInt(Math.random() * arr.length);
                code += arr[index];
            }
            this.code = code;
        },
        login() {
            this.$refs.loginForm.validate(valid => {
                if (!valid) return;
                this.logining = true;
                this.$http
                    .post('/auth/loginByMail', { ...this.loginForm })
                    .then(token => {
                        localStorage.setItem('token', token);
                        return this.$http.get('/user/my');
                    })
                    .then(res => {
                        this.logining = false;
                        this.$store.commit('updateUserInfo', res);
                        this.$router.replace({ path: '/' });
                    })
                    .catch(e => {
                        this.logining = false;
                        this.$message.error(e.error || '登录失败');
                    });
            });
        }
    },
    watch: {}
};
</script>
<style lang="less" scoped>
.login {
    padding-top: 20px;
    // height: 700px;
    background: white;
    // .login-panel {
    //     width: 700px;
    //     height: 470px;
    //     background: white;
    //     box-shadow: 0px 10px 22px 0px rgba(0, 0, 0, 0.08);
    //     margin: 68px auto 0 auto;
    //     .tabs {
    //         background: #ebeef5;
    //         .tab {
    //             width: 50%;
    //             display: inline-block;
    //             height: 52px;
    //             line-height: 52px;
    //             text-align: center;
    //             font-size: 16px;
    //             color: black;
    //             font-weight: bold;
    //             cursor: pointer;
    //             &.active {
    //                 background: @prim;
    //                 color: white;
    //             }
    //         }
    //     }
    //     .el-form {
    //         width: 420px;
    //         margin: 70px auto 0 auto;
    //     }
    //     .btns {
    //         text-align: center;
    //         margin-top: 40px;
    //         .el-button {
    //             width: 100px;
    //             height: 36px;
    //             border-radius: 2px;
    //             font-size: 14px;
    //         }
    //         .btn-cancel {
    //             margin-left: 30px;
    //         }
    //     }
    // }
    .login_title {
        margin: auto;
        width: 900px;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid #bf1616;
        background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        padding-left: 20px;

        .title {
            color: #bf1616;
            font-weight: 500;
            margin-right: 20px;
            padding-right: 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
    .form {
        margin-top: 30px;
        .el-form {
            margin: auto !important;
            width: 450px;
            position: relative;
        }
        .el-input {
            height: 44px;
            width: 300px;
            + .el-input {
                margin-top: 20px;
            }
        }
        /deep/.el-input--small .el-input__inner {
            height: 44px;
            border: none;
            border-radius: 0px;
            border-bottom: 1px solid #f2f3f5;
            padding: 0px;
        }
        .forget {
            width: 65px;
            height: 22px;
            margin: 12px 80px 30px;
            font-size: 13px;
            color: #bf1616;
            cursor: pointer;
        }
        .login_btn {
            margin: auto;
            width: 300px;
        }
        button {
            width: 300px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn1 {
            background: #bf1616;
            color: #fff;
            margin-bottom: 20px;
            border: none;
        }
        .btn2 {
            background: #ffffff;
            color: #bf1616;
            border: 1px solid #bf1616;
        }
        .ipt {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon01.png');
            }
        }
        .ipt2 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon02.png');
            }
        }
        .ipt3 {
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 10px;
                left: -30px;
                background-size: 24px 24px;
                background-image: url('../../assets/login_icon03.png');
            }
        }
        .code {
            width: 74px;
            height: 30px;
            line-height: 24px;
            background: #d99d7d;
            border-radius: 4px;
            font-size: 17px;
            font-weight: 600;
            color: #b36759;
            position: absolute;
            top: 8px;
            right: 75px;
        }
    }
}
</style>
