<!--
      descript: timer 组件
        author: jankergg
        param: props
        example:
接口地址：
/data/ocr/no-login/idCard
/data/ocr/no-login/bankCard
请求：post
参数{"image":"base64Image"}
-->
<template>
  <div class="input-ca-box">
    <root-input
    :formModel="formModel"
    :index="index"
    :showExtra="true"
    :name="name">
      <div class="upload-img" :class="{disabled: btnDisabled}" @click="uploadClick"></div>
      <input v-if="!btnDisabled" ref="upfile" type="file" name="upfile" class="upinput" @change="upload" accept="image/*"/>
    </root-input>
  </div>
</template>
<script>
  import rootInput from './input'
  import inputMixin from './mixin/input-mixin'
  import Zip from '../esign/zip'

  export default {
    name: 'za-input-camera',
    mixins: [inputMixin],
    data () {
      return {
        base64: ''
      }
    },
    props: {
      index: [String, Number],
      name: String,
      formModel: Object
    },
    created() {
      this.init()
    },
    computed: {
      btnDisabled() {
        return this.formModel.rules.btnDisabled === undefined ? !!this.formModel.rules.readOnly || !!this.formModel.rules.disabled : this.formModel.rules.btnDisabled
      }
    },
    methods: {
      init () {
        this.Vzip = new Zip({
          quality: 0.5,
          maxSize: 800 * 1024
        })
      },
      uploadClick () {
        if(!this.btnDisabled) {
          if(this.formModel.rules.preventUpload) {
            this.onEvent('onClick', {
              name: this.name,
              event: () => {
                this.$refs.upfile.click()
              },
              type: 'click',
              triggerType: 'onClick',
              value: ''
            })
          } else {
            this.$refs.upfile.click()
          }
        }
      },
      upload (e) {
        // zip image
        if (!e.target.files[0]) {
          return
        }
        this.Vzip.run(e.target.files[0]).then(success => {
          this.nimg = {...success}
          this.base64 = this.nimg.base64
          this.onEvent('onUpload', {
            name: this.name,
            event: null,
            type: 'upload',
            triggerType: 'onUpload',
            value: this.base64
          })
        }, fail => {
          console.error(fail)
        }).catch(error => {
          console.error(error)
        })
      }
    },
    components: {
      rootInput
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.input-ca-box{
  /deep/ .input-extra{
    height: 24px;
    margin-left: 15px;
    padding-left: 15px !important;
    position: relative;
    &::before{
      content: "";
      width: 1px;
      height: 100%;
      background-color: #D9D9D9;
      position: absolute;
      left: 0;
    }
  }
  .upload-img{
    width: 30px;
    height: 24px;
    background: url(../../../assets/styles/icons/ocr.png) 0 0 no-repeat;
    background-size: 100%;
    &.disabled{
      background: url(../../../assets/styles/icons/ocr-disabled.png) 0 0 no-repeat;
      background-size: 100%;
    }
  }
  .upinput{
    display: block;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    top: -9999em;
    left: -9999em;
  }
}
</style>
