<template>
  <div class="page_login">
    <div class="loginTop">
      <img src="../../assets/images/loginLogo.png" alt />
    </div>
    <div class="loginBottom">
      <div class="ipts">
        <el-form ref="LoginForm" :model="LoginForm" :rules="rules">
          <el-form-item required prop="tel">
            <el-input
              placeholder="请输入手机号码"
              prefix-icon="el-icon-mobile"
              v-model="LoginForm.tel"
              clearable
              v-on:input="watchNum"
              maxlength="11"
              @input="change(LoginForm.tel)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              v-model="LoginForm.psd"
              show-password
              clearable
              v-on:input="watchNum"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <p class="forget" @click="toForgetPassword()">忘记密码?</p>
      <div class="login" @click="ToLogin()" v-show="loginshow">登录</div>
      <div class="login3" v-show="loginshowtwo">登录</div>
      <div class="login2">
        <p @click="noPassword()">免密码登录</p>
        <p class="register" @click="ToRegister()">快速注册</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ToLogin } from "@/api/micro/micro";
import { hex_md5 } from "@/utils/md5";
import { checkMobile } from "@/utils/tools";
export default {
  data() {
    var checkMobileRule = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error("请填写正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      tel: "",
      psd: "",
      LoginForm: {
        tel: "",
        psd: ""
      },
      loginshow: false,
      loginshowtwo: true,
      rules: {
        tel: [
          { required: true, message: "手机号码不能为空" },
          { validator: checkMobileRule }
        ]
      }
    };
  },
  methods: {
    ToLogin() {
      var tel = this.LoginForm.tel;
      console.log("tel是什么", tel);
      var psd = this.LoginForm.psd;
      console.log("psd是设么", psd);
      ToLogin(tel, hex_md5(psd)).then(response => {
        if (response.data.state === 1) {
          var admin = response.data.data.admin;
          console.log("admin是什么", admin);
          this.$router.push({ path: "/home?id=" + admin.id });
          var org = response.data.data.org;
          console.log("org", org);
          var info = response.data.data.info;
          console.log("info", info);
          this.$router.push({ path: "/orginfomation?id=" + info.id });
        } else {
          this.$message.error("账号或密码错误");
        }
      });
    },
    watchNum() {
      if (this.LoginForm.tel === "" || this.LoginForm.psd === "") {
        this.loginshow = false;
        this.loginshowtwo = true;
      } else {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
      if (this.LoginForm.psd.length < 6) {
        this.loginshow = false;
        this.loginshowtwo = true;
      }
      if (this.LoginForm.psd.length > 6) {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
    },
    ToRegister() {
      this.$router.push("/register");
    },
    toForgetPassword() {
      this.$router.push("/forgetpassword");
    },
    noPassword() {
      this.$router.push("/nopassword");
    },

    change(val) {
      this.LoginForm.tel = val.replace(/[^0-9]+/g, "");
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.page_login {
  overflow: hidden;
  height: 100%;
  .loginTop {
    width: 100%;
    img {
      width: 7.75rem;
      height: 2.5rem;
      border: none;
      margin: 6.25rem auto 3.75rem;
      display: block;
    }
  }
  .loginBottom {
    width: 23.4375rem;
    height: 27.625rem;
    padding-top: 1rem;
    box-sizing: border-box;
  }
  .forget {
    font-size: 0.8125rem;
    color: #1a8cff;
    margin: 0.5625rem 0 1.5rem 17.4375rem;
  }
  .login {
    width: 19.25rem;
    height: 2.875rem;
    background: #338afb;
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    color: #fff;
    text-align: center;
  }
  .login2 {
    margin-top: 1.75rem;
    font-size: 0.8125rem;
    color: rgba(81, 119, 238, 1);
    > p:first-child {
      float: left;
      margin-left: 3rem;
    }
    .register {
      margin-left: 17.4375rem;
      color: #1a8cff;
    }
  }
  .login3 {
    width: 19.25rem;
    height: 2.875rem;
    background: #e5e5e5;
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    color: #fff;
    text-align: center;
  }
}

.el-form-item__error {
  margin-left: 2.5rem;
}
.el-button--medium {
  padding: 0;
}

.el-message {
  min-width: 20rem;
}
</style>
<style lang="scss">
.loginBottom {
  .el-form-item {
    margin-bottom: 0;
  }
  .ipts {
    .el-icon-circle-close {
      margin-right: 0.625rem;
    }
    .el-input {
      display: block;
      margin: 0 auto;
      width: 19.0625rem;
      border-bottom: 1px solid #e6e6e6;
      color: rgba(155, 155, 155, 1);
      padding-left: 0.75rem;
      box-sizing: border-box;
      height: 3.375rem;
      line-height: 3.375rem;
      font-size: 1rem;
    }
    .el-input__inner {
      border: none;
      font-size: 1rem;
    }
    .el-input__prefix {
      font-size: 1.5rem;
    }
    .el-input__icon {
      font-size: 1.5rem;
      line-height: 3.375rem;
    }
  }
}
</style>
