<template>
  <div class="login-container">
    <div class="login-main">
      <div class="login-box">
        <div class="login-header">用户登录</div>
        <el-form @keyup.enter.native="submitForm('form')"  class="login-form" ref="form" :model="form" label-width="0px">
          <el-form-item
            label
            prop="username"
            :rules="{required: true, message: '用户名不能为空', trigger: 'blur'}"
          >
            <el-input
              placeholder="输入用户名"
              clearable
              prefix-icon="el-icon-user-solid"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            label
            :rules="{
                            required: true, message: '密码不能为空', trigger: 'blur'
                          }"
          >
            <el-input
              auto-complete="new-password"
              placeholder="输入密码"
              clearable
              show-password
              prefix-icon="el-icon-s-goods"
              type="password"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-checkbox v-model="rememberPwd">记住密码</el-checkbox>
          <el-button
            :loading="loginLoading"
            @click="submitForm('form')"
            style="width: 100%"
            type="primary"
          >登录
          </el-button>
        </el-form>
      </div>
    </div>
    <div class="foot-text">
      <a data-v-42b89d7e="" href="http://www.beian.miit.gov.cn" target="_blank">@2019-2021-拓恒航空 -苏ICP备19054947号-2
        版权所有
        @南京拓恒航空科技有限公司</a>
    </div>
  </div>
</template>

<script>
  import api from "@/api/user/user";
  import Cookies from "js-cookie";
  import $ from 'jquery'

  export default {
    name: "Login",
    data() {
      return {
        rememberPwd: false,
        loginLoading: false,
        form: {
          username: "",
          password: ""
        }
      };
    },
    created() {
      let userPwd=Cookies.get('userPwd')
      if(userPwd){
        userPwd=JSON.parse(userPwd)
        this.form=Object.assign({},{username:userPwd.username,password:userPwd.password})
        this.rememberPwd=true
      }
    },
    mounted() {
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loginLoading = true;
            api
              .login(this.form)
              .then(res => {
                const {token} = res.data;
                Cookies.set("token", token);
                let redirect = this.$route.query.redirect;
                if (this.rememberPwd) {
                  let param = {
                    rememberPwd: this.rememberPwd,
                    username: this.form.username,
                    password: this.form.password,
                  }
                  Cookies.set('userPwd',JSON.stringify(param))
                }else{
                  Cookies.remove('userPwd')
                }
                if (redirect) {
                  this.$router.push({path: redirect});
                } else {
                  this.$router.push({path: "/"});
                }
                this.loginLoading = false;
              })
              .catch(e => {
                this.loginLoading = false;
              });
          }
        });
      }
    }
  };
</script>

<style lang="less">
  .login-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-image: url(../../assets/img/login.jpg);

    .login-main {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-position: center center;
      background-size: cover;
      /*background-image: url(../../assets/img/loginmain.png);*/
      width: 6.3rem;
      height: 5.5rem;
      right: 11%;

      .login-box {
        padding: 0 0.57rem;
        padding-top: 1.5rem;

        .login-header {
          text-align: center;
          font-family: "MicrosoftYaHei";
          font-size: 0.32rem;
          line-height: 0.25rem;
          color: #00bff4;
          letter-spacing: 5px;
        }

        .login-form {
          .el-button {
            margin-top: 0.38rem;
            padding: 0.12rem;
            font-size: 0.32rem;
            border-radius: 4px;
          }

          .el-checkbox {
            font-size: 0.22rem;

            .el-checkbox__label {
              padding-left: 0.1rem;
              line-height: 0.25rem;
              font-size: 0.22rem;
              color: #ffffff;
            }

            .el-checkbox__inner {
              border: solid #20a3f5 0.03rem !important;
              width: 0.24rem;
              height: 0.24rem;
              background-color: #265A71;
            }

            .el-checkbox__inner::after {
              height: 0.1rem;
              left: 0.07rem;
              top: 0.01rem;
              width: 0.04rem;
            }
          }

          margin-top: 0.36rem;

          .el-input--prefix .el-input__inner {
            background-color: #265A71;
            border: none;
            border: solid #20a3f5 0.03rem !important;
            height: 0.56rem;
          }

          .el-form-item {
            margin-bottom: 0.35rem;

            input:-webkit-autofill {
              -webkit-box-shadow: 0 0 0px 1000px white inset;
              border: 1px solid #CCC !important;
            }

            .el-form-item__content {
              line-height: 0.55rem;
              font-family: "MicrosoftYaHei";
              position: relative;
              font-size: 0.22rem;
              color: #ffffff;

              .el-form-item__error {
                font-size: 0.22rem;
                padding-top: 0.04rem;
              }

              .el-input--prefix .el-input__inner {
                font-family: "MicrosoftYaHei";
                font-size: 0.22rem;
                color: #ffffff;
                padding-left: 0.65rem;
                padding-right: 0.65rem;
              }

              .el-input__icon {
                line-height: normal;
                width: 0.5rem;
                font-size: 0.22rem;
                color: #20a3f5;
              }

              .el-input {
                font-family: "MicrosoftYaHei";
                font-size: 0.22rem;
                line-height: 0.55rem;
                color: #ffffff;

                .el-input__inner::placeholder {
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }

    .foot-text {
      line-height: 30px;
      text-align: center;
      background-color: #333;
      position: absolute;
      bottom: 0px;
      z-index: 1;
      width: 100%;

      > a {
        position: relative;
        bottom: 5px;
        font-size: 14px;
        color: #999;
      }
    }

    .box {
      width: 350px;
      position: absolute;
      right: 20%;
      top: 30%;
    }
  }
</style>

