<template>
  <div class="bind_phone">
    <i class="iconfont icon-back" @click="back"></i>
    <div class="title">{{ bindMobileTitle }}</div>
    <!-- 绑定手机号 -->
    <div class="bind_box">
      <div class="phone_code_tel">
        <input
          class="phone_code_input_username"
          type="tel"
          maxlength="11"
          :placeholder="mobile ? '当前绑定:' + mobile : '请输入手机号'"
          oninput="value=value.replace(/[^\d]/g,'')"
          v-model="phoneNumber"
        />
      </div>
      <!-- 验证码 -->
      <div class="phone_code_captcha">
        <input
          class="phone_code_input_captcha"
          placeholder="请输入验证码"
          v-model="captcha"
          maxlength="4"
        />
        <div
          class="bind_send"
          :class="{ gray: canVerif }"
          @click="sendPhoneNumber"
        >
          {{ verifText }}
        </div>
      </div>
      <div v-if="canBind" class="bind_btn" @click="onBind">
        {{ bindMobileTitle }}
      </div>
      <div v-else class="bind_btn gray">{{ bindMobileTitle }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BindPhone",
  components: {},
  inject: ["checkCode", "getUserInfo"],
  data() {
    return {
      phoneNumber: "", // 手机号
      captcha: "", // 验证码
      verifText: "获取验证码", // 获取验证码按钮文本
      canVerif: false, // 获取验证码按钮是否可以点击
      countDownTimer: null, // 验证码倒计时
      bindMobileTitle: "绑定手机号", // 绑定手机号
      canSms: true, // 是否可以请求验证码接口
      canBind: true, // 是否可以点击绑定按钮
    };
  },
  computed: {
    mobile() {
      return this.$store.state.userInfo.mobile;
    },
  },
  watch: {
    mobile(newValue) {
      this.init();
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  destroyed() {
    clearInterval(this.countDownTimer);
  },
  methods: {
    // 初始化信息
    init() {
      const { mobile } = this;
      this.bindMobileTitle = mobile ? "更换手机号" : "绑定手机号";
    },

    // 返回
    back() {
      this.showInnerControl("account");
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 获取验证码
    sendPhoneNumber() {
      if (!this.canSms) {
        return;
      }
      const { phoneNumber } = this;
      // 1. 验证手机号格式
      this.canVerif = this.$utils.checkVerification(phoneNumber);
      if (!this.canVerif) {
        this.$toast.text("手机号格式不正确");
        return;
      }

      //3. 验证码
      this.getSmsCode();
    },

    // 倒计时
    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);
    },

    // 获取验证码
    getSmsCode() {
      // 3. 请求接口 发送验证码
      const { phoneNumber } = this;
      this.$api
        .sendSms({
          mobile: phoneNumber,
          reason: "bindMobile",
        })
        .then((res) => {
          this.checkCode(res);
          const { code, data, msg } = res.data;
          // 错误
          if (code) {
            this.canVerif = false;
            return;
          }
          // 2. 验证码倒计时
          this.countDown();
        });
    },

    //  绑定手机号
    onBind() {
      const { phoneNumber, captcha } = this;
      const canVerif = this.$utils.checkVerification(phoneNumber);
      if (!canVerif) {
        this.$toast.text("手机号格式不正确");
        return;
      }
      if (!captcha) {
        this.$toast.text("验证码不能为空");
        return;
      }

      if (!this.canBind) {
        return;
      }
      this.canBind = false;
      // 绑定手机号接口
      this.$api
        .bindMobile({
          mobile: phoneNumber,
          smsCode: captcha,
        })
        .then((res) => {
          this.canBind = true;
          this.checkCode(res);

          const { code, msg } = res.data;
          // 错误
          if (code) {
            return;
          }
          // 成功 关闭当前 返回账号页面 刷新userInfo
          this.back();
          this.$toast.text("绑定成功");
          this.getUserInfo();
        });
    },
  },
};
</script>

<style lang='less' scoped>
// 正常竖屏
.bind_phone {
  width: 100%;
  height: 500 / @rem;
  margin-top: -500 / @rem;
  position: absolute;
  top: 100%;
  padding: 20 / @rem;
  border-radius: 30 / @rem 30 / @rem 0 0;
  box-sizing: border-box;
  background-color: #fff;

  i {
    float: right;
    font-size: 60 / @rem;
  }

  .icon-back {
    margin-right: 10 / @rem;
    font-size: 50 / @rem;
  }

  .title {
    height: 60 / @rem;
    line-height: 60 / @rem;
    margin-top: 10 / @rem;
    margin-left: 10 / @rem;
    padding-left: 20 / @rem;
    font-size: 36 / @rem;
    font-weight: bold;
    border-left: 4px solid #3faeed;
    text-align: left;
  }

  .bind_box {
    margin-top: 40 / @rem;
    padding-top: 20 / @rem;
    border-top: 1px solid #e6e6e6;

    .phone_code_tel,
    .phone_code_captcha {
      width: 100%;
      height: 70 / @rem;
      position: relative;
      margin-top: 40 / @rem;
    }
    .phone_code_tel {
      margin-top: 20 / @rem;
    }

    .phone_code_input_username,
    .phone_code_input_captcha {
      width: 100%;
      height: 80 / @rem;
      padding-left: 20 / @rem;
      float: left;
      font-size: 32 / @rem;
      border: 1 / @rem solid #d6d6d6;
      box-sizing: border-box;
    }

    .phone_code_input_captcha {
      width: 60%;
    }

    input::-webkit-input-placeholder {
      color: #888;
    }

    .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;
    }

    .gray {
      background-color: #888;
    }
    .bind_btn {
      width: 60%;
      margin: 40 / @rem auto 0;
      height: 70 / @rem;
      line-height: 70 / @rem;
      border-radius: 10 / @rem;
      background-color: #3faeed;
      color: #fff;
      font-size: 32 / @rem;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .bind_phone {
    width: 45%;
    height: 250 / @rem;
    left: 0;
    top: 50%;
    margin-top: -125 / @rem;
    padding: 0 10 / @rem;
    border-radius: 0 20 / @rem 20 / @rem 0;

    .icon-back {
      margin-top: 10 / @rem;
      margin-right: 5 / @rem;
      font-size: 25 / @rem;
    }

    .title {
      height: 30 / @rem;
      line-height: 30 / @rem;
      margin-top: 15 / @rem;
      margin-left: 5 / @rem;
      padding-left: 10 / @rem;
      font-size: 18 / @rem;
    }

    .bind_box {
      margin-top: 20 / @rem;
      padding-top: 10 / @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: 40 / @rem;
        padding-left: 10 / @rem;
        font-size: 16 / @rem;
      }

      .bind_send {
        height: 35 / @rem;
        line-height: 35 / @rem;
        font-size: 16 / @rem;
        border-radius: 5 / @rem;
      }

      .bind_btn {
        margin: 20 / @rem auto 0;
        height: 35 / @rem;
        line-height: 35 / @rem;
        border-radius: 5 / @rem;
        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) {
  .bind_phone {
    width: 350 / @rem;
    height: 250 / @rem;
    left: 50%;
    top: 50%;
    margin-top: -125 / @rem;
    margin-left: -175 / @rem;
    padding: 0 10 / @rem;
    border-radius: 20 / @rem;

    i {
      font-size: 20 / @rem;
    }

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

    .bind_box {
      .phone_code_input_username,
      .phone_code_input_captcha {
        font-size: 16 / @rem;
      }

      .bind_send {
        font-size: 16 / @rem;
      }

      .bind_btn {
        font-size: 16 / @rem;
      }
    }
  }
}

// ipad 竖屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
}
</style>