<template>
<el-form-item :prop="prop" :label="label" :label-width="options.labelWidth" :rules="rules" ref="fi">
<honjo-upload v-model="value" @input="onChange" v-bind="props">
  <div slot="tip" v-if="options.tip">{{options.tip}}</div>
</honjo-upload>
</el-form-item>
</template>

<script lang="ts">

import { Vue, Component, Prop, Ref, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { FormDef, FormOptions, UploadDef, UploadOptions } from '../../type'
import FieldMixins from './FieldMixins'

@Component
export default class UploadControl extends mixins(FieldMixins) {
  @Ref() fi!: any

  get options (): UploadOptions {
    return Object.assign(new UploadOptions(), this.def?.options)
  }

  get props () {
    return {
      disabled: this.disabled,
      action: this.options?.action,
      resp: this.options?.resp,
      request: this.options?.request,
      type: this.options?.type,
      accept: this.options?.accept,
      limit: this.options?.limit,
      onView: this.options?.onView,
      onSuccessFun: this.options?.onSuccessFun,
      onDld: this.options?.onDld,
      getPrivateUrl: this.options?.getPrivateUrl,
      editAble: this.options?.editAble,
      editControl: this.options?.editControl,
      maxSize: this.options?.maxSize,
      beforeUpload: this.options?.beforeUpload,
      inline: this.options?.inline,
      multiple: this.options?.multiple
    }
  }

  onChange () {
    if (this.rules && this.rules.length > 0) {
      this.$nextTick(() => {
        this.fi.validate('')
      })
    }
  }
}
</script>
