<template>
  <div class="account-login-wrapper register-wrapper">
    <div class="account-input-list">
      <div class="account-input-item">
        <div class="phoneWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!login_register.mobile ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            手机号/帐号-->
          <!--          </p>-->
          <div class="inputBox" :class="[login_register_mobile ? 'alert' : '']">
            <input
              v-model="login_register.mobile"
              placeholder="手机号/帐号"
              type="text"
              maxlength="50"
              @blur="inputBlur($event, 'mobile')"
              @focus="inputFocus($event, 'mobile')"
            />
            <p class="inputAlert hasTitle">请输入正确的帐号</p>
          </div>
        </div>
      </div>
      <div
        class="account-input-item"
        :class="[login_register_password ? 'alert' : '']"
      >
        <div class="phoneWrapper invalidPhoneWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!login_register.smsCode ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            验证码-->
          <!--          </p>-->
          <div
            class="inputBox"
            style="width: 200px; height: 40px"
            :class="[login_register_smsCode ? 'alert' : '']"
          >
            <input
              v-model="login_register.smsCode"
              placeholder="请输入验证码"
              type="text"
              maxlength="50"
              @blur="inputBlur($event, 'smsCode')"
              @focus="inputFocus($event, 'smsCode')"
            />
            <p class="inputAlert hasTitle">请输入短信验证码</p>
            <div
              v-if="!is_dis_yzm"
              class="verify-code-box float_right"
              @click="getYzm(login_register.mobile, '1')"
            >
              <span class="blueBtn verify-btn" @click="timer">{{ time }}</span>
            </div>
            <div v-else class="verify-code-box float_right">
              <span class="blueBtn verify-btn grey">
                {{ second_num }}s重新获取
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="account-input-item">
        <div class="passwordWrapper">
          <!--          <p-->
          <!--            class="inputText"-->
          <!--            :class="[!!login_register.password ? 'inputTextFocus' : '']"-->
          <!--          >-->
          <!--            密码-->
          <!--          </p>-->
          <div
            class="inputBox"
            :class="[login_register_password ? 'alert' : '']"
          >
            <input
              v-model="login_register.password"
              placeholder="设置6-20个字符的密码"
              :type="login_register_look ? 'text' : 'password'"
              maxlength="50"
              @blur="inputBlur($event, 'password')"
              @focus="inputFocus($event, 'password')"
            />
            <i
              :class="[
                login_register_look ? 'icon-xianshimima' : 'icon-yincangmima',
              ]"
              class="iconfont eyes"
              @click="lookPwd"
            ></i>
            <p class="inputAlert hasTitle">请输入正确的密码</p>
          </div>
        </div>
      </div>
    </div>
    <el-button
      :loading="btn_loading"
      type="primary"
      class="register-btn big-button"
      @click="Register"
    >
      立即注册
    </el-button>
    <p class="find-pass-des float_left" @click="loginSubmit">
      已有账号？
      <a href="javascript:">立即登录</a>
    </p>
  </div>
</template>

<script>
  import { Register, mobileIsRegister } from "@/api/user";
  import { sendMobileCode } from "@/api/common";
  export default {
    name: "Register",
    data() {
      return {
        time: "获取验证码",
        login_register_mobile: false,
        login_register_password: false,
        login_register_smsCode: false,
        login_register_look: false,
        btn_loading: false,
        login_register: {
          mobile: "",
          smsCode: "",
          password: "",
        },
        second_num: 60,
        is_dis_yzm: false,
        domain: "",
      };
    },
    created() {
      if (window.location.hostname === "localhost") {
        this.domain = "dev.qianniao.vip";
      } else {
        this.domain = window.location.hostname;
      }
    },
    methods: {
      // 验证码
      timer() {
        let time = 3;
        if (login_register.mobile !== "") {
          var tim = setInterval(() => {
            time--;
            this.time = time;
            console.log(time);
            if (time < 0) {
              clearInterval(tim);
              this.time = "获取验证码";
            }
          }, 1000);
        }
      },
      inputBlur(e, prop) {
        this["login_register_" + prop] = !this.login_register[prop];
        if (prop === "mobile") {
          this.mobileIsRegister();
        }
      },
      inputFocus(e, prop) {
        this["login_register_" + prop] = false;
      },
      // 判断手机号是否注册
      async mobileIsRegister() {
        const re = /^1[3456789]\d{9}$/;
        if (!re.test(this.login_register.mobile)) {
          return;
        }
        const { data } = await mobileIsRegister(this.login_register.mobile);
        if (data) {
          this.$message.warning("该手机号已被注册！");
          this.login_register.mobile = "";
        }
      },
      // 注册
      async Register() {
        if (!this.login_register.mobile) {
          this.login_register_mobile = true;
        }
        if (!this.login_register.smsCode) {
          this.login_register_smsCode = true;
        }
        if (!this.login_register.password) {
          this.login_register_password = true;
        }
        const isSub = Object.values(this.login_register).every(
          (item) => !!item
        );
        // 注册过的手机号不允许提交
        if (!isSub) {
          return;
        }
        try {
          this.btn_loading = true;
          const data = await Register({
            mobile: this.login_register.mobile,
            password: this.login_register.password,
            repeatPassword: this.login_register.password,
            source: "6",
            smsCode: this.login_register.smsCode,
          });

          this.$message({
            type: "success",
            message: "注册成功",
          });
          this.btn_loading = false;
          this.$emit("registerSuccess");
        } finally {
          this.btn_loading = false;
        }
      },
      lookPwd() {
        this.login_register_look = !this.login_register_look;
      },
      // 发送验证码
      async getYzm(mobile, source) {
        if (!mobile) {
          this.$message({
            type: "error",
            message: "请输入手机号",
          });
          return;
        }
        const data = await sendMobileCode({
          domain: this.domain,
          mobile: mobile,
          source: source,
        });

        this.$message({
          type: "success",
          message: "发送成功",
        });
        this.timeToTime("is_dis_yzm", "second_num");
      },
      // 验证码倒计时
      timeToTime(is, num) {
        this[is] = true;
        this[num] = 60;
        const secondNumIn = setInterval(() => {
          this[num]--;
          if (this[num] === 0) {
            clearInterval(secondNumIn);
            this[is] = false;
          }
        }, 1000);
      },
      loginSubmit() {
        this.btn_loading = false;
        this.$emit("registerSuccess");
      },
    },
  };
