<!-- 医生验证 -->
<template>
  <main>
    <header>
      <img
        src="../../assets/images/doctor.png"
        alt=""
      />
    </header>
    <div class="signUp">
      <div>
        <label for="Mobile">手机号码</label>
        <input
          v-model="Mobile"
          id="Mobile"
          type="number"
          placeholder="请输入手机号码"
        />
      </div>
      <div>
        <label for="ImgCode">图片码</label>
        <input
          v-model="verificationCode"
          id="ImgCode"
          type="text"
          placeholder="请输入图片码"
          maxlength="4"
        />
        <img
          :src="ImgCode"
          alt=""
          @click="GetCode()"
        />
      </div>
      <div style="border:none;">
        <label for="Code">验证码</label>
        <input
          v-model="MoblieCode"
          id="Code"
          type="number"
          placeholder="请输入短信码"
          maxlength="6"
        />
        <span
          v-if="!DownTimeStatus"
          @click="SendSMS()"
        >获取验证码</span>
        <span v-if="DownTimeStatus">{{ DownTimeNum }}s后获取</span>
      </div>
    </div>
    <button
      type="button"
      class="button"
      @click="SignUp()"
    >提交验证</button>
    <img
      src="../../assets/images/signup-bg2.png"
      alt=""
    />
  </main>
</template>

<script>
export default {
  name: "SignUp",
  data() {
    return {
      Mobile: "", // 手机号
      MoblieCode: "", // 短信验证码
      ImgCode: "", // 图片验证码的图片
      verificationCode: "", // 图片验证码值
      DownTimeNum: 180, // 短信倒计时
      DownTimeStatus: false,
      identity: "",
      partnerID: ""
    };
  },
  created() {
    this.GetCode();
    this.$toast("欢迎注册亮健优医");
  },
  mounted() {
    // 获取url中的参数
    this.identity = this.getUrlParams('identity');
    this.partnerID = this.getUrlParams('SuperiorPartnerID') || "";
    console.log(this.identity)
    console.log(this.partnerID)
  },
  methods: {
    // 获取url中的参数
    getUrlParams(paramsName) {
      //JavaScript获取url，并把url中的参数变成数组的方法，arr数组的值就是各参数值
      var url = window.document.location.href.toString();
      var u = url.split("?");
      var arr = [];
      if (typeof (u[1]) == "string") {
        u = u[1].split("&");
        for (var i in u) {
          var a = (u[i].split("="));
          arr[a[0]] = a[1];
        }
      }
      return arr[paramsName]
    },

    // 获得图片验证码
    GetCode() {
      this.$http.GetCode().then(res => {
        this.ImgCode = res;
      });
    },

    // 发送短信验证码
    SendSMS() {
      var obj = {
        mobile: this.Mobile,
        verificationCode: this.verificationCode
      };
      var isSuccess = this.CheckSignUpData(obj);
      if (!isSuccess.state) {
        this.$toast(isSuccess.msg);
        return;
      }

      this.$toast({
        message: "发送中...",
        type: "loading",
        duration: 30000,
        forbidClick: true
      });
      this.$http.SendSMS(obj).then(res => {
        this.$toast.clear();
        if (res.data.success==1) {
          this.$toast({
            message: res.data.message,
            type: "success",
            duration: 2000
          });
          this.DownTime();
        } else {
          this.$toast({
            message: res.data.message,
            type: "fail",
            duration: 2000
          });
          this.GetCode();
        }
      });
    },

    // 提交验证
    SignUp() {
      console.log(process.env.VUE_APP_PartnerUserLoginUrl)
      console.log(process.env.VUE_APP_PatientUserLoginUrl)

      var obj = {
        mobile: this.Mobile,
        verificationCode: this.verificationCode,
        moblieCode: this.MoblieCode
      };

      var isSuccess = this.CheckSignUpData(obj);

      if (!isSuccess.state) {
        this.$toast(isSuccess.msg);
        return;
      }
      obj = {
        ...obj,
        identity: this.identity,
        superiorPartnerID: this.partnerID
      }
      this.$toast({
        message: "绑定中...",
        type: "loading",
        duration: 30000,
        forbidClick: true
      });
      this.$http.DoctorBinding(obj).then(res => {
        console.log(res);
        this.$toast.clear();
        if (res.data.success==1) {
          this.$toast({
            message: "绑定成功！",
            type: "success",
            duration: 1500,
            forbidClick: true,
            onClose: () => {
              if (this.identity == 1) {
                window.location = process.env.VUE_APP_DoctorUserLoginUrl;
              } else if (this.identity == 2) {
                window.location = process.env.VUE_APP_PartnerUserLoginUrl;
              }
            }
          });
        } else {
          this.$toast(res.data.message);
        }
      });
    },
    // 验证注册数据
    CheckSignUpData(obj) {
      var state = { state: true, msg: "ok" };

      var MobileReg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
      var CodeReg = /^[0-9a-zA-Z]{4}$/;
      var SMSReg = /^[0-9]{6}$/;

      if ("mobile" in obj && !MobileReg.test(obj.mobile)) {
        state.state = false;
        state.msg = "请输入正确的手机号";
        return state;
      }

      if ("verificationCode" in obj && !CodeReg.test(obj.verificationCode)) {
        state.state = false;
        state.msg = "图片验证码格式不正确";
        return state;
      }

      if ("moblieCode" in obj && !SMSReg.test(obj.moblieCode)) {
        state.state = false;
        state.msg = "短信验证码格式不正确";
        return state;
      }
      return state;
    },

    // 短信验证码倒计时
    DownTime() {
      this.DownTimeStatus = true;
      var t = setInterval(() => {
        this.DownTimeNum--;
        if (this.DownTimeNum <= 0) {
          clearInterval(t);
          t = null;
          this.GetCode();
          this.DownTimeNum = 180;
          this.DownTimeStatus = false;
        }
      }, 1000);
    }
  }
};
</script>

<style scoped lang="less">
main {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: relative;

  > img {
    width: 1.95rem;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  > header {
    width: 7.5rem;
    height: 3.68rem;
    background: url("../../assets/images/signup-bg1.png") no-repeat;
    background-size: 7.5rem 3.68rem;

    img {
      width: 2.44rem;
      margin: 0.3rem auto 0;
    }
  }

  .signUp {
    width: 7rem;
    margin: -0.8rem auto 0;
    box-sizing: border-box;
    padding: 0 0.6rem;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 4px 9px 0px #9fb4d3;

    > div {
      height: 1.18rem;
      border-bottom: 1px solid #e2e2e2;
      line-height: 1.18rem;
      text-align: left;

      label {
        display: inline-block;
        min-width: 1.3rem;
        width: 1.3rem;
        font-size: 0.26rem;
        color: #999999;
      }

      input {
        width: 3rem;
        height: 1rem;
        font-size: 0.26rem;
      }

      span {
        display: inline-block;
        width: 1.5rem;
        height: 0.6rem;
        background-color: #00a0e9;
        text-align: center;
        border-radius: 15px;
        color: #fff;
        line-height: 0.6rem;
        font-size: 0.22rem;
      }

      img {
        width: 1.5rem;
        vertical-align: middle;
      }
    }
  }
}
</style>
