<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 style="display: flex; justify-content: flex-end">
          <el-button type="text" @click="islogin = false">立即注册</el-button>
        </div>
        <div class="login_button">
          <button @click="findPhone()">登录</button>
        </div>
      </div>
    </div>
    <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"
          :rules="rules2"
          ref="ruleForm2"
          :model="registerForm"
        >
          <el-form-item label="登录账号" prop="phone">
            <el-input
              v-model="registerForm.rphoneNum"
              auto-complete="off"
              placeholder="请输入登录账号"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              v-model="registerForm.rpassword"
              auto-complete="off"
              placeholder="请输入密码"
              type="password"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              v-model="registerForm.repassword"
              auto-complete="off"
              placeholder="请再输入一遍密码"
              type="password"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择学校" prop="school">
            <el-select
              filterable
              allow-create
              default-first-option
              v-model="registerForm.school"
              style="width: 80%"
              placeholder="请选择学校"
            >
              <el-option
                v-for="item in schoolArray"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: flex-end">
          <el-button type="text" @click="islogin = true">返回登录</el-button>
        </div>
        <div class="login_button">
          <button @click="register()">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 验证手机
    var checkPhone = (rule, value, callback) => {
      var _this = this;
      let reg = /^1\d{10}$/;
      if (_this.registerForm.rphoneNum === "") {
        callback(new Error("请输入登录账号"));
      } else {
        let params = { phone: _this.registerForm.rphoneNum };
        this.ajax
          .get(this.$store.state.api + "findPhone", params)
          .then((res) => {
            if (res.data[0].length > 0) {
              callback(new Error("此登录账号已注册"));
            } else {
              callback();
            }
            console.log(res.data[0]);
          })
          .catch((err) => {
            callback();
            console.error(err);
          });
      }
    };
    var validatePass = (rule, value, callback) => {
      var _this = this;
      if (_this.registerForm.rpassword === "") {
        callback(new Error("请输入密码"));
      } else {
        if (_this.registerForm.rpassword.length < 6) {
          callback(new Error("输入的密码需不少于6位"));
        } else if (_this.registerForm.repassword !== "") {
          _this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var _this = this;
      if (_this.registerForm.repassword === "") {
        callback(new Error("请再次输入密码"));
      } else if (
        _this.registerForm.repassword !== _this.registerForm.rpassword
      ) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      islogin: true,
      phoneNum: "",
      password: "",
      sqlPassword: "",
      openId: this.$route.query.yuser,
      schoolArray: [],
      now: "",
      userInfo: [],
      registerForm: {
        rphoneNum: "",
        rpassword: "",
        repassword: "",
        school: "",
      },
      rules2: {
        phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: ["blur", "change"],
          },
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        school: [
          { required: true, message: "请选择活动区域", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getOrg();
  },
  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;
        }
      }
    },
    //查询学校
    getOrg() {
      this.ajax
        .get(this.$store.state.api + "getAllOrg", "")
        .then((res) => {
          this.schoolArray = res.data[0];
          console.log(res.data[0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    register() {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          if (this.time()) {
            let params = [
              {
                unname: this.registerForm.rphoneNum,
                upassword: this.registerForm.repassword,
                sid: "",
                type: 4,
                oid: this.registerForm.school,
              },
            ];
            this.ajax
              .post(this.$store.state.api + "registerSchool", params)
              .then((res) => {
                this.$message({
                  message: "注册成功",
                  type: "success",
                });
                this.registerForm = {
                  rphoneNum: "",
                  rpassword: "",
                  repassword: "",
                  school: "",
                };
                this.islogin = true;
              })
              .catch((err) => {
                this.$message.error("注册失败");
                console.error(err);
              });
          }
        } else {
          return false;
        }
      });
    },
    findPhone() {
      if (this.phoneNum === "") {
        this.$message.error("请输入账号");
        return;
      } else if (this.password === "") {
        this.$message.error("请输入密码");
        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].type == 4) {
              // 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,
            openId: this.openId,
            // sqlpassword: this.sqlPassword,
          },
        ];
        _this.ajax
          .post(_this.$store.state.api + "loginBYingShuo", params)
          .then((res) => {
            if (res.data.status == "1") {
              _this.$cookies.set("yingshuo", "1", -1);
              _this.$message({
                message: "登录成功",
                type: "success",
              });
              _this.userInfo = res.data[1][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>
