<template>
  <div class="content">
    <div class="navBar">
      <van-nav-bar
          title="银行卡信息认证"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="h5GoBack"
      />
    </div>
    <tip-bar :title="'温馨提示：服务完成后，平台代收的运费需要提现到您的银行卡账户中，请确保您上传的银行卡信息真实可用。'"></tip-bar>
    <photo-item title="银行卡正面照片" :left-url="form.bankCardFront || bank" :show="show" @leftImg="bankHandler"></photo-item>
    <div class="carInfo">
      <div class="left_wrap title">
        <span class="mar_left">姓名</span>
        <div>
          <span class="star">*</span>
          <span>账户号</span>
        </div>
        <div>
          <span class="star">*</span>
          <span>开户行</span>
        </div>
      </div>
      <div class="right_wrap">
        <input type="text" disabled placeholder="请输入持卡人姓名" v-model="form.name">
        <input type="text" placeholder="请输入银行卡号" v-model="form.cardNumber">
        <input type="text" placeholder="请输入开户行" v-model="form.bankName">
      </div>
    </div>
    <fixed-button @myClick="clickHandler" v-if="showFun()"></fixed-button>
<!--    <protocol-dialog></protocol-dialog>-->
  </div>
</template>

<script>
  // import protocolDialog from "./component/protocolDialog";
  import fixedButton from "./component/fixedButton";
  import photoItem from "./component/photoItem";
  import tipBar from "./component/tipBar";
  import { ocrRecognize, driverInfoVerify, driverInfoVerifyDetail } from '@/api/authentication.js'
  import { leftCopy } from '@/utils/common.js'
  import { myMixins } from '@/utils/myMixins.js'
  export default {
    name: "bankInfo",
    components: {
      tipBar,
      photoItem,
      fixedButton,
      // protocolDialog
    },
    mixins: [myMixins],
    data() {
      return {
        bank: require('@/assets/authentication/bank_icon1.png'),
        show: undefined,
        form: {
          bankCardFront: '',
          bankName: '',
          cardNumber: '',
          name: '',
        },
        type:localStorage.getItem('type')
      }
    },
    async mounted() {
      // if(options?.show) {
        this.show = true
      // }
      if( this.show ) {
        await this.getDetail()
      }
    },
    async onShow() {

    },
    methods: {
      async clickHandler() {
        if(!this.form.bankCardFront) {
           this.$toast('银行卡照片未上传');
          return
        }
        if( this.form.name && this.form.cardNumber && this.form.bankName ) {
          let res = await driverInfoVerify( {
            verifyType: 4,
            ...this.form,
            type: this.type || 'full',
          })
          this.$toast('操作成功')
          await this.getRegisterInfo({
            verifyType: 4
          })
          setTimeout(() => {
            this.h5GoBack()
          }, 100)
          console.log('注册', res)
        } else {
           this.$toast('银行卡信息识别错误')
        }
      },
      async bankHandler(data) {
        this.form.bankName = ''
        this.form.cardNumber = ''
        this.form.name = ''
        this.form.bankCardFront = data
        let res = await this.orcHandler(this.form.bankCardFront, 5)
        leftCopy(this.form, {...res?.data?.data})
      },
      async getDetail() {   // 认证详情
        let res = await driverInfoVerifyDetail( {
          verifyType: 4
        })
        leftCopy(this.form, {...res?.data?.bankCardInfoData})
        console.log('bank', res)
      },
      async orcHandler(url, type) {     // ocr 识别
        let res = await ocrRecognize( {
          ocrType: type,
          imageUrl: url
        });
        return res;
      },
    }
  }
</script>

<style lang="scss">
  @import "@/styles/common.scss";
  @import "@/styles/infoShow.scss";
  page {
    background: #F4F5F7;
  }
  .content{
    height: 100%;
    overflow-y: auto;
  }
  .navBar{
    margin-bottom: 46px;
  }
</style>
