<template>
  <div class="upload-form">
    <el-form-item
      :key="item.model"
      :prop="item.model"
      :label="item.label || ''"
      :label-width="item.labelWidth || item['label-width'] || ''"
      :required="item.required || false"
      :rules="item.rules || []"
      :size="item.size"
    >
      <el-upload
        :action="item.action"
        :data="item.data"
        :before-upload="beforeUploadFile"
        :with-credentials="true"
        v-bind="item.attrs || {}">
        <el-button type="primary">点击上传</el-button>
        <template v-if="formData[item.model]">
          <!-- 遍历显示文件 -->
          {{successFileUrl.replace(/.*\/([^\/]*\.docx)$/gi, '$1')}}
        </template>
      </el-upload>
      <div class='info' style="line-height: 1.5;" v-html="item.html"></div>

      <!-- <el-input :style="{ width: item.modelWidth || item['model-width'] || '100%' }"
        v-bind="item.attrs || {}"
        v-on="$listeners"
        v-model="formData[item.model]"
        :disabled="item.disabled || false"
        :placeholder="item.placeholder || ''"
      ></el-input> -->
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'UploadForm',
  componentName: 'UploadForm',
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    formData: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      successFileUrl: '',
      filesArr: [],
      file: {
        id: 'WU_FILE_0',
        name: '',
        type: '',
        lastModifiedDate: '',
        size: '',
        file: ''
      }
    }
  },
  methods: {
    handleChange (file, filelist) {
      this.file.name = file.raw.name
      this.file.type = file.raw.type
      this.file.lastModifiedDate = file.raw.lastModifiedDate
      this.file.size = file.raw.size
      this.file.file = file.raw
    },
    beforeUploadFile (file) {
      debugger
    },
    uploadFile () {
      // if (!/\.(docx)$/gi.test(this.file.name)) {
      //   this.$message.error('文件格式不对，请重新上传')
      //   this.filesArr.pop()
      //   return
      // }
      // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      // cAction.chapterAction.uploadFile(this.file).then(data => {
      //   this.successFileUrl = data.url
      //   this.filesArr.pop()
      // }).catch(e => { this.filesArr.pop(); this.$message.error(e.message) }).finally(() => { loading.close() })
    }
  }
}
</script>
