<template>
  <section class="code-input">
    <div class="title">输入验证码</div>
    <div style="font-size: 14px; color: #999999;text-align:left;line-height: 2em;margin-bottom: 30px;">6位验证码已发送至{{codeTo}}</div>
    <van-password-input
      :value="code"
      :mask="false"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
    <div style="color:#3F79FE;font-size: 14px;text-align:left;margin-top:15px;">
      <div  @click="timerDown" style="display:inline-block;">重新发送{{count > 0 ? `(${count}s)` : ''}}</div>
      <div @click="showWhy = true;" style="display:inline-block;margin-left:10px;">收不到验证码？</div>
    </div>
    <van-overlay :show="showWhy" @click="showWhy = false">
      <div class="wrapper" >
        <div style="background:#FFFFFF;width:80%; padding: 30px 20px;border-radius:10px;" @click.stop>
          <div style="font-size:20px;margin-bottom:22px;">收不到短信验证码</div>
          <div style="font-size:14px;text-align:left;">
              <div>1、请确认该手机号是否为当前使用的手机号</div>
              <div>2、请检查短信是否被安全软件拦截</div>
              <div>3、由于运营商网络原因，短信可能延迟到达</div>
              <div>4、若手机号停用，请咨询客服</div>
          </div>
        </div>
        
      </div>
    </van-overlay>
  </section>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Button, Image, PasswordInput, NumberKeyboard, Overlay } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';

@Component({
  components: {
    [Button.name]: Button,
    [Image.name]: Image,
    [PasswordInput.name]: PasswordInput,
    [NumberKeyboard.name]: NumberKeyboard,
    [Overlay.name]: Overlay,
  },
})
export default class CodeInput extends Vue {
  @Prop({
    required: true,
  })private codeTo!: string;
  @Prop({
    required: true,
  })private code!: string;
  private showWhy: boolean = false;
  private count: number = 0;
  private showKeyboard: boolean = true;
  private mounted() {
     this.timerDown();
  }
  private timerDown() {
    if (this.count > 0 ) { return; }
    this.count = 60;
    this.$emit('send-code');
    const timer = setInterval(() => {
      if ( this.count <= 0) {
        clearInterval(timer);
        return;
      }
      this.count--;
    }, 1000);
    this.$once('hook:beforeDestory', () => {
      clearInterval(timer);
      this.count = 0;
    });
  }
  private async onInput(key: any) {
    const code = (this.code + key).slice(0, 6);
    this.$emit('update:code', code );
    if (code.length < 6) { return; }
    this.$emit('next');
  }
  private onDelete() {
    const { code, code: { length }} = this;
    this.$emit('update:code', code.slice(0, length - 1));
  }
}
</script>
<style scoped lang="scss">
  .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100%;
    }
  .code-input {
    padding: 31px 25px;
    .title{
      font-size: 22px;
      color: #353535;
      font-weight: 500;
      text-align: left;
    }
    .margin-top30{
      margin-top: 30px;
    }
    
  }
</style>