<template>
  <div class="login-container">
    <img class="img-title" src="../../assets/img/login-title.png">
    <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"
          >
            <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
          >
            <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'
  import store from '../../vuex'

  export default {
    name: "Login",
    data() {
      return {
        rememberPwd: false,
        loginLoading: false,
        form: {
          username: "",
          password: ""
        }
      };
    },
    created() {
      let designSize = (2220+1080)/2; // 设计图尺寸
      let wW = (document.body.clientWidth+document.body.clientHeight)/2;// 窗口宽度
      let rem = wW * 100 / designSize;
      document.documentElement.style.fontSize = rem + 'px';
      store.dispatch('user/setFontSize', rem)
      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(location.host+'-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) {
                  if(redirect=='/command'){
                    this.$router.push({path: "/"});
                    window.open('/command')
                  }else{
                    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.png);

    .img-title{
      position: absolute;
      width: 2.54rem;
      height: 1.2rem;
      top: 1.13rem;
      left: 2.4rem;
    }

    .login-main {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: #040C21;
      border-radius: 0.01rem;
      border-radius: 0.01rem;
      width: 6.2rem;
      height: 4.8rem;
      right: 2.6rem;

      .login-box {
        padding: 0 0.522rem;
        padding-top: 0.54rem;

        .login-header {
          font-family: PingFangSC-Regular;
          font-size: 0.32rem;
          line-height: 0.45rem;
          color: #15CCD0;
          letter-spacing: 0.012rem;
        }

        .login-form {
          margin-top: 0.528rem;
          .el-button {
            margin-top: 0.64rem;
            background-color: #15CCD0;
            padding: 0.14rem;
            border: none;
            font-family: PingFangSC-Medium;
            font-size: 0.2rem;
            border-radius: 0px;
          }

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

            .el-checkbox__label {
              padding-left: 0.065rem;
              line-height: 0.22rem;
              font-size: 0.16rem;
              color: #999999;
            }

            .el-checkbox__inner {
              border: solid  #15CCD0 0.01rem !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;
            }
          }


          .el-input--prefix .el-input__inner {
            background-color: inherit;
            border: none;
            border: solid #15CCD0 0.01rem !important;
            height: 0.498rem;
          }

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

            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: #15CCD0;
              }

              .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: 0px;
      text-align: center;
      background-color: #333;
      position: absolute;
      bottom: 0px;
      z-index: 1;
      width: 100%;

      > a {
        line-height: 60px;
        font-size: 14px;
        color: #999;
      }
    }

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

