<template>
  <div id="udb_reg_phone_password">
    <div class="udb_phone_code_box">
      <div class="title">注册</div>
      <div class="reg_input_box">
        <!-- 账密输入 -->
        <div class="phone_code">
          <div class="phone_code_input">
            <!-- 账号名 -->
            <div class="phone_code_tel" @keyup.enter="checkPassport">
              <i class="red">*</i>
              <div v-if="canPassport" class="bind_send" @click="checkPassport">
                验证账号
              </div>
              <div v-else class="bind_send gray">验证中</div>
              <input
                class="phone_code_input_captcha"
                placeholder="请输入账号名"
                v-model="passport"
                type="text"
                compositionstart="compositionstartInput"
                @input="passportKeyup"
              />
            </div>
            <!-- 手机号 -->
            <!-- <div class="phone_code_tel">
              <i class="red">*</i>
              <input
                class="phone_code_input_username"
                type="tel"
                maxlength="11"
                placeholder="请输入手机号"
                oninput="value=value.replace(/[^\d]/g,'')"
                v-model="phoneNumber"
              />
            </div> -->
            <!-- 验证码 -->
            <!-- <div class="phone_code_captcha">
              <i class="red">*</i>
              <div
                class="bind_send"
                :class="{ gray: canVerif }"
                @click="sendPhoneNumber"
              >
                {{ verifText }}
              </div>
              <input
                class="phone_code_input_captcha"
                placeholder="请输入验证码"
                v-model="captcha"
                maxlength="4"
              />
            </div> -->
            <!-- 密码 -->
            <div class="reg_password">
              <i class="red">*</i>
              <input
                class="reg_input_password"
                type="password"
                placeholder="请输入密码"
                password="true"
                maxlength="20"
                oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
                v-model="password"
              />
            </div>
            <!-- 确认密码 -->
            <div class="reg_password2">
              <i class="red">*</i>
              <input
                class="reg_input_password2"
                type="password"
                placeholder="请再次输入密码"
                password="true"
                maxlength="20"
                oninput="value=value.replace(/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/ig,'');"
                v-model="passwordAgin"
              />
            </div>
          </div>
        </div>
        <!-- 阅读协议 -->
        <!-- <div class="reg_phone_protocol">
          <input
            class="reg_phone_protocol_checkbox"
            type="checkbox"
            id="is_phone_read"
            checked
            v-model="ischeckRegPhone"
          />
          <label
            for="is_phone_read"
            :class="{ red: !ischeckRegPhone }"
            class="reg_phone_protocol_text"
          >
            阅读并同意
          </label>
          <span @click="onAgreement" class="agreement">用户协议</span>
        </div> -->
        <div v-if="canReg" class="bind_phone_true" @click="bindTrue">注册</div>
        <div v-else class="bind_phone_true gray">注册</div>
        <!-- 底部跳其他页面 -->
        <!-- <div class="other" @click="onLogin">返回登录</div> -->
      </div>
    </div>
  </div>
</template>

