<template>
  <div class="four-factours">
    <upload-success v-if="uploadSuccess"></upload-success>
    <div v-else>
      <van-form ref="authForm" validate-first>
        <div class="filed-label">真实姓名</div>
        <van-field
          v-model="name"
          :rules="[{ required: true, message: '请填写真实姓名' }]"
          placeholder="请输入真实姓名"
        ></van-field>
        <div class="filed-label">身份证号</div>
        <van-field
          v-model="idCard"
          :rules="[
            {
              pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/,
              message: '请输入正确的身份证号',
            },
          ]"
          placeholder="请输入身份证号"
        ></van-field>
        <div class="filed-label">银行卡号</div>
        <van-field
          v-model="bankCard"
          :rules="[
            {
              pattern: /^(\d{16}|\d{19}|\d{17})$/,
              message: '请输入正确的银行卡号',
            },
          ]"
          placeholder="请输入银行卡号"
        ></van-field>
        <div class="filed-label">预留手机号</div>
        <van-field
          v-model="bankPhone"
          :rules="[{ pattern: /^1\d{10}$/, message: '请输入正确的手机号' }]"
          placeholder="请输入预留手机号"
        >
          <template #button>
            <div
              class="btn-send-sms"
              @click="handleClickSendSms"
              :class="isCounting && 'btn-send-sms-disabled'"
            >
              {{ isCounting ? count + 's' : '发送验证码' }}
            </div>
          </template>
        </van-field>
        <div class="filed-label">验证码</div>
        <van-field
          v-model="code"
          :rules="[{ required: true, message: '请输入验证码' }]"
          placeholder="请输入验证码"
        ></van-field>
      </van-form>
      <div class="btn-container">
        <div
          class="btn-confirm"
          :class="haveTheFieldsBeenFilled ? '' : 'btn-confirm-disabled'"
          @click="handleClickConfirm"
        >
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Form, Field } from 'vant';
import UploadSuccess from './components/UploadSucess.vue';

@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    UploadSuccess,
  },
})
export default class FourFactours extends Vue {
  private name: string = '';
  private idCard: string = '';
  private bankCard: string = '';
  private bankPhone: string = '';
  private code: string = '';
  private timerId: number = -1;
  private count = 60;
  private isCounting = false;
  private uploadSuccess: boolean = false;

  private async handleClickSendSms() {
    if (this.isCounting) return;
    await this.$api.user.sendSms(this.bankPhone, 2);
    this.startCount();
  }

  private startCount() {
    this.isCounting = true;
    this.timerId = window.setInterval(() => {
      if (this.count === 0) {
        clearInterval(this.timerId);
        this.isCounting = false;
        this.count = 60;
      } else {
        this.count--;
      }
    }, 1000);
  }

  get haveTheFieldsBeenFilled() {
    const fields = [
      this.name,
      this.idCard,
      this.bankCard,
      this.bankPhone,
      this.code,
    ];
    const result = fields.every((field: string) => {
      return field.length !== 0;
    });
    return result;
  }

  async handleClickConfirm() {
    if (!this.haveTheFieldsBeenFilled) return;
    try {
      await (this.$refs.authForm as any).validate();
      await this.$api.auth.bankcard4c({
        bank_card: this.bankCard,
        bank_phone: this.bankPhone,
        code: this.code,
        id_card: this.idCard,
        name: this.name,
      });
      this.uploadSuccess = true;
    } catch (err) {
      console.log(err);
    }
  }
}
</script>

<style lang="scss" scoped>
.four-factours {
  .filed-label {
    text-align: left;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
  }

  .van-cell {
    padding: 0 18px;
    min-height: 44px;
    background: #f7f7f9;
    border-radius: 4px;
    line-height: 44px;
    margin-bottom: 16px;
    margin-top: 4px;
  }
  .btn-send-sms {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3f79fe;
  }
  .btn-send-sms-disabled {
    color: #b6b5ba;
  }
  .btn-container {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 60px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px #f2f4ff;
    border: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn-confirm {
      width: 335px;
      height: 40px;
      background: linear-gradient(270deg, #6c7afe 0%, #5d7bf6 100%);
      border-radius: 4px;

      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 40px;
    }
    .btn-confirm-disabled {
      color: #ffffff;
      background: #b2c9ff;
    }
  }
}
</style>
