<template>
  <div class="app-preset-smsverification">
    <div class="content">
      <i-input
        size="default"
        type="text"
        v-model="phoneNumber"
        :placeholder="$t('components.login.phoneplaceholder')"
        @on-blur="veriPhoneNumber"
      ></i-input>
      <el-button
        :disabled="disabled"
        size="mini"
        type="primary"
        @click="getVeriCode()"
        >{{ disabled ? `${countDown}s ${$t('components.login.getcodeafter')}` : `${$t('components.login.getcode')}` }}</el-button
      >
    </div>
    <div class="code">
      <i-input
        size="default"
        type="text"
        :value="currentValue"
        @input="codeChange"
        :placeholder="$t('components.login.codeplaceholder')"
      ></i-input>
    </div>
  </div>
</template>

<script lang='ts'>
import { Vue, Component, Prop, Model } from "vue-property-decorator";
import { Http } from "ibiz-core";

@Component({})
export default class AppPresetSmsVerification extends Vue {
  /**
   *名称
   *
   * @type {string}
   * @memberof AppPresetSmsVerification
   */
  @Prop() public name!: string;

  /**
   *验证码值
   *
   * @type {string}
   * @memberof AppPresetSmsVerification
   */
  @Prop() public value!: string;

  /**
   *验证码当前值
   *
   * @type {string}
   * @memberof AppPresetSmsVerification
   */
  get currentValue(): string {
    return this.value;
  }


  /**
   * 手机号
   *
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public phoneNumber: string = '';

  /**
   * 倒计时
   *
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public countDown: number = 60;

  /**
   * 错误提示
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public phoneError = false;

  /**
   * 是否禁用获取验证码按钮
   *
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public disabled: boolean = false;

  /**
   * @description 网络请求接口对象
   * @type {IHttp}
   * @memberof AppPresetSmsVerification
   */
  public http: any = Http.getInstance();

  /**
   * 定时器
   *
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public timer: any;

  /**
   * 组件创建时触发
   *
   * @type {*}
   * @memberof AppPresetSmsVerification
   */
  public created() {
    this.$emit("valueChange", { name: this.name, value: '' });
  }

  /**
   * @description 设置倒计时
   * @memberof AppPresetSmsVerification
   */
  public setCountDown() {
    if (this.countDown > 0) {
      this.countDown--;
    } else {
      this.countDown = 60;
      this.disabled = false;
      clearInterval(this.timer);
    }
    this.$forceUpdate();
  }

  /**
   * @description 验证码输入变化
   * @memberof AppPresetSmsVerification
   */
  public codeChange(value: string) {
    this.$emit("valueChange", { name: this.name, value });
  }

  /**
   * @description 校验手机号
   * @memberof AppPresetSmsVerification
   */
  public veriPhoneNumber(): boolean {
    this.phoneError = !/^1[3-9]\d{9}$/.test(this.phoneNumber); 
    if(this.phoneError) {
      this.$emit("error", this.$t('components.login.phonefailed'));
    } else {
      this.$emit("error", '');
    }
    return this.phoneError;
  }

  /**
   * @description 获取验证码
   * @memberof AppPresetSmsVerification
   */
  public getVeriCode() {
    if(this.phoneError) return;
    this.http.post(``, {}).then((response: any) => {
      if (response.status == 200) {
        this.disabled = true;
        this.timer = setInterval(() => {
          this.setCountDown();
        }, 1000);
      }
    });
  }
}
</script>

<style lang='less'>
@import "./app-preset-smsverification.less";
</style>