<script>
// import FileSaver from "file-saver";
export default {
  name: "RegPhonePwd",
  components: {},
  data() {
    return {
      passport: "", // 账号名
      phoneNumber: "", // 手机号
      captcha: "", // 验证码
      password: "", // 密码
      passwordAgin: "", // 确认密码
      ischeckRegPhone: true, // 阅读并同意
      verifText: "获取验证码", // 获取验证码按钮文本
      canVerif: false, // 获取验证码按钮是否可以点击
      countDownTimer: null, // 验证码倒计时
      canSms: true, // 是否可以请求验证码接口
      canReg: true, // 是否可以注册
      canPassport: true, // 是否可以验证
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  destroyed() {
    clearInterval(this.countDownTimer);
  },
  methods: {
    // ios中文输入
    compositionstartInput() {
      this.passport = "";
    },
    // 账号 输入
    passportKeyup() {
      this.passport = this.passport.replace(
        /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]|\s+|[^\w\u4e00-\u9fa5\/\-]|[/|]/gi,
        ""
      );
    },
    // 验证账号
    checkPassport() {
      const { passport } = this;
      const regpassport = /^[a-zA-Z][a-zA-Z0-9_]{3,31}$/.test(passport);
      if (!regpassport) {
        this.$toast.text("账号需用字母开头, 且长度大于4位");
        return;
      }
      if (passport == "admin" || passport == "root") {
        this.$toast.text("此账号已被注册");
        return;
      }
      this.passportExists();
    },
    // 验证账号
    passportExists() {
      if (!this.canPassport) {
        return;
      }
      this.canPassport = false;
      const { passport } = this;
      this.$api
        .passportExists({
          passport,
        })
        .then((res) => {
          this.checkCode(res);
          this.canPassport = true;
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
          if (data) {
            this.$toast.text("此账号已被注册");
            return;
          }
          this.$toast.text("此账号可用");
        });
    },
    // 获取验证码
    sendPhoneNumber() {
      if (!this.canSms) {
        return;
      }
      const { phoneNumber } = this;
      // 1. 验证手机号格式
      this.canVerif = this.$utils.checkVerification(phoneNumber);
      if (!this.canVerif) {
        this.$toast.text("手机号格式不正确");
        return;
      }
      // 2. 验证码倒计时
      this.countDown();

      // 3. 请求接口 发送验证码
      this.$api
        .sendSms({
          mobile: phoneNumber,
          reason: "regist",
        })
        .then((res) => {
          this.checkCode(res);
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
        });
    },
    // 用户协议
    onAgreement() {},
    // 倒计时
    countDown() {
      this.canSms = false;
      let count = 60;
      this.verifText = count + "s";
      this.countDownTimer = setInterval(() => {
        count--;
        this.verifText = count + "s";
        // 倒计时结束
        if (count === 0) {
          this.canVerif = false;
          this.verifText = "获取验证码";
          this.canSms = true;
          clearInterval(this.countDownTimer);
        }
      }, 1000);
    },
    // 注册
    bindTrue() {
      const {
        phoneNumber,
        captcha,
        password,
        passwordAgin,
        ischeckRegPhone,
        passport,
      } = this;

      // 0. 校验账号是否为空
      if (!passport) {
        this.$toast.text("账号不能为空");
        return;
      }
      // 1. 验证手机号格式
      const telCheck = this.$utils.checkVerification(phoneNumber);
      if (!telCheck && phoneNumber) {
        this.$toast.text("手机号格式不准确");
        return;
      }
      // 2. 验证验证码是否为空
      if (!captcha && phoneNumber) {
        this.$toast.text("验证码不能为空");
        return;
      }
      // 3. 验证密码
      if (!password) {
        this.$toast.text("密码不能为空");
        return;
      }
      if (password !== passwordAgin) {
        this.$toast.text("两次密码不一致");
        return;
      }
      // 4. 阅读协议
      if (!ischeckRegPhone) {
        this.$toast.text("请阅读与同意协议");
        return;
      }
      // 5. 校验账号
      const regpassport = /^[a-zA-Z][a-zA-Z0-9_]{3,31}$/.test(passport);
      if (!regpassport) {
        this.$toast.text("账号需用字母开头, 且长度大于4位");
        return;
      }
      if (passport == "admin" || passport == "root") {
        this.$toast.text("此账号已被注册");
        return;
      }
      // 6. 注册
      this.onRegister();
    },
    // 注册接口
    onRegister() {
      if (!this.canReg) {
        return;
      }
      this.canReg = false;
      const { phoneNumber, captcha, password, passport } = this;
      const promoCode = this.$utils.getQueryString("promoCode");
      const { appId } = this.$CONFIG;
      const registObj = {
        passport,
        // mobile: phoneNumber,
        // smsCode: captcha,
        password,
        promoCode,
        appId,
      };
      this.$api.regist(registObj).then((res) => {
        this.checkCode(res);
        const { code, msg } = res.data;
        // 错误
        if (code) {
          this.canReg = true;
          return;
        }
        this.canReg = false;
        // 成功 判断ios和android
        this.tool();
      });
    },
    // 校验返回值
    checkCode(res) {
      // 请求超时
      if (!res) {
        this.$toast.text("当前网络拥堵, 请重试");
        return;
      }
      const { code, msg } = res.data;
      if (!code) {
        return;
      }
      switch (code) {
        // 2 未登录
        case 2:
        // 7 微信支付code 过期
        case 7:
        default:
          this.$toast.text(msg);
      }
    },
    // ios 跳转游戏 android 下apk
    tool() {
      const isiOS = this.$utils.isiOS();
      if (isiOS) {
        const token = localStorage.getItem("x-token");
        this.$toast.text("注册成功! 3s后跳转游戏页");
        setTimeout(() => {
          const jumpUrl = this.$CONFIG.iosJumpUrl;
          window.location.href =
            jumpUrl.indexOf("?") !== -1
              ? `${jumpUrl}&token=${token}`
              : `${jumpUrl}?token=${token}`;
        }, 3000);
        return;
      }
      //  android 下apk 跳game.jhfly.cn
      this.download(this.$CONFIG.downloadApk);
      setTimeout(() => {
        window.location.href = this.$CONFIG.androidJumpUrl;
      }, 1000);
    },
    download(url) {
      window.open(url);
      //   //   const link = document.createElement("a");
      //   //   link.href = url;
      //   //   link.target = "_blank";
      //   //   link.style.display = "none";
      //   //   document.body.append(link);
      //   //   link.click();
      //   const file = new File([url], "rxzr.apk", {
      //     type: "application/octet-stream",
      //   });
      //   FileSaver.saveAs(file);
    },
  },
};
</script>

<style lang="less">
#udb_reg_phone_password {
  input {
    outline: none;
  }

  .udb_phone_code_box {
    width: 700 / @rem;
    height: 500 / @rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -350 / @rem;
    margin-top: -250 / @rem;
    font-size: 32 / @rem;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;

    .title {
      height: 100 / @rem;
      line-height: 100 / @rem;
      background-color: #3faeed;
      color: #fff;
      font-size: 36 / @rem;
    }

    .reg_input_box {
      padding: 0 / @rem 30 / @rem;

      .other {
        margin-top: 20 / @rem;
        float: left;
        color: #3faeed;
        font-size: 28 / @rem;
      }
    }

    .reg_phone_protocol_text {
      display: inline-block;
    }
    .red {
      line-height: 70 / @rem;
      color: #e43633;
      float: left;
    }
    .agreement {
      color: #e65c1c;
      border-bottom: 1 / @rem solid #e65c1c;
      margin-left: -2 / @rem;
    }
    .reg_phone_protocol {
      font-size: 32 / @rem;
      margin-top: 20 / @rem;
    }
    .reg_phone_protocol_checkbox {
      vertical-align: middle;
      -webkit-appearance: checkbox;
    }
    .phone_code_input {
      width: 100%;
      margin-top: 25 / @rem;
    }
    .phone_code_tel,
    .phone_code_captcha {
      width: 100%;
      height: 70 / @rem;
      position: relative;
      margin-top: 20 / @rem;
    }
    .phone_code_tel {
      margin-top: 20 / @rem;
    }
    .icon-shouji1,
    .icon-mima {
      width: 50 / @rem;
      height: 70 / @rem;
      line-height: 70 / @rem;
      position: absolute;
      left: 0;
      z-index: 5;
    }
    .phone_code_input_username,
    .phone_code_input_captcha {
      width: 94.5%;
      height: 75 / @rem;
      padding-left: 20 / @rem;
      float: right;
      font-size: 32 / @rem;
      border: 1 / @rem solid #d6d6d6;
      box-sizing: border-box;
    }
    .phone_code_input_captcha {
      width: 60%;
      margin-right: 30 / @rem;
    }
    input::-webkit-input-placeholder {
      color: #888;
    }
    .phone_code_protocol {
      width: 100%;
      font-size: 32 / @rem;
      margin: auto;
      margin-top: 50 / @rem;
      height: 40 / @rem;
      line-height: 40 / @rem;
    }
    .phone_code_protocol_checkbox {
      position: relative;
      top: 2 / @rem;
    }
    .phone_code_protocol_text {
      display: inline-block;
    }
    .phone_code_check,
    .bind_captcha_check {
      font-size: 32 / @rem;
      color: #e43633;
      position: absolute;
    }
    .bind_send {
      width: 30%;
      height: 75 / @rem;
      line-height: 70 / @rem;
      float: right;
      color: #ffffff;
      font-size: 32 / @rem;
      border-radius: 10 / @rem;
      background-color: #3faeed;
    }
    .bind_phone_true {
      width: 80%;
      height: 90 / @rem;
      line-height: 90 / @rem;
      margin: 20 / @rem auto 0;
      border-radius: 15 / @rem;
      background-color: #3faeed;
      color: #ffffff;
      box-sizing: border-box;
      font-size: 32 / @rem;
    }
    .gray {
      background-color: #888;
    }
    .reg_password,
    .reg_password2 {
      width: 100%;
      height: 70 / @rem;
      margin-top: 20 / @rem;
      position: relative;
    }
    .reg_input_password {
      width: 94.5%;
      height: 70 / @rem;
      padding-left: 20 / @rem;
      float: right;
      font-size: 32 / @rem;
      box-sizing: border-box;
      border: 1 / @rem solid #d6d6d6;
    }
    .reg_input_password2 {
      width: 94.5%;
      height: 70 / @rem;
      padding-left: 20 / @rem;
      float: right;
      z-index: 4;
      font-size: 32 / @rem;
      box-sizing: border-box;
      border: 1 / @rem solid #d6d6d6;
      outline: none;
    }
    .icon-mima {
      position: absolute;
      left: 0;
      width: 50 / @rem;
      z-index: 5;
      height: 70 / @rem;
      line-height: 70 / @rem;
    }
    .login_password_check,
    .login_passwordAgin_check {
      font-size: 32 / @rem;
      color: #e43633;
      position: absolute;
    }
    .is_hide_password,
    .is_hide_pwd_agin {
      display: none;
    }
  }
}

// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #udb_reg_phone_password {
    .udb_phone_code_box {
      width: 350 / @rem;
      height: 250 / @rem;
      margin-left: -175 / @rem;
      margin-top: -125 / @rem;
      font-size: 16 / @rem;
      overflow-y: auto;

      .title {
        height: 50 / @rem;
        line-height: 50 / @rem;
        font-size: 18 / @rem;
      }

      .reg_input_box {
        padding: 0 / @rem 15 / @rem;

        .other {
          margin-top: 5 / @rem;
          font-size: 14 / @rem;
        }
      }
      .red {
        line-height: 35 / @rem;
      }
      .agreement {
        margin-left: -1 / @rem;
      }
      .reg_phone_protocol {
        font-size: 16 / @rem;
        margin-top: 10 / @rem;
      }
      .phone_code_input {
        margin-top: 20 / @rem;
      }
      .phone_code_tel,
      .phone_code_captcha {
        height: 35 / @rem;
        margin-top: 20 / @rem;
      }
      .phone_code_tel {
        margin-top: 10 / @rem;
      }
      .phone_code_input_username,
      .phone_code_input_captcha {
        height: 35 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .phone_code_input_captcha {
        width: 55.15%;
      }
      .phone_code_protocol {
        height: 20 / @rem;
        line-height: 20 / @rem;
        margin-top: 5 / @rem;
        font-size: 16 / @rem;
      }
      .phone_code_protocol_checkbox {
        top: 1 / @rem;
      }

      .phone_code_check,
      .bind_captcha_check {
        font-size: 16 / @rem;
      }
      .bind_send {
        height: 30 / @rem;
        line-height: 30 / @rem;
        font-size: 16 / @rem;
        border-radius: 5 / @rem;
      }
      .bind_phone_true {
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin: 15 / @rem auto 0;
        border-radius: 7 / @rem;
        font-size: 16 / @rem;
      }
      .reg_password,
      .reg_password2 {
        height: 30 / @rem;
        margin-top: 10 / @rem;
      }
      .reg_input_password {
        height: 30 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .reg_input_password2 {
        height: 30 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }
      .login_password_check,
      .login_passwordAgin_check {
        font-size: 16 / @rem;
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  #udb_reg_phone_password {
    .udb_phone_code_box {
      height: 280 / @rem;
    }
  }
}
</style>
