<template>
    <div class="enterprise-auth">
      <div v-if="![1,2,3].includes(companyAuthInfo.status)">
         <van-form ref="loginForm" @submit="onSubmitStep1" v-if="step === '1'">
          <van-field 
            v-model="basicInfo.name"
            label="企业名称"
            :rules="[{ required: true, message: '请填写企业名称' }]"
            placeholder="请输入企业名称"></van-field>
          <van-field
            v-model="basicInfo.uscd"
            label="统一社会信用代码	"
            :rules="[{ pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/, message: '请填写统一社会信用代码' }]"
            placeholder="请填写统一社会信用代码	"></van-field>
          <van-field
            v-model="basicInfo.corporations_name"
            label="法人姓名"
            :rules="[{ required: true, message: '请输入法人姓名' }]"
            placeholder="请输入法人姓名"></van-field>
          <van-button block color="#3F79FE"  type="primary" native-type="submit" style="margin-top: 60px;">下一步</van-button>
          </van-form>
          <van-form v-if="step === '2'" ref="bankInfoForm">
            <van-field 
              v-model="bankInfo.tp_name"
              label="对公户名"
              :rules="[{ required: true, message: '请填写对公户名' }]"
              placeholder="请输入对公户名"></van-field>
            <van-field
              v-model="bankInfo.bank_card"
              label="对公账户	"
              :rules="[{ pattern: /^[0-9]{9,25}$/, message: '请输入正确的对公账户' }]"
              placeholder="请填写对公账户	"></van-field>
            <van-field
              readonly
              :value="bankInfo.bank_name"
              label="开户银行"
              @click="showBankPicker = true"
              :rules="[{ required: true, message: '请输入正确的开户银行' }]"
              placeholder="请输入开户银行"></van-field>
            <van-field
              v-model="bankInfo.city"
              label="开户城市	"
              :rules="[{ required: true, message: '请输入正确的开户城市' }]"
              placeholder="请填写开户城市	"></van-field>
            <van-field
              v-model="bankInfo.sub_branch"
              label="开户支行"
              :rules="[{ required: true, message: '请输入正确的开户支行' }]"
              placeholder="请输入开户支行"></van-field>
            <van-button block color="#3F79FE"  type="primary" style="margin-top: 60px;" native-type="button" @click="validateBankInfo">下一步</van-button>
            <van-popup v-model="showBankPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="banks"
                @cancel="showBankPicker = false"
                @confirm="onConfirmBank"
              />
            </van-popup>
          </van-form>
          <van-dialog
              v-model="showConfirmBankCard" show-cancel-button confirmButtonText="确认打款" cancelButtonText="返回编辑" @confirm="onSubmitStep2"  @cancel="showConfirmBankCard = false;">
              <van-image src="@/assets/bankCard.png" width="81" fit="contain"></van-image>
              <div>确认卡号</div>
              <div>{{bankInfo.bank_name}}</div>
              <div>账户为：{{bankInfo.bank_card}}</div>
          </van-dialog>
          <van-popup v-model="showToast" class="toast">
             <div class="loader-container"><div class="loader" style="margin-bottom:10px;"></div></div>
             <div style="color:#353535;font-size:20px;margin-top:20px;">打款中</div>
             <div style="color:#818181;font-size:12px;">提示：请耐心等待，大概需要30~120s</div>
          </van-popup>
          <van-form @submit="onSubmitStep3" v-if="step === '3'">
              <common-svg name="xuanzhong" width="46px" height="46px"></common-svg>
              <div style="color:#353535;font-size:16px;margin-top:20px;">
                已成功为您的企业对公账户打款请输入金额验证。
              </div>
              <van-field
                v-model.number="bankNum"
                type="number"
                label="请输入金额"
                :rules="[{ required: true, message: '请输入正确的金额' }]"
                placeholder="请输入金额"></van-field>
              <div style="background:rgba(247,247,249,1);border-radius:4px;color:#797D84;font-size:12px;margin-top:40px;padding:20px;">系统会为您公司账户打入一笔金额为0.01-0.09元的款项。由于银行操作的原因，打款时间可能需要五分钟，请耐心等待！接受到账通知后，请再次访问此页面填写金额。
              </div>
              <van-button block color="#3F79FE"  type="primary" native-type="submit" style="margin-top: 60px;">下一步</van-button>
          </van-form>
        <upload-success v-if="step === '4'"></upload-success>
      </div>
      <!-- <Auditing v-if="companyAuthInfo.status === 1"></Auditing> -->
      <audit-failure v-if="companyAuthInfo.status === 3" @re-audit="reAuditHandler" :message="companyAuthInfo.message"></audit-failure>
      <div class="auth-success" v-if="companyAuthInfo.status === 2">
         <div class="item"><div class="key">公司名称:</div> <span class="value">{{companyAuthInfo.name}}</span></div>
         <div class="item"><span class="key">营业执照注册号:</span><span class="value">{{companyAuthInfo.uscd}}</span></div>
         <div class="item"><span class="key">法定代表人姓名:</span><span class="value">{{companyAuthInfo.corporations_name}}</span></div>
      </div> 
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, Popup, Picker, Dialog } from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router';
import { AuthStatus } from '@/const/enum';
import UploadSuccess from './components/UploadSucess.vue';
import Auditing from './components/Auditing.vue';
import AuditFailure from './components/AuditFailure.vue';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Dialog.Component.name]: Dialog.Component,
    UploadSuccess,
    Auditing,
    AuditFailure,
  },
})
export default class Enterprise extends Vue {
  @State('companyAuthInfo') private companyAuthInfo!: any;
  @Action('getCompanyAuthInfo') private getCompanyAuthInfo!: () => void;
  private AuthStatus: any = AuthStatus;
  private basicInfo: any = {
    name: '',
    uscd: '', // 123456789012345678
    corporations_name: '',
  };
  private bankInfo: any = {
    tp_name: '',
    bank_card: '', // 123456789
    bank_name: '',
    city: '',
    sub_branch: '',
  };
  private showConfirmBankCard: boolean = false;

