<template>
  <div class="login-body">
    <div class="login-head">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="pb_back"
        size="1.2rem"
        @click="goBack"
      />
      <span>登录</span>
    </div>
    <div class="solid_box"></div>
    <div class="login_box">
      <div class="login_head"></div>
      <div class="login_body">
        <div class="login_text_box login_phoneNum">
          <i></i>
          <input type="text" v-model="phoneNum" placeholder="请输入手机号" />
        </div>
        <div class="login_text_box login_sms">
          <i></i>
          <input type="password" v-model="Sms" placeholder="请输入密码" />
          <!-- <van-button type="small" color="#46bb65">获取验证码</van-button> -->
          <!-- <button>
            <span>获取验证码</span>
          </button> -->
        </div>
        <!-- <div class="login_check">
          <van-checkbox
            v-model="checked"
            shape="square"
            checked-color="#51c99a"
            icon-size=".75rem"
            ><span class="checked">记住我</span></van-checkbox
          >
        </div> -->
      </div>
      <div class="login_button">
        <button @click="findPhone">
          <span>登录</span>
        </button>
        <div class="login_register" @click="goTo('/register')">
          <span>立即注册</span>
          <van-icon name="arrow" color="#9c9c9c" size=".75rem" />
        </div>
      </div>
    </div>
    <!-- <van-button type="primary" @click="login">登录</van-button> -->
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      phoneNum: "",
      Sms: "",
      checked: false,
      sqlPassword: "",
      userInfo: [],
      isU: "",
    };
  },
  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() {
      if (this.phoneNum === "") {
        this.$toast.fail("请输入手机号");
        return;
      } else if (!/^1\d{10}$/.test(this.phoneNum)) {
        this.$toast.fail("请输入正确的手机号");
        return;
      } else if (this.Sms === "") {
        this.$toast.fail("请输入密码");
        return;
      }
      let params = { phone: this.phoneNum };
      this.ajax
        .get(this.$store.state.api + "findPhone", params)
        .then((res) => {
          if (res.data[0].length > 0) {
            if(res.data[0][0].state == 0){
              this.$toast.fail("此账号已被屏蔽登录,请咨询管理员或者老师");
              return;
            }

            if (res.data[0][0].type == 2) {
              // this.sqlPassword = res.data[0][0].userpassword;
              // this.userInfo = res.data[0][0];
              this.isU = 1;
            } else {
              this.isU = 2;
            }
          } else {
            this.isU = false;
          }
          this.login();
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    login() {
      if (this.time()) {
        var _this = this;
        var isU = _this.isU;
        if (isU == 1 || isU == 2) {
          let params = [
            {
              uname: this.phoneNum,
              upassword: this.Sms,
              // sqlpassword: this.sqlPassword,
            },
          ];
          _this.ajax
            .post(_this.$store.state.api + "login", params)
            .then((res) => {
              if (res.data.status == "1") {
                _this.$toast.success("登录成功");
                _this.userInfo = res.data[0][0];
                _this.$cookies.set("login","1",-1)
                _this.$cookies.set("userid",_this.userInfo.userid,-1)
                _this.$cookies.set("userInfo",_this.userInfo,-1)
                // window.sessionStorage.setItem("login", true);
                // window.sessionStorage.setItem(
                //   "userInfo",
                //   JSON.stringify(_this.userInfo)
                // );
                _this.$store.commit("update", ["isLogin", true]);
                _this.$store.commit("update", ["userInfo", _this.userInfo]);
                // console.log(_this.$store.state);
                _this.$router.push("/");
              } else {
                _this.$toast.fail("密码错误");
              }
              console.log(res.data);
            })
            .catch((err) => {
              this.$toast.fail("登录失败");
              console.error(err);
            });
        } else {
          this.$toast.fail("此账号还未注册请去注册");
        }
        //  else if (isU == 2) {
        //   this.$toast.fail("此账号角色不是学生");
        // }
      } else {
        return false;
      }
      // window.sessionStorage.setItem("login", true);
      // Toast.success("登录成功")
      // setTimeout(() => {
      //   this.$router.push("/");
      // }, 1000);
    },
    goTo(path) {
      this.$router.push(path);
    },
    goBack(){
      this.$router.push('/');
    }
  },
};
</script>

<style scoped>
.pb_back {
  position: absolute;
  left: 0.3rem;
  top: 50%;
  transform: translate(0, -50%);
}
.login-body {
  background-image: url("../assets/icon/login_background.png");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.login-head {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  color: #ffffff;
  text-align: center;
  font-size: 0.9rem;
  position: absolute;
  top: 0;
}
.solid_box {
  border-radius: 5px;
  height: 3rem;
  width: 17rem;
  background-color: #ffffff66;
  position: absolute;
  top: 4rem;
  left: 50%;
  transform: translate(-50%, 0);
}
.login_box {
  border-radius: 5px;
  min-height: 10rem;
  width: 18rem;
  background-color: #ffffff;
  position: relative;
  top: 4.7rem;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: #b1b1b1 0px 0px 10px 0px;
  padding: 3rem 0 3rem 0;
}
.login_head {
  background-image: url("../assets/icon/denglutouxiang.png");
  height: 3.5rem;
  width: 3.5rem;
  background-size: 100% 100%;
  margin: 1rem auto 2rem;
}
.login_body {
}
.login_text_box {
  display: flex;
  width: 88%;
  margin: 1.5rem auto 0;
  height: 1.5rem;
}
.login_text_box input {
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 0.8rem;
  margin-left: 0.2rem;
  text-indent: 0.1rem;
}
.login_phoneNum input {
  width: calc(100% - 2.6rem);
}
.login_phoneNum i {
  background-image: url("../assets/icon/shoujihao.png");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 100% 100%;
  display: block;
  margin-top: 0.1rem;
  line-height: 1rem;
  vertical-align: text-top;
  background-repeat: no-repeat;
}
.login_sms input {
  /* width: calc(100% - 1.9rem - 6rem); */
  width: calc(100% - 2.6rem);
}
.login_sms i {
  background-image: url("../assets/icon/yanzhengma.png");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 100% 100%;
  display: block;
  margin-top: 0.1rem;
  line-height: 1rem;
  vertical-align: text-top;
  background-repeat: no-repeat;
}
.login_sms button {
  color: white;
  background: rgb(81, 201, 154);
  border: none;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  height: 1.5rem;
  width: 5rem;
  font-size: 0.65rem;
  line-height: 1.5rem;
  float: left;
  margin: -0.25rem 0 0 0.2rem;
}
.login_check {
  font-size: 0.7rem;
  display: flex;
  justify-content: flex-end;
  width: 90%;
  margin: 0.8rem auto 0;
}
.login_check .checked {
  color: #828282 !important;
}
.login_button {
  width: 80%;
  margin: 2rem auto 1rem;
}

.login_button button {
  color: white;
  background: rgb(81, 201, 154);
  border: none;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s;
  height: 2rem;
  width: 100%;
  font-size: 0.95rem;
  line-height: 2rem;
}
button:active {
  background: rgb(46, 185, 132);
}
.login_register {
  color: #9c9c9c;
  font-size: 0.65rem;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
</style>
