<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="text" v-model="Sms" placeholder="请输入密码" />
          <!-- <van-button type="small" color="#46bb65">获取验证码</van-button> -->
          <!-- <button>
            <span>获取验证码</span>
          </button> -->
        </div>
        <!-- <div class="login_text_box login_sms">
          <i></i>
          <input type="password" v-model="rSms" placeholder="请重新输入密码" />
          <van-button type="small" color="#46bb65">获取验证码</van-button>
          <button>
            <span>获取验证码</span>
          </button>
        </div> -->
        <div class="login_text_box login_sms s_school">
          <i></i>
          <input type="text" v-model="name" placeholder="请重新孩子真实姓名" />
        </div>
        <div class="login_text_box register_school">
          <i></i>
          <el-select v-model="value" placeholder="请选择学校..." @change="getClass">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
            <div class="login_text_box register_school c_school">
          <i></i>
          <el-select v-model="classJ" placeholder="请选择班级..." no-data-text="请选择学校">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="login_button">
        <button @click="findPhone">
          <span>注册</span>
        </button>
      </div>
    </div>
    <!-- <van-button type="primary" @click="login">登录</van-button> -->
  </div>
</template>

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

export default {
  data() {
    return {
      phoneNum: "",
      Sms: "",
      rSms: "",
      now: "",
      options: [
      ],
      value: "",
      classList:"",
      classJ:"",
      name:"",
    };
  },
  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;
        }
      }
    },
    init() {
      this.phoneNum = "";
      this.Sms = "";
      this.rSms = "";
      this.value = "";
      this.classList= "";
    },
    findPhone() {
      var reg = /^1\d{10}$/;
      if (this.phoneNum === "") {
        this.$toast.fail("请填写手机号");
        return;
      } else if (!reg.test(this.phoneNum)) {
        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) {
            this.$toast.fail("此手机号已注册");
          } else {
            this.register();
          }

          // console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    register() {
      if (this.Sms === "") {
          this.$toast.fail("请输入密码");
          return;
        } else if (this.Sms.length < 6) {
          this.$toast.fail("输入的密码需不少于6位");
          return;
        }

        // if (this.rSms === "") {
        //   this.$toast.fail("请再次输入密码");
        //   return;
        // } else if (this.rSms !== this.Sms) {
        //   this.$toast.fail("两次输入密码不一致!");
        //   return;
        // }
        if(this.name === ''){
          this.$toast.fail("请填写孩子真实姓名");
          return;
        }
        if(this.value === ''){
          this.$toast.fail("请选择学校");
          return;
        }
         if(this.classJ === ''){
          this.$toast.fail("请选择班级");
          return;
        }
      if (this.time()) {
        let params = [
          {
            unname: this.phoneNum,
            upassword: this.Sms,
            sid: "",
            type: 2,
            oid: this.value,
            sname:this.name,
            class:this.classJ,
          },
        ];
        this.ajax
          .post(this.$store.state.api + "registerStudent", params)
          .then((res) => {
            this.$toast.success("注册成功");
            this.init();
            this.$router.push({ path: "/login" });
          })
          .catch((err) => {
            this.$toast.fail("注册失败");
            console.error(err);
          });
      } else {
        return false;
      }
    },
    //查询学校
    getOrg() {
      this.ajax
        .get(this.$store.state.api + "getAllOrg", "")
        .then((res) => {
          this.options = res.data[0];
          console.log(res.data[0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    goTo(path) {
      this.$router.push(path);
    },
    goBack() {
      this.$router.isBack = true;
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
        //获取班级
    getClass() {
      let params = { cid: this.value };
      this.ajax
        .get(this.$store.state.api + "findClassByTeacher", params)
        .then((res) => {
          this.classList = res.data[0];
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.getOrg()
  },
};
</script>

<style scoped>
input::-webkit-input-placeholder {
  color: rgb(202, 205, 212);
}
.register_school .el-select {
  width: calc(100% - 1.7rem);
  margin-left: 0.1rem;
}
.register_school >>> .el-input__inner {
  border: none !important;
  border-bottom: 1px solid #eee !important;
  height: 1.5rem;
  padding: 0 0.5rem 0.5rem;
}

.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;
  display: flex;
  align-items: center;
  justify-content: center;
}
.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: 1rem 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;
  align-items: center;
}
.login_text_box input {
  border: none;
  border-bottom: 1px solid #eee;
  font-size: 0.7rem;
  margin-left: 0.2rem;
  text-indent: 0.1rem;
  padding: 0 0.5rem 0.5rem;
}
.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;
}
.register_school {
}
.register_school i {
  background-image: url("../assets/icon/school.png");
  width: 1.2rem;
  height: 1.2rem;
  background-size: 100% 100%;
  display: block;
  /* margin-top: 0.5rem; */
  line-height: 1rem;
  vertical-align: text-top;
  background-repeat: no-repeat;
}
.c_school i {
  background-image: url("../assets/icon/class.png") !important;
}
.s_school i {
  background-image: url("../assets/icon/s1.png") !important;
}
.login_sms input {
  /* width: calc(100% - 2.9rem - 5rem); */
  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>
