<template>
  <div class="backGround">
    <div class="projectName">{{$store.state.projectName}}</div>
    <div class="loginBody">
      <div class="loginTitle">登录窗口</div>
      <div class="loginText">欢迎登录后台系统</div>
      <div class="loginInoputs">
        <div class="userInpBody">
          <div class="userIcon"><img src="../imgs/yonghuming.png"></div>
          <input type="text" id="userInp" placeholder="输入你的用户名" v-model="loginForm.username">
        </div>
        <div class="passWordInpBody">
          <div class="passWordIcon"><img src="../imgs/mima.png"></div>
          <input type="password" id="passWordInp" placeholder="输入你的密码" v-model="loginForm.password">
        </div>
        <button class="loginBtn" @click="LoginInitiation">安全登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import { httpGet } from "@/common/httpBean.js"
import {login,code} from "@/axios/api.js"
import {encrypt} from "@/utils/rsaEncrypt.js"
import Cookies from 'js-cookie'


export default {
  data() {
    return {
       loginForm: {
        username: '',
        password: '',
        uuid: ''
      },
    }
  },
  created(){
     // 获取验证码
    this.getCode()
    // 获取用户名密码等Cookie
    //this.getCookie()
  },
  methods:{
     getCode() {
       httpGet(code).then(res=> {
          //console.log(res.uuid);
          this.uuid = res.uuid;
       });
    },
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
      }
    },
    LoginInitiation(){
      if(this.loginForm.userName == "" || this.loginForm.password == ""){
          alert("请输入正确的用户名或密码!")
      }else{
        httpGet(login).then( res => {
          console.log(res);
          this.$refs.loginForm.validate(valid => {
            const user = {
              username: this.loginForm.username,
              password: this.loginForm.password,
              uuid: this.loginForm.uuid
            }
            if (user.password !== this.cookiePass) {
              user.password = encrypt(user.password)
            }
            if (valid) {
              this.loading = true
              if (user.rememberMe) {
                Cookies.set('username', user.username, { expires: Config.passCookieExpires })
                Cookies.set('password', user.password, { expires: Config.passCookieExpires })
              } else {
                Cookies.remove('username')
                Cookies.remove('password')
              }
            } else {
              console.log('error submit!!')
              return false
            }
          })
        })
        this.$router.push({path: 'homepage',query:{ index:this.userName}});
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.backGround {
  padding-top: 100px;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  background-image: url("../imgs/bg.png");
}
.projectName{
  text-align: center;
  font-size: 70px;
  font-weight: 600;
  background-image:-webkit-linear-gradient(bottom,rgb(36,162,254),rgb(255,255,255)); 
  background-clip:text; 
  -webkit-text-fill-color:transparent; 
  letter-spacing: 3px;
}
.loginBody{
  position: relative;
  padding-top: 73px;
  box-sizing: border-box;
  margin: 0 auto;
  width: 60%;
  height: 85%;
  background-image: url("../imgs/kuang.png");
  background-size: 100% 100%;
}
.loginTitle{
  margin-left: 50px;
  text-align: center;
  font-size: 30px;
  color:rgb(47,213,255);
  letter-spacing: 6px;
}
.loginText{
  margin-top: 30px;
  margin-left: 50px;
  text-align: center;
  font-size: 35px;
  color:rgb(151,227,244);
  letter-spacing: 6px;
  margin-bottom: 30px;
}
.loginInoputs{
  position: absolute;
  right: 120px;
  width: 400px;
  height: 300px;
}
.userInpBody{
  display: flex;
  padding: 2px;
  border: 1px solid rgb(18,70,113);
  margin-bottom: 20px;
}
.userIcon{
  padding: 15px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: rgb(18,70,113);
}
#userInp{
  margin-left: 10px;
  width: 80%;
  background: none;
	outline: none;
	border: none;
  font-size: 20px;
  color: rgb(47,213,255);
  letter-spacing: 3px;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color:rgb(47,213,255);
}
.passWordInpBody{
  display: flex;
  padding: 2px;
  border: 1px solid rgb(18,70,113);
  margin-bottom: 50px;
}
.passWordIcon{
  padding: 15px;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  background-color: rgb(18,70,113);
}
#passWordInp{
  margin-left: 10px;
  width: 80%;
  background: none;
	outline: none;
	border: none;
  font-size: 20px;
  color: rgb(47,213,255);
  letter-spacing: 3px;
}
.loginBtn{
  width: 100%;
  height: 60px;
  font-size: 22px;
  background-color:rgb(24,180,255);
  border: 0px;
  color: white;
  letter-spacing: 10px;
  cursor: pointer;
}
</style>