<template>
  <div class="login_wrap layout align_center justify_center">
    <div class="login_box">
      <div class="login_main">
        <!-- logo -->
        <div class="login_logo">
          <img src="@/assets/img_41.png" alt />
        </div>
        <!-- 名称 -->
        <div class="web_name">
          全球移民与置业评估系统
          <!-- International Immigration &
          <br />Asset Allocation Assessed System -->
        </div>
        <!-- 账号输入 -->
        <div class="login_input">
          <el-input type="text" v-model="account" placeholder="输入用户名"></el-input>
          <div class="input_icon">
            <img src="@/assets/img_45.png" alt />
          </div>
        </div>
        <!-- 密码输入 -->
        <div class="login_input">
          <el-input type="password" v-model="pwd" placeholder="输入密码"></el-input>
          <div class="input_icon">
            <img src="@/assets/img_43.png" alt />
          </div>
        </div>
        <!-- 图形验证码 -->
        <div class="verification_input layout align_center justify">
          <div class="verification_input_l">
            <el-input maxlength="4" type="text" v-model="code" placeholder="输入验证码"></el-input>
            <div class="input_icon">
              <img src="@/assets/img_44.png" alt />
            </div>
          </div>
          <!-- 验证码 -->
          <div class="verification_code" @click="getPicCode()">
            <img :src="imgCode" alt />
          </div>
        </div>
        <!-- 记住密码 -->
        <div class="layout align_center justify_start remeber_pwd">
          <el-checkbox v-model="checked" @change="changeCheck()">记住密码</el-checkbox>
        </div>
        <!-- 登录按钮 -->
        <div class="login_btn" @click="toIndex()">登录</div>
      </div>
    </div>
  </div>
</template>
<script>
import { post } from "../../api/http.js";
import { Message } from "element-ui";
export default {
  data() {
    return {
      account: "",
      pwd: "",
      code: "",
      checked: false,
      imgCode: "",
      sessionId: ""
    };
  },
  methods: {
    // 记住密码
    changeCheck() {
      if (this.checked) {
        localStorage.setItem("account", this.account);
        localStorage.setItem("pwd", this.pwd);
        localStorage.setItem("checked", 1);
      } else {
        localStorage.removeItem("checked");
        localStorage.removeItem("account");
        localStorage.removeItem("pwd");
      }
    },
    // 登录
    toIndex() {
      let url = "/api/user/login";
      if(this.account&&this.pwd&&this.code){
        if(localStorage.getItem("checked") == 1){
          localStorage.setItem("account", this.account);
        localStorage.setItem("pwd", this.pwd);
        }
        let params = {
        username: this.account,
        password: this.pwd,
        code: this.code,
        session_id: this.sessionId
      };
      post(url, params)
        .then(res => {
          localStorage.setItem("token", res.token);
          this.$router.push({ path: "/index" });
        })
        .catch(err => {
          this.code = "";
          this.getPicCode();
        });
      }else{
        this.$message({
              showClose: true,
              message: "请输入完整信息",
              type: "warning"
            });
      }
      
    },
    // 获取图形验证码
    getPicCode() {
      let url = "/api/user/get_verify";
      post(url).then(res => {
        this.imgCode = res.get_code;
        this.sessionId = res.session_id;
      });
    }
  },
  mounted() {
    this.getPicCode();
    this.account = localStorage.getItem("account");
    this.pwd = localStorage.getItem("pwd");
    if (localStorage.getItem("checked")) {
      this.checked = true;
    }
  }
};
</script>
<style>
.login_input .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  color: #fff !important;
  padding: 0 20px;
  caret-color: #fff;
}
.login_input .el-input__inner::placeholder,
.verification_input_l .el-input__inner::placeholder {
  color: #fff !important;
}
.verification_input_l .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  color: #fff !important;
  padding: 0 20px;
  caret-color: #fff;
}
.remeber_pwd .el-checkbox {
  color: #fff;
  font-size: 14px;
}
.remeber_pwd .el-checkbox__inner {
  border-radius: 3px;
  border: 1px solid #f9f9f9;
  background-color: rgba(0, 0, 0, 0);
}
.remeber_pwd .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f9f9f9;
}
.remeber_pwd .el-checkbox__input.is-checked .el-checkbox__inner,
.remeber_pwd .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgba(0, 0, 0, 0);
  border-color: #f9f9f9;
}
.remeber_pwd .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}
</style>
<style scoped>
.login_wrap {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/img_42.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
}
.login_box {
  width: 540px;
  height: 620px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.login_main {
  margin: 0 70px;
  padding: 40px 0 60px;
}
/* 头像 */
.login_logo {
  width: 106px;
  margin: 0 auto;
}
/* 名称 */
.web_name {
  font-size: 24px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 56px;
}
/* 输入框 */
.login_input {
  border: 1px solid #f9f9f9;
  border-radius: 3px;
  position: relative;
  margin-bottom: 36px;
}
.input_icon {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 16px;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
/* 图形验证码 */
.verification_input_l {
  width: 254px;
  border: 1px solid #f9f9f9;
  border-radius: 3px;
  position: relative;
}
.verification_code {
  width: 126px;
  height: 42px;
  border-radius: 3px;
  background-color: #fff;
}
/* 记住密码 */
.remeber_pwd {
  padding-left: 10px;
  margin: 20px 0;
}

/* 登录按钮 */
.login_btn {
  width: 100%;
  height: 38px;
  background-color: #526aa6;
  border-radius: 3px;
  text-align: center;
  line-height: 38px;
  color: #fff;
  font-size: 18px;
}
</style>