<template>
  <div class="component-ocr-idcard">
    <van-row>
      <van-col :span="13">
        <div class="title">{{ title }}</div>
        <div :class="empty" class="component-ocr-idcard-step">STEP 1：通过照片OCR方式获取身份证信息</div>
      </van-col>
      <van-col :span="11"><div class="component-ocr-idcard-icon-reader" /></van-col>
    </van-row>
    <div class="component-ocr-idcard-btn-wrap">
      <van-button :loading="loading" :disabled="remainTime < 30" plain block round hairline type="primary" color="#0761F3" @click="handleOcrScan">
        <i v-if="remainTime === 30" class="page-rnr-userinfo-ocr" />{{ remainTime === 30 ? 'OCR' : `${remainTime}s后重试` }}
      </van-button>
    </div>
  </div>
</template>

<script>
import { uploadIdcard } from './shared'
import { ocrIdcard } from '@/api/markup'
import { ocrIdcardInEnterprise } from '@/api/rnr'

export default {
  name: 'IdcardOcr',
  props: {
    images: {
      type: Array,
      default: () => ([])
    },
    customer: {
      type: Boolean,
      default: false
    },
    empty: {
      type: String,
      default: 'normal'
    },
    title: {
      type: String,
      default: '方式二：OCR识别'
    }
  },
  data() {
    return {
      remainTime: 30,
      loading: false,
      formData: {}
    }
  },
  methods: {
    /**
     * ocr扫描识别
     */
    async handleOcrScan() {
      // 增加loading框
      this.loading = true
      try {
        // 上传的方法
        const uploadFn = uploadIdcard(this.customer ? ocrIdcard : ocrIdcardInEnterprise)
        // 开始全部上传接口
        const { data } = await uploadFn(this.images)
        // 触发改变方法
        this.$emit('change', { ...data })
        // 开启禁用ocr倒计时
        this.disableOcrScanTimer()
      } catch (error) {
        console.error(error)
      }
      // 接触loading状态
      this.loading = false
    },

    /**
     * 开始禁用ocr识别功能
     */
    disableOcrScanTimer() {
      // 如果当前有进行中的定时器
      this.timer && clearTimeout(this.timer)
      // 如果当前倒计时结束
      if (this.remainTime === 0) {
        this.remainTime = 30
        return
      }
      // 开始减去数字
      this.remainTime -= 1
      // 开始倒计时
      this.timer = setTimeout(this.disableOcrScanTimer.bind(this), 1000)
    }
  }
}
</script>

<style lang="scss">
.component-ocr-idcard {
  background-color: #ffffff;
  display: flex;
  flex: 1;
  flex-direction: column;
  .title {
    color: #242424;
    font-size: 24px;
    font-weight: 500;
    line-height: 33px;
    padding-left: 32px;
  }
  .component-ocr-idcard-step {
    color: rgba(36, 36, 36, 0.4);
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 28px;
    padding-left: 32px;
    &.small {
      height: 60px;
    }
  }
  .component-ocr-idcard-icon-reader {
    background-image: url(../../assets/rnr/idcard-ocr.png);
    background-size: auto 100%;
    width: 100%;
    height: 146px;
  }
  .component-ocr-idcard-btn-wrap {
    margin-top: 20px;
    padding: 0 32px;
    .van-button {
      font-size: 30px;
      height: 88px;
      .page-rnr-userinfo-ocr {
        background-image: url(../../assets/rnr/icon_ocr.svg);
        background-size: 100% 100%;
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0 12px -2px 0;
      }
    }
  }
}
</style>
