<template>
  <div class="bg">
    <div class="title">
      <img src="../../image/bdclogo.png" alt="" />
      <h2>{{ BASE_API.TITLE }}</h2>
    </div>
    <div class="login-inner-bg login">
      <div class="user_style">
        <h3>用户登录</h3>
        <el-form
          :model="userInfo"
          :rules="rules"
          ref="user"
          id="loginform"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              class="username"
              v-model="userInfo.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              class="password"
              @keyup.enter.native="login('user')"
              v-model="userInfo.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <!-- <el-form-item prop="yz">
              <div class="flex-container">
                <div class="flex-input">
                  <el-input class="yz" @keyup.native="login('user')" v-model="userInfo.yz" placeholder="请输入验证码"></el-input>
                </div>
                <div class="flex-line"></div>
                <div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
                <div class="flex-renovate">
                  <font id="renovate" @click="verification">换一批</font>
                </div>
              </div>
            </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 axios from "axios";
export default {
  name: "sbLogin",
  data() {
    return {
      userInfo: {
        username: "admin",
        password: "123",
        redirectUrl: "",
        yz: "",
        checkStatus: false,
      },
      productName: "",
      rules: {
        username: [{ required: true, message: "请填写帐号", trigger: "blur" }],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.userInfo.redirectUrl = localStorage.getItem("sjsb-location");
  },
  methods: {
    verification() {
      let str = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ",
        code = "",
        i = 0;
      for (; i++ < 4; )
        code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
      setTimeout(() => {
        let canvas = document.getElementById("s-canvas"),
          ctx = canvas.getContext("2d");
        canvas.width = 80;
        canvas.height = 28;
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, 80, 28);
        for (i = 0; i < code.length; i++) {
          this.drawText(ctx, code[i], i);
        }
      }, 0);
    },
    drawText(ctx, txt, i) {
      ctx.fillStyle = this.randomColor(50, 160);
      ctx.font = "18px SimHei";
      let x = (i + 1) * (80 / (4 + 1)),
        y = this.randomNum(18, 28 - 5);
      ctx.translate(x, y);
      ctx.fillText(txt, 0, 0);
      ctx.rotate((-0 * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    randomColor(min, max) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //记住用户名
    checkUserName: function (flag) {
      this.userInfo.checkStatus = flag;
      if (this.userInfo.checkStatus) {
        localStorage.setItem("usernameId", this.userInfo.username);
        let name = localStorage.getItem("usernameId");
        if (name === "") {
          return;
        } else {
          this.userInfo.username = name;
        }
      } else {
        this.userInfo.username = localStorage.getItem("usernameId");
      }
    },
    login() {
        axios.post(window._config.services.management + "/management/cas/login", this.userInfo).then(response => {
              if (response.data.status === 1) {
                  if (response.data.content.location) {
                      window.location.href = response.data.content.location
                  }
              } else {
                  this.$message.error(response.data.message)
              }
          }).catch(error => {
              console.log(error)
              this.$message.error(error.message)
          })
    },
  },
};
</script>
<style scoped lang="scss">
.username,
.password,
.yz {
  position: relative;

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

  /deep/ .el-input__inner {
    color: #000 !important;
    text-indent: 24px;
  }
}

.flex-container {
  position: relative;
  display: -webkit-flex;
  display: flex;
}

.flex-input {
  width: 100%;
}

.flex-line {
  position: absolute;
  width: 1px;
  height: 64%;
  margin: 5px;
  right: 36%;
  background-color: #cccccc;
}

.flex-img {
  position: absolute;
  margin: 2px;
  right: 16%;
}

.flex-renovate {
  position: absolute;
  margin: 1px;
  right: 3%;
}

#renovate {
  color: #3f8fea;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

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

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

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

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

.title {
  width: 24%;
  height: 6%;
  top: 20%;
  right: 38%;
  position: absolute;

  img {
    width: 60px;
    height: 60px;
    top: 0%;
    left: 2%;
    position: absolute;
  }

  h2 {
    top: 25%;
    left: 22%;
    position: absolute;
    width: 383px;
    height: 42px;
    font-size: 28px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0px 4px 4px #002c95;
  }
}

.login-inner-bg {
  background: white;
  width: 24.6%;
  min-width: 360px;
  top: 30%;
  right: 38%;
  position: absolute;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 56px;
}

.login {
  .user_style {
    h3 {
      font-weight: normal;
      text-align: center;
      margin: -10px auto 28px;
      font-weight: 400;
      width: 125px;
      height: 29px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
    }
  }

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

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

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

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

  .el-button {
    font-size: 18px;
    border-radius: 0;
    background: #4162d8 !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>