<template>
  <div class="sys-login" style="overflow: hidden;">
    <div class="login-logo" style="display:flex;">
      <img style="width:50px;height:50px;" src="../../assets/logo_yxk.png" alt />
      <h2 style="margin-left:10px;color:#fff">江西液压件股份有限公司</h2>
      <!-- <img src="../../assets/logo1.png" alt /> -->
    </div>
    <!-- <div class="login-slogan">
      赋能万物&nbsp;连接未来
    </div> -->
    <div class="login-area">
      <el-divider class="login-divider">
        <div class="login-title">登录</div>
      </el-divider>
      <div class="form-group1">
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top" label-width="">
          <el-form-item prop="name">
            <el-input v-model="loginForm.name" type="text" placeholder="请输入用户名"
              prefix-icon="iconfont icon-iLinkapp-"></el-input>
          </el-form-item>
          <el-form-item prop="password" class="login-psw">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
              @keyup.enter.native="submitForm()" show-password></el-input>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-checkbox v-model="loginForm.auto">自动登录</el-checkbox>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" ref="loginBtn" class="login-btn" @click="submitForm()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      loginForm: {
        name: "",
        password: "",
        auto: false
      },
      loginRules: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      sysMsg: ""
    };
  },
  computed: {},
  methods: {
    ...mapActions({
      login: "auth/loginByUser",
      getNavList: "auth/getNavList"
    }),
    submitForm() {
      var self = this;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.login({
            name: this.loginForm.name,
            password: this.loginForm.password
          })
            .then(res => {
              if (res.code === 0) {
                localStorage.removeItem("permissionList");
                self.getNavList().then(res => {
                  if (res.code == 0) {
                    this.$router.push("home");
                  }
                });
              } else {
                this.$alert(res.msg, "提示", { type: "warning" });
              }
            })
            .catch(reason => {
              this.$alert("用户名或密码错误", "提示", { type: "warning" });
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style>
.sys-login {
  height: 100%;
  /* background: #fff; */
  background-image: url(../../assets/bg_login.png);
  background-position: center center;
  /* 图片居中 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: cover;
  /* 覆盖整个屏幕 */
  /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='35.605' cx='185.1' cy='286.35' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.8' cx='57.44' cy='151.68' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='27.595' cx='843.22' cy='195.61' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='55.4' cx='79.95' cy='304.45' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.2' cx='419.65' cy='331.62' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='33.66' cx='1110.51' cy='176.8' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='24.325' cx='51.8' cy='349.83' fill='url(%26quot%3b%23SvgjsLinearGradient1047%26quot%3b)'%3e%3c/circle%3e%3ccircle r='43.22' cx='693.82' cy='50.84' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1041'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='113.89' y1='286.35' x2='256.31' y2='286.35' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='788.03' y1='195.61' x2='898.41' y2='195.61' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-30.849999999999994' y1='304.45' x2='190.75' y2='304.45' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='385.25' y1='331.62' x2='454.05' y2='331.62' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1043.19' y1='176.8' x2='1177.83' y2='176.8' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='3.1499999999999986' y1='349.83' x2='100.44999999999999' y2='349.83' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1047'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
  color: #fff;
  font-size: 16px;
}

.login-logo {
  padding: 2%;
}

.login-logo img {
  vertical-align: middle;
}

.login-logo img:first-child {
  width: 10%;
  max-width: 97px;
}

.login-logo img:last-child {
  width: 18%;
  max-width: 294px;
}

/* .login-logo span {
  margin: 0px 1%;
  display: inline-block;
  height: 37px;
  width: 1px;
  background: #fff;
  vertical-align: middle;
} */
.login-slogan {
  position: fixed;
  left: 25%;
  top: 40%;
  transform: translate(0px, -50%);
  /* color: white; */
  color: #333;
  font-size: 2em;
  width: 8em;
  height: 1.5em;
  border-right: 1px solid transparent;
  animation: login-slogan 2s steps(42, end), blink-caret 0.75s step-end infinite;
  font-family: Consolas, Monaco;
  word-break: break-all;
  overflow: hidden;
}

/* 打印效果 */
@keyframes login-slogan {
  from {
    width: 0;
  }

  to {
    width: 8em;
  }
}

/* 光标 */
@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: currentColor;
  }
}

.login-area {
  position: fixed;
  right: 6%;
  top: 55%;
  transform: translate(0px, -50%);
  width: 240px;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 0 5px 0 #f2f2f2;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); */
  /* background-image: linear-gradient(
    -225deg,
    #5d9fff 0%,
    #b8dcff 48%,
    #6bbbff 100%
  ); */
  /* background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%); */
  padding: 90px 60px;
}

.login-divider {
  position: absolute !important;
  top: 10px;
  left: 0px;
  right: 0px;
  text-align: center;
}

.login-title {
  /* position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  text-align: center; */
  font-size: 18px;
  color: #3d69e1;
}

.login-area input.el-input__inner {
  margin-bottom: 5px;
  padding-left: 45px;
  /* height: 40px;
  line-height: 40px; */
  border-radius: 5px;
  color: #2591ed;
  font-size: 15px;
}

.login-area input.el-input__inner::placeholder {
  color: #2591ed;
  font-size: 15px;
}

.login-area .el-input__icon {
  padding-left: 10px;
  color: #2591ed;
  font-size: 20px;
}

.login-area .el-checkbox {
  color: #fff;
}

.login-psw {
  margin: 20px 0 !important;
}

.login-btn {
  width: 100%;
  font-size: 16px !important;
  border-radius: 5px;
  letter-spacing: 8px;
  background: #3d69e1;
  margin-top: 50px !important;
}

.login-btn:hover {
  background: #3457b2 !important;
}
</style>
