<template>
  <div class="bg">
    <div class="login-inner-bg login">
      <h2>{{ productName }}</h2>
      <div class="user_style">
        <h3>欢迎登录</h3>
        <el-form :model="user" :rules="rules" ref="user" id="loginform" class="demo-ruleForm">
          <el-form-item prop="account">
            <el-input class="username" v-model="user.account" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" class="password" @keyup.native="login('user')" v-model="user.password"
              placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item class="login-btn">
            <el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { loginIn } from "@/api/login.js";
  import { api, getAction } from "@/api/manageApi";
  export default {
    name: "Login",
    data () {
      return {
        user: {
          account: "",
          password: "",
          checkStatus: false,
        },
        productName: "",
        rules: {
          account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
          password: [{ required: true, message: "请填写密码", trigger: "blur" }],
        },
      };
    },
    created () {
      const params = {};
      const queryOptions = {
        conditionGroup: {
          conditions: [
            {
              property: "code",
              value: "BDCJGPT",
              operator: "EQ",
            },
          ],
          queryRelation: "AND",
        },
      };
      params.queryOptions = JSON.stringify(queryOptions);
      //根据子系统code获取子系统详细信息
      getAction(api.subsystem, params).then((res) => {
        if (res.status === 1) {
          this.productName = res.content[0].name;
          this.$store.dispatch("products/setData", res.content[0]);
        } else {
          this.$message.error({ message: res.message, showClose: true });
        }
      });
    },
    mounted () {
      // this.checkUserName();
    },
    methods: {
      //记住用户名
      checkUserName: function (flag) {
        this.user.checkStatus = flag;
        if (this.user.checkStatus) {
          localStorage.setItem("accountId", this.user.account);
          let name = localStorage.getItem("accountId");
          if (name === "") {
            return;
          } else {
            this.user.account = name;
          }
        } else {
          this.user.account = localStorage.getItem("accountId");
        }
      },
      login (user) {
        var self = this;
        this.$refs[user].validate((valid) => {
          if (valid) {
            loginIn(self.user.account, self.user.password)
              .then((res) => {
                if (res.status === 1) {
                  //存储token
                  sessionStorage.setItem("token", `Bearer ${res.content}`);
                  //登录成功后需判断有无重定向，没有重定向则跳转首页
                  this.$router.replace(this.$route.query.redirect || "/");
                } else {
                  //错误处理
                }
              })
              .catch((error) => {
                // console.dir(error);
              });
          }
        });
      },
    },
    components: {},
  };
</script>
<style scoped lang="scss">
  .username,
  .password {
    position: relative;

    &:before {
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      left: 10px;
      top: 7px;
      background-size: 100% 100%;
    }

    /deep/ .el-input__inner {
      text-indent: 24px;
      border: 1px solid rgba(11, 161, 248, 0.4);
      background-color: rgba(6, 135, 205, 0.3) !important;
    }
  }

  .username::before {
    background-image: url(../../image/username.png);
  }

  .password::before {
    background-image: url(../../image/password.png);
  }

  .bg {
    width: 100%;
    height: 100%;
    min-width: 1440px;
    min-height: 560px;
    background: url(../../image/loginBoxBg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
  }

  .login-inner-bg {
    background: url(../../image/loginBg.png) no-repeat;
    width: 21.6%;
    height: 43%;
    min-width: 360px;
    min-height: 380px;
    top: 30%;
    right: 20%;
    position: absolute;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 56px;

    h2 {
      width: 100%;
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      position: absolute;
      right: 0;
      top: -70px;
      background-image: linear-gradient(
        180deg,
        rgba(99, 163, 255, 1) 0,
        rgba(99, 163, 255, 1) 0,
        rgba(182, 220, 255, 1) 49.731445%,
        rgba(114, 190, 255, 1) 100%,
        rgba(114, 190, 255, 1) 100%
      );
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
      font-family: AlimamaShuHeiTi-Bold;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .login {
    .user_style {
      h3 {
        color: #fff;
        font-size: 22px;
        font-weight: normal;
        text-align: center;
        margin: 16px auto 34px;
        font-weight: 400;
      }
    }

    .btn {
      width: 100%;
      height: 6vh;
      background-color: #00c2de;
      border-radius: 5px;
      font-size: 1.4vw;
      color: #ffffff;
    }

    .btn:hover {
      cursor: pointer;
      background-color: #2d8cf0;
    }
  }

  .login #loginform {
    .el-form-item {
      margin-bottom: 24px !important;
    }

    .login-btn {
      margin-top: 40px !important;
    }

    .el-button {
      font-size: 18px;
      background: #0d8cc0 !important;
      color: #ffffff !important;
      cursor: pointer !important;
    }

    .el-input__inner {
      width: 100% !important;
    }

    .el-checkbox__label {
      color: #fff;
    }
  }

  .inputUser .ivu-input {
    padding: 6px 24px !important;
    border: 1px solid #9f9f9f !important;
  }
</style>