<template>
  <div class="container">
    <div class="title">平邑县应急一张图</div>
    <div class="title-en">Pingyi County Emergency Map</div>
    <div class="form-container">
      <el-input type="text" v-model="form.account" size="small" placeholder="请输入登录用户名称">
        <i slot="prefix" class="el-input__icon el-icon-user-solid"></i>
      </el-input>
       <el-input type="password" v-model="form.password" size="small" placeholder="请输入登录密码" style="margin:20px 0px;">
         <i slot="prefix" class="el-input__icon el-icon-lock"></i>
       </el-input>
       <el-button type="primary" style="width:100%" size="small" @click="login">立&nbsp;即&nbsp;登&nbsp;录</el-button>
       <el-checkbox v-model="remember" style="margin-top:20px;" >记住密码</el-checkbox>
    </div>
  </div>
</template>
<script>
import { postMethodCommon } from '../api/common.js'
export default {
  name:"Login",
  data(){
    return {
      form:{
        account:"",
        password:"",
        appKey:"openauth"
      },
      remember:false,
    }
  },
  created(){
    this.getLoginForm();
  },
  methods:{
    getLoginForm(){
      if(localStorage.getItem("loginForm")){
        this.form = JSON.parse(localStorage.getItem("loginForm"));

        this.remember = true;
      }
    },
    login(){
      postMethodCommon("/Check/Login",this.form).then(res=>{
        if(res.code == 200){
          this.$message({type:"success",message:"登录成功！"});
          localStorage.setItem("X-Token",res.token);
          this.$router.push("/");
          if(this.remember){
            localStorage.setItem("loginForm",JSON.stringify(this.form));
          }else{
            localStorage.setItem("loginForm","");
          }
        }else{
          this.$message({type:"error",message:"用户名或密码错误！"});
        }
      }).catch(e=>{
        console.log(e);
        this.$message({type:"error",message:"用户名或密码错误！"});
      })
    }
  }
}
</script>
<style  scoped>
.container{
  width:100vw;
  height:100vh;
  background-image: url(/images/system/login-bg.jpg);
  background-size:100% 100%;
  position:relative;
}
.container::after{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  background:rgba(0,0,0,0.7);
  z-index:0;
}
.container .title{
  width:100%;
  line-height:30px;
  padding-top:300px;
  text-align:center;
  color:#2fa6f2;
  font-size:32px;
  z-index:1;
  position: relative;
  letter-spacing: 0px;
  font-family: '';
  /* font-weight: bold; */
}
.container .title-en{
  width:100%;
  height:0px;
  line-height:50px;
  text-align:center;
  color:#2fa6f2;
  font-size:14px;
  z-index:1;
  position: relative;
  word-spacing: 13px;
}

.container .form-container{
  width:320px;
  background:rgba(255,255,255,0.5);
  margin:0px auto;
  border-radius:4px;
  position:relative;
  z-index:1;
  top:50px;
  padding:40px;
}

::v-deep .el-input__icon{
  color:#2fa6f2;
  font-size:18px;
  font-weight: bold;
}

::v-deep .el-checkbox__label{
  color:#f1f3f5;
}
</style>