<div>
    <el-upload
      class="ape-uploader"
      :class="{'ape-uploader-image':isImage, 'ape-uploader-disabled':disabledUpload}"
      name="file"
      :action="uploadToken.host"
      :headers="uploadHeaders"
      :data="uploadData"
      :on-preview="handlePictureCardPreview"
      :before-upload="beforeUpload"
      :on-success="afterUpload"
      :on-remove="removeUpload"
      :list-type="listType"
      :on-error="onError"
      :file-list="uploadFileList"
      :limit="limit"
      :on-exceed="onExceed"
    >
      <el-button v-if="listType === 'text' && !disabledUpload" size="mini" type="success" icon="el-icon-upload" plain>点击上传</el-button>
      <i v-if="listType === 'picture-card' && !disabledUpload" class="el-icon-plus"></i>
    </el-upload>
    <div slot="tip" class="el-upload__tip">{{ uploadTip ? uploadTip : `提示：单次可上传1个文件,单个文件≤50M,最多可上传${limit}个` }}</div>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

// 使用
<el-form-item label="附件" prop="file">
  <file-upload v-model="Form.file" ref="upload" :limit="1" :voucherNumber="voucherNumber" @restart="onClose"></file-upload>
</el-form-item>

<!--组件-->
<template>
  <div>
    <form enctype="multipart/form-data">
      <label for="file" class="filelabel el-button el-button--mini el-button--success">
        <el-icon class="el-icon-upload"></el-icon>
        选择文件
      </label>
      <input type="file"
             ref="input_file"
             id="file"
             style="display: none"
             @change="handleFileChange"
      />
      <div class="info" v-if="value">
        <div>{{ value }}</div>
        <el-icon class="el-icon-close info-icon" @click.native="close"></el-icon>
      </div>
    </form>
  </div>
</template>

<script>
  import { apiUploadFile } from '@/api/finacial'

  export default {
    model: {
      prop: 'value',
      event: 'update'
    },
    props: {
      value: {
        type: String,
        required: true,
        default: ''
      },
      limit: {
        type: Number,
        default: 1
      },
      uploadTip: {
        type: String,
        default: ''
      },
      voucherNumber: {
        type: String,
        default: ''
      },
      allowTypeList: {
        type: Array,
        default: function() {
          //支持格式：doc .docx .pdf .xls .xlsx .csv  .ppt .pptx .xmind .mmap .zip .jpeg .png
          return [
            'application/msword',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/pdf',
            'application/vnd.ms-excel',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'text/csv',
            'application/vnd.ms-powerpoint',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'application/x-zip-compressed',
            'application/zip',
            'application/x-zip',
            'image/jpeg',
            'image/png',
            'application/wps-office.doc',
            'application/wps-office.xlsx',
            'application/wps-office.docx',
            'application/wps-office.pptx',
            'application/wps-office.ppt',
            'application/wps-office.xls',
            'application/wps-office.xlsx'
          ]
        }
      },
      allowSize: {
        type: Number,
        default: 1024 * 1024 * 10 //默认10MB
      },
      userOptions: {
        type: Array,
        default: () => []
      },
      permissions: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        query:undefined
      }
    },
    created() {
    },
    computed: {
      listType: function() {
        if (this.isImage) {
          return 'picture-card'
        } else {
          return 'text'
        }
      }
    },
    methods: {
      close() {
        this.$emit('update','')
      },
      check(file) {
        let checkType = this.allowTypeList.includes(file.type)
        let checkSize = file.size > 1024 * 1024 * 10 //默认10MB
        // let length = fileList.length
        // let msg = '最多上传' + length + '个文件'
        // this.$message.error(msg)
        if (!checkType) {
          throw '文件类型不合法,支持格式：doc .docx .pdf .xls .xlsx .csv .ppt .pptx .zip .jpeg .png'
        }
        if (checkSize) {
          throw '文件大小超过限制'
        }
      },

      async handleFileChange(e) {
        const files = e.target.files[0]
        try {
          await this.check(files)
          this.query = await this.setOssParams(files)
          this.$emit('update',files.name)
          this.$refs.input_file.value = ''
        } catch (e) {
          this.$message.error(e)
        }
      },
      // 参数组装
      setOssParams(files) {
        let query = new FormData()
        query.append('file', files)
        query.append('voucherNumber', this.voucherNumber)
        return query
      },
      /**
       * 上传完成
       */
      afterUpload(res, file, fileList) {
        console.log(res)
        console.log(file)
        console.log(fileList)
        if (res.code === '000000') {
          // const arr = fileList.map(item => {
          //   if (item['uid'] === file['uid'] && this.permissions) {
          //     item['response']['data']['permission'] = {
          //       'type': 0, //0=》默认所有上级可见，1 =》360评估人可见，2=》指定用户可见
          //       'designate_user': [] //当type=2时存在并必须有值
          //     }
          //   }
          //   return item.response?.data ?? {}
          // })
          this.uploadFileList = fileList
          // this.$emit('update', arr)
          this.$emit('restart')
        } else {
          this.$message.error(res.message)
          this.uploadFileList = fileList.filter(item => {
            return item['uid'] !== file['uid']
          })
        }

      },
      /**
       * 删除文件
       */

      submit() {
        apiUploadFile(this.query).then(res => {
          this.$message.success(res.message)
          this.$emit('restart')
        }).catch(err=>{
          this.$message.error(err.message)
        }).finally(()=>{
          this.close()
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .info{
    background-color: #f4f4f5;
    color: #909399;
    padding: 0 4px;
    color: #909399;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity .2s;
    .info-icon{
      cursor: pointer;
    }
  }
</style>