<template>
  <div class="login_content">
    <!-- <el-button type="primary" @click="login()">登录</el-button> -->
    <div class="login_box" v-show="islogin">
      <div style="padding: 0px 20px">
        <div class="login_title">
          <span>劳动教育管理端平台</span>
        </div>
        <el-form
          label-position="right"
          label-width="80px"
          style="margin-top: 30px"
        >
          <el-form-item label="手机号码">
            <el-input
              v-model="phoneNum"
              auto-complete="off"
              placeholder="请输入手机号码"
              style="width: 100%"
              @keyup.enter.native="findPhone"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model="password"
              auto-complete="off"
              placeholder="请输入密码"
              type="password"
              style="width: 100%"
              @keyup.enter.native="findPhone"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="login_button">
          <button @click="findPhone()">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      islogin: true,
      phoneNum: "",
      password: "",
      sqlPassword: "",
      schoolArray: [],
      now: "",
      userInfo: [],
    };
  },

  methods: {
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    findPhone() {
      // this.$router.push("/");
      if (this.phoneNum === "") {
        this.$message.error("请输入账号");
        return;
      } else if (this.password === "") {
        this.$message.error("请输入密码");
        return;
      }
      let params = { un: this.phoneNum };
      this.ajax
        .get(this.$store.state.api + "findPhone", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            if (res.data[0][0].type == 0) {
              // this.sqlPassword = res.data[0][0].userpassword;
            } else {
              this.$message.error("您的账号不是管理员账号");
              return;
            }
          } else {
            this.$message.error("请使用管理员账号登录");
            return;
          }
          this.login();
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    login() {
      if (this.time()) {
        // this.$store.commit("update", ["isLogin", true]);
        // window.sessionStorage.setItem("login", true);
        // this.$router.push("/");
        var _this = this;
        let params = [
          {
            uname: this.phoneNum,
            upassword: this.password,
            // sqlpassword: this.sqlPassword,
          },
        ];
        _this.ajax
          .post(_this.$store.state.api + "login", params)
          .then((res) => {
            if (res.data.status == "1") {
              _this.$message({
                message: "登录成功",
                type: "success",
              });
              _this.userInfo = res.data[0][0];
              _this.$cookies.set("Alogin", "1", -1);
              // _this.$cookies.set("userid",_this.userInfo.userid,-1)
              _this.$cookies.set("AuserInfo", _this.userInfo, -1);
              _this.$store.commit("update", ["isLogin", true]);
              _this.$store.commit("update", ["userInfo", _this.userInfo]);
              // console.log(_this.$store.state);
              this.$router.push("/");
            } else {
              _this.$message.error("密码错误");
            }
            console.log(res.data);
          })
          .catch((err) => {
            _this.$message.error("登录失败");
            console.error(err);
          });
      }
    },
  },
};
</script>

<style scoped>
.login_content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - (67.5px * 2));
  /* position: absolute; */
  width: 100%;
}
.login_box {
  width: 23%;
  min-width: 400px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 20px #eee;
}

/* .userLogin img {
  width: 50%;
  display: inline-block;
  width: 18px;
  padding-right: 5px;
  border-right: 1px solid #2a97ff;
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 999;
} */

/* .el-input >>> input {
  width: 100%;
  padding: 15px 0 15px 40px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 14px;
} */
/* .userLogin {
  margin-top: 25px;
  position: relative;
} */
.login_button {
  margin-top: 10px;
}
.login_button button {
  width: 100%;
  color: #fff;
  background: #2a97ff;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-size: 18px;
  text-align: center;
  outline: none;
  cursor: pointer;
}
.login_title {
  text-align: center;
  font-size: 26px;
  font-weight: 600;
}
</style>