</script>

<style scoped lang="scss">
  .account-login-wrapper {
    .find-pass-des {
      color: #879bba;
      font-size: 14px;
      a {
        color: #2153d4;
        font-size: 14px;
      }
    }
    .register-btn {
      margin-bottom: 16px;
      width: 320px;
      height: 42px;
      text-align: center;
      font-size: 16px;
      /*line-height: 56px;*/
      border: none;
      cursor: pointer;
      background-color: #2153d4;
      outline: none;
      font-family: SourceHanSansCN-Medium, SourceHanSansCN;
      font-weight: 500;
      color: #ffffff;
      //letter-spacing: 2px;
    }
    .big-button {
      border-radius: 2px;
      &.grey {
        color: #b2b2b2;
        border-color: #b2b2b2;
        cursor: auto;
        &:hover {
          background-color: transparent;
          color: #b2b2b2;
        }
      }
    }
    .account-input-item {
      margin-bottom: 24px;
      .inputText {
        color: #999;
        transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        font-size: 16px;
        margin: 0;
        line-height: 35px;
        transform: translate3d(0, 28px, 0) scale(1);
        transform-origin: left top;
        position: absolute;
        bottom: 30px;
      }
      .inputAlert {
        display: block;
        color: #ff3366;
        font-size: 12px;
        margin: 0;
        line-height: 12px;
        position: absolute;
        right: 0;
        bottom: -18px;
      }
      .inputBox {
        position: relative;
        width: 100%;
        height: 40px;
        .inputAlert {
          display: none;
          &.hasTitle {
            margin-left: 66px;
          }
        }
        input {
          padding-left: 16px;
          font-size: 16px;
          outline: none;
          box-shadow: none;
          width: 100%;
          line-height: 40px;
          height: 40px;
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          border: solid 1px #cad0d7;
          background: transparent;
          color: #333;
          transition: all 0.2s linear;
          border-radius: 3px;
          &:focus {
            border: 1px solid #2a75ed;
            border-radius: 3px;
          }
        }
        &.alert {
          input {
            border-color: #cad0d7;
          }
        }
      }
      .inputTextFocus {
        transform: translateZ(0) scale(0.75);
      }
      .phoneWrapper {
        color: #353535;
        position: relative;
      }
      .passwordWrapper {
        color: #353535;
        position: relative;
        .eyes {
          position: absolute;
          bottom: 5px;
          right: 17px;
          color: #2d405e;
          cursor: pointer;
          font-size: 24px;
        }
      }
      .invalidPhoneWrapper {
        .verify-code-box {
          position: relative;
          top: -10px;
          z-index: 1;
          .verify-btn {
            background-color: transparent;
            color: #105cfb;
          }
          .verify-btn:hover {
            color: #ffffff;
            background: #3f7cfb;
          }

          .blueBtn {
            position: absolute;
            top: 10px;
            left: 12px;
            width: 108px;
            height: 40px;
            border-radius: 2px;
            border: 1px solid #2153d4;
            line-height: 40px;
            display: inline-block;
            text-align: center;
            background: #fff;
            cursor: pointer;
            font-size: 14px;
            font-family: SourceHanSansCN-Medium, SourceHanSansCN;
            font-weight: 500;
            color: #2153d4;
          }
        }
      }
    }
  }
</style>
