<template>
    <div class="login">
        <div class="box">
            <span class="title">欢迎来到镇江管理后台</span>
            <el-form class="form" :model="form" :rules="rules" ref="form">
                <el-form-item label="账号" prop="account">
                    <el-input size="large" v-model="form.account" style="width: 80%" suffix-icon="el-icon-user">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" size="large" style="width: 80%" show-password></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="verification">
                    <div style="display: flex;">
                        <el-input v-model="form.verification" size="large" style="width: 54%"></el-input>
                        <template>
                            <span @click="refreshCode" style="cursor: pointer;">
                                <Identify :identifyCode="identifyCode"></Identify>
                            </span>
                        </template>
                    </div>
                </el-form-item>
                <el-form-item class="fotter">
                    <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="login" size="large">
                        登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { setToken, setMenuList } from "@/utils/auth.js";
import Identify from "./identify";
// import md5 from "js-md5";
import { login, listMenus } from "@/api/login";
export default {
    components: {
        Identify,
    },
    data() {
        return {
            form: {
                account: "",
                password: "",
                verification: "",
            },
            rules: {
                account: [{ required: true, message: "请输入账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                verification: [{ required: true, message: "请输入验证码", trigger: "blur" }],
            },
            // 图片验证码
            identifyCode: '',
            // 验证码规则
            identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
            fullscreenLoading: false
        };
    },
    mounted() {
        window.addEventListener("keydown", this.keyDown);
        this.refreshCode()
    },
    created() {
    },
    methods: {
        // 切换验证码
        refreshCode() {
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        // 生成随机验证码
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[
                    Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
                ]
            }
        },
        login() {
            //测试账号 username：admin  password：Admin@#!2022
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.verification.toLowerCase() === this.identifyCode.toLowerCase()) {
                        this.fullscreenLoading = true;
                        // let password = md5(this.form.password);
                        let data = {
                            username: this.form.account,
                            password: this.form.password,
                        };
                        login(data).then((res) => {
                            this.fullscreenLoading = false;
                            if (res.success == true) {
                                setToken(res.data.tokenValue);
                                localStorage.setItem('userName', res.data.userName),
                                    listMenus({ tokenValue: res.data.tokenValue }).then((res) => {
                                        if (res.success == true) {
                                            console.log(res)
                                            setMenuList(JSON.stringify(res.data));
                                            this.$router.push({ path: "/home" });
                                            this.$message.success("登陆成功~");
                                        } else {
                                            this.$message.error(res.msg || "登陆失败！");
                                            this.refreshCode()
                                        }
                                    })

                            } else {
                                this.$message.error(res.msg || "登陆失败！");
                                this.refreshCode()
                            }
                        });
                    } else {
                        this.$message.error("请输入正确的验证码！");
                        this.refreshCode()
                    }
                }
                else {
                    this.refreshCode()
                    return false;
                }
            });
        },
        keyDown(e) {
            //如果是回车则执行登录方法
            if (e.keyCode == 13) {
                this.login();
            }
        },
    },
    destroyed() {
        window.removeEventListener("keydown", this.keyDown, false);
    },
};
</script>

<style lang="stylus" scoped>
.login {
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
//   background: url('~@/assets/login.png');
//   background-size: cover;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 580px;
  height: 560px;
  background-color: #f7faff;
  box-shadow: 1px 1px 80px rgb(32, 32, 32);

  .title {
    margin-bottom: 50px;
    letter-spacing: 5px;
    color: #2e2e2e;
    font-size: 28px;
    font-weight: bold;
  }
}

.form {
  background-color: #fff;
  box-shadow: 0px 0px 2px #e0e0e0;
  width: 380px;
  height: 360px;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .el-form-item__label {
    color: #a0a0a0;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .fotter {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .el-button {
    width: 350px;
  }
}

.el-form-item.is-required .el-form-item__label:before {
  content: "" !important;
}
</style>