<template>
  <div class="bg">
    <div class="login">
      <el-form
        :model="ruleForm2"
        status-icon
        :rules="rules2"
        ref="ruleForm2"
        class="demo-ruleForm login_form"
      >
        <h1>小程序第三方管理平台</h1>
        <el-form-item class="inputs" label="" prop="username">
          <el-input
            v-model.number="ruleForm2.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item class="inputs" label="" prop="password">
          <el-input
            type="password"
            v-model="ruleForm2.password"
            auto-complete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item class="inputs" label="" prop="captcha">
          <el-input
            v-model="ruleForm2.captcha"
            @keydown.enter.native="login('ruleForm2')"
            auto-complete="off"
            placeholder="看不清？点击图片刷新"
          >
          </el-input>
          <div class="refreImg">
            <img alt="" :src="src" @click="refreshCode" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            :loading="submitButton"
            type="primary"
            @click="login('ruleForm2')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
      <div
        style="position: absolute;top: 96%;right: 2%;color: #fff;"
        id="_version"
      ></div>
    </div>
  </div>
</template>
<script>
import AjaxUtil from "../../core/tool/ajaxService";
import Util from "../../core/tool/commonUtil";
import { configUrl } from "./../../utils/config.js";
export default {
  extends: AjaxUtil,
  name: "Login",
  data() {
    return {
      submitButton: false,
      src: "",
      ruleForm2: {
        username: "",
        password: "",
        captcha: "",
      },
      rules2: {
        username: [
          {
            required: true,
            message: "抱歉，不能识别您输入的账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "抱歉，不能识别您输入的密码",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "抱歉，不能识别您输入的验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login: function() {
      this.submitButton = true;
      let name = this.ruleForm2.username;
      let pwd = this.ruleForm2.password;
      let captcha = this.ruleForm2.captcha;
      this.postFetch(configUrl.doLogin, {
        username: name,
        password: pwd,
        captcha: captcha,
      })
        .then((d) => {
          console.log(d);
          this.submitButton = false;
          this.showNotify(
            "success",
            "欢迎进入小程序第三方管理平台",
            "登录成功"
          );
          Util.cookie.setCookie("uname", d.data.username);
          this.$router.push({
            path: "/layout",
          });
        })
        .catch((err) => {
          this.submitButton = false;
          this.refreshCode();
          this.$message.error(err.data);
        });
    },
    refreshCode: function() {
      this.src = configUrl.captcha + "?t=" + Date();
      console.log(this.src);
    },
  },
  created() {
    this.refreshCode();
  },
  mounted() {
    let metas = document.getElementsByTagName("meta");
    let version = "";
    for (let index = 0; index < metas.length; index++) {
      if (metas[index].getAttribute("name") == "version") {
        version = metas[index].getAttribute("content");
        break;
      }
    }
    console.log(configUrl.getversion, "configUrl.getversion");

    this.getFetch(configUrl.getversion)
      .then((d) => {
        console.log(d, 22222);
        document.getElementById("_version").innerHTML =
          "version:" + version.substr(4) + "." + d.data.split("_")[1];
      })
      .catch((e) => {
        document.getElementById("_version").innerHTML =
          "version:" + version.substr(4);
      });
  },
};
</script>

<style scoped>
.qrcode {
  width: 36px;
  position: absolute;
  right: 7px;
  top: 5px;
  z-index: 1000;
}
#login_container {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}
.inputs {
  width: 315px;
  height: 44px;
  margin: 0 auto 22px;
  line-height: 44px;
}
.el-input__inner {
  font-size: 16px !important;
  color: rgb(0, 0, 0, 0.25) !important;
  padding: 0 35px !important;
}

.refreImg img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  cursor: pointer;
}

a {
  text-decoration: none;
}

.frechBox {
  display: block;
  margin-top: -10px;
}

.refreImg {
  width: 38.2%;
  height: 40px;
  /* line-height: 20px; */
  position: absolute;
  z-index: 1000;
  right: 0;
  top: -1px;
  background-color: #ededed;
}

.bg {
  background: url(../../static/images/login-bg.png) no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
}

.login h1 {
  font-size: 22px;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  line-height: 24px;
  margin-bottom: 28px;
}

.login-item {
  width: 368px;
  margin: 0 auto;
  height: 40px;
  margin-bottom: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.login-item input {
  width: 100%;
  line-height: 38px;
  background: #fff;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.25);
  padding: 0 0 0 36px;
  display: block;
  border: none;
  outline: none;
}

.login-btn {
  width: 315px;
  line-height: 44px;
  background: #3fc497;
  text-align: center;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
  padding: 0;
  border: none;
  cursor: pointer;
  margin: 0 auto;
}

.forgot-password {
  color: rgba(24, 144, 255, 1);
  width: 368px;
  margin: 0 auto;
  text-align: right;
  line-height: 22px;
  margin-bottom: 4px;
}

.forgot-password label {
  font-weight: 400 !important;
  font-size: 14px;
  cursor: pointer;
  margin-right: 26px;
  color: #555;
}

.el-input__inner {
  font-size: 16px !important;
  color: rgb(0, 0, 0, 0.25) !important;
  padding: 0 35px !important;
}
.login {
  background: #f9fafc;
  border-radius: 6px;
  overflow: hidden;
  width: 375px;
  position: relative;
  left: 50%;
  top: 50%;
  height: 340px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.24);
}
</style>
