<template>
  <div class="aos-ocr" :style="{height: isHight ? '133px' : '84px'}">
    <el-upload
      v-if="edit"
      class="aos-ocr__upload"
      :class="{'aos-ocr__upload-hight': isHight}"
      :action="ocrAction"
      :data="data"
      :show-file-list="false"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-error="handleError"
      :on-success="handleSuccess"
      drag>
      <div class="aos-ocr__img-container" slot="trigger" :style="{'background-image': 'url('+backgroundBg+')'}">
        <el-image v-if="value" class="aos-ocr__img" :class="{'aos-ocr__img-hight': isHight}" :src="'/cmbiz/api/file/get/'+value" alt=""></el-image>
        <div slot="tip" class="aos-ocr__img-tip" :class="{'aos-ocr__img-tip-value': value}">
          <img v-if="!value" src="/console/img/ocrImages/camera.png" alt="">
          <span>
            {{ value ? '点击重新上传' : ocrTextObject[ocrType]}}
          </span>
        </div>
      </div>
    </el-upload>
    <div v-else class="aos-ocr__upload el-form-item__content aos-form-input-text">
      <el-image v-if="value" class="aos-ocr__img" :class="{'aos-ocr__img-hight': isHight}" :src="'/cmbiz/api/file/get/'+value" alt=""></el-image>
      <div v-if="!value" class="aos-ocr__img-container" :style="{'background-image': 'url('+background+')'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AosOcr',
  props: {
    value: {
      type: String
    },
    edit: {
      type: Boolean,
      default: true
    },
    ocrType: {
      type: String,
      required: true,
      validator: function (val) {
        return ['idCardFront', 'idCardBack', 'bank', 'businessLicense','invoice', 'drivingLicenseLeft', 'drivingLicenseRight'].indexOf(val) > -1
      }
    },
    /**
     * @description: 显示类型，dialog，inline
     * @return {*}
     */    
    showType: {
      type: String,
      default: 'inline'
    },
    projectId: {
      type: String
    }
  },
  data () {
    return {
      ocrObject: {
        'idCardFront': 'id-card-front',
        'idCardBack': 'id-card-back',
        'bank': 'bank-card',
        'businessLicense': 'business-license',
        'invoice': 'vat-invoice',
        'drivingLicenseLeft': 'vehicle-license-front',
        'drivingLicenseRight': 'vehicle-license-back',
        vehicleCertification: 'vehicleCertification'
      },
      ocrTextObject: {
        'idCardFront': '点击上传头像面',
        'idCardBack': '点击上传国徽面',
        'bank': '点击上传银行卡',
        'businessLicense': '上传营业执照',
        'invoice': '点击上传发票',
        'drivingLicenseLeft': '上传行驶证(左)',
        'drivingLicenseRight': '上传行驶证(右)',
        vehicleCertification: '上传车辆合格证'
      },
      ocrTypeObject: {
        'idCardFront': '头像面',
        'idCardBack': '国徽面',
        'bank': '银行卡',
        'businessLicense': '营业执照',
        'invoice': '发票',
        'drivingLicenseLeft': '行驶证(左)',
        'drivingLicenseRight': '行驶证(右)',
        vehicleCertification: '车辆合格证'
      },
      ocrAction: '',
      ocrExObject: {
        'idCardFront': '/console/img/ocrImages/idCardFront.png',
        'idCardBack': '/console/img/ocrImages/idCardBack.png',
        'bank': '/console/img/ocrImages/bankCard.png',
        'businessLicense': '/console/img/ocrImages/businessLicense.png',
        'invoice': '/console/img/ocrImages/invoice.png',
        'drivingLicenseLeft': '/console/img/ocrImages/drivingLicenseLeft.png',
        'drivingLicenseRight': '/console/img/ocrImages/drivingLicenseRight.png',
        vehicleCertification: '/console/img/ocrImages/vehicleCertification.png'
      },
      ocrBgObject: {
        'idCardFront': '/console/img/ocrImages/idCardFront_bg.png',
        'idCardBack': '/console/img/ocrImages/idCardBack_bg.png',
        'bank': '/console/img/ocrImages/bankCard_bg.png',
        'businessLicense': '/console/img/ocrImages/businessLicense_bg.png',
        'invoice': '/console/img/ocrImages/invoice_bg.png',
        'drivingLicenseLeft': '/console/img/ocrImages/drivingLicenseLeft_bg.png',
        'drivingLicenseRight': '/console/img/ocrImages/drivingLicenseRight_bg.png',
        vehicleCertification: '/console/img/ocrImages/vehicleCertification_bg.png'
      },
      background: '',
      backgroundBg: '',
      data: {},
      isHight: false
    }
  },
  created () {
    this.setOcrAction()
  },
  methods: {
   setOcrAction () {
      this.ocrAction = '/cmbiz/api/ocr/' + this.ocrObject[this.ocrType]
      this.background = this.ocrExObject[this.ocrType]
      this.backgroundBg = this.ocrBgObject[this.ocrType]
      this.data = {
        prjId: this.projectId
      }
      if (['vehicleCertification'].indexOf(this.ocrType) > -1) {
        this.isHight = true
      }
   },
   formatDate (date) {
    let formatDate = date
    if (date === '长期') {
      formatDate = '2099-12-31'
    } else {
      formatDate = date.substring(0,4) + '-' + date.substring(4,6) + '-' + date.substring(6)
    }
    return formatDate
   },
   formatBusinessLicenseDate (date) {
    let formatDate = date
    if (date === '长期') {
      formatDate = '2099-12-31'
    } else {
      formatDate = date.substring(0,4) + '-' + date.substring(5,7) + '-' + date.substring(8,10)
    }
    return formatDate
   },
   handleSuccess (response) {
    const data = response.data
    if (!data) {
      this.$message({
        type: 'error',
        message: this.ocrTypeObject[this.ocrType]+'OCR识别出错'
      })
    }
    if (this.ocrType === 'idCardFront') {
      data.birth = this.formatDate(data.birth)
    }
    if (this.ocrType === 'idCardBack') {
      data.expiryDate = this.formatDate(data.expiryDate)
      data.issuingDate = this.formatDate(data.issuingDate)
    }
    if (this.ocrType === 'bank') {
      data.bankCardNumber = data.bankCardNumber.split(' ').join('')
    }
    if (this.ocrType === 'businessLicense') {
      data.approvalDate = this.formatBusinessLicenseDate(data.approvalDate)
      data.dateOfEstablishment = this.formatBusinessLicenseDate(data.dateOfEstablishment)
      data.inDate = this.formatBusinessLicenseDate(data.inDate)
      data.registeredCapital = data.registeredCapital.slice(0, -2)
    }
    this.$emit('success', response)
    this.$emit('change', response)
   },
   handleRemove (response) {
    this.$emit('remove', response)
    this.$emit('change', response)
   },
   handleError(response) {
    const errorObject = JSON.parse(response.message)
    const message = errorObject.title ? errorObject.title : this.ocrTypeObject[this.ocrType] + 'OCR识别出错'
    this.$message({
      type: 'error',
      message: message
    })
    this.$emit('error', errorObject)
   },
   handlePreview (file) {
    console.log('ocr preview', file)
   }
  }
}
</script>

<style>

</style>