  private bankNum: number = 0;

  private step: string = '1';
  private banks: string[] = [];
  private showBankPicker: boolean = false;
  private showToast: boolean = false;


  @Watch('step', {immediate: true})
  private onStepChange(step: string) {
    if (step === '2') {
      this.$api.auth.banks().then(({banks}: any) => {
        this.banks = banks;
      });
    }
  }
  private mounted() {
    // this.getCompanyAuthInfo();
  }
  private onSubmitStep1() {
    this.$api.auth.basic(this.basicInfo).then((res: any) => {
      this.step = '2';
    });
  }
  private validateBankInfo() {
    const validatePromise: any  = (this.$refs.bankInfoForm as any).validate();
    validatePromise.then(() => {
      this.showConfirmBankCard = true;
    });
  }
  private onSubmitStep2() {
    this.showToast = true;
    this.$api.auth.bank(this.bankInfo).then((res: any) => {
      this.step = '3';
      this.showToast = false;
    }).catch((err: any) => {
      // this.showToast = false;
    });
  }
  private onSubmitStep3() {
    this.$api.auth.bankNum({
      num: this.bankNum,
    });
    this.step = '4';
  }
  private onConfirmBank(value: string) {
    this.bankInfo.bank_name = value;
    this.showBankPicker = false;
  }
  private reAuditHandler() {
    this.step = '1';
  }
}
</script>
<style scoped lang="scss">
  .enterprise-auth{
    padding: 17px;
    .auth-success{
      .item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 14px 16px;
        .key{
          font-size: 16px;
          color: #353535;
        }
        .value{
          color: #999999;
          font-size: 14px;
        }
      }
    }
    .toast{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 40px 20px;
      border-radius: 10px;
      $colors:
            hsla(337, 84, 48, 0.75)
            hsla(160, 50, 48, 0.75)
            hsla(190, 61, 65, 0.75)
            hsla( 41, 82, 52, 0.75);
      $size: 2.5em;
      $thickness: 0.5em;

      // Calculated variables.
      $lat: ($size - $thickness) / 2;
      $offset: $lat - $thickness;

      .loader-container{
        position: relative;
        width: $size;
        height: $size;
        transform: rotate(165deg);
        &:before,
        &:after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: $thickness;
          height: $thickness;
          border-radius: $thickness / 2;
          transform: translate(-50%, -50%);
        }
  
        &:before {
          animation: before 2s infinite;
        }
        
        &:after {
          animation: after 2s infinite;
        }
      }

      @keyframes before {
        0% {
          width: $thickness;
          box-shadow:
            $lat (-$offset) nth($colors, 1),
            (-$lat) $offset nth($colors, 3);
        }
        35% {
          width: $size;
          box-shadow:
            0 (-$offset) nth($colors, 1),
            0   $offset  nth($colors, 3);
        }
        70% {
          width: $thickness;
          box-shadow:
            (-$lat) (-$offset) nth($colors, 1),
            $lat $offset nth($colors, 3);
        }
        100% {
          box-shadow:
            $lat (-$offset) nth($colors, 1),
            (-$lat) $offset nth($colors, 3);
        }
      }

      @keyframes after {
        0% {
          height: $thickness;
          box-shadow:
            $offset $lat nth($colors, 2),
            (-$offset) (-$lat) nth($colors, 4);
        }
        35% {
          height: $size;
          box-shadow:
              $offset  0 nth($colors, 2),
            (-$offset) 0 nth($colors, 4);
        }
        70% {
          height: $thickness;
          box-shadow:
            $offset (-$lat) nth($colors, 2),
            (-$offset) $lat nth($colors, 4);
        }
        100% {
          box-shadow:
            $offset $lat nth($colors, 2),
            (-$offset) (-$lat) nth($colors, 4);
        }
      }
      .loader{
        position: absolute;
        top: calc(50% - #{$size / 2});
        left: calc(50% - #{$size / 2});
      }
    }
  }
</style>