<template>
  <div>
    <!-- 此上传模板支持多文件上传-->
    <el-upload action="" :data="datas" :accept="accept" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList_FuJian" :http-request="uploadSectionFile" :show-file-list="showfile" multiple>
      <el-button size="small" type="primary">选择文件</el-button>
      <div slot="tip" v-show="reminder == true" class="el-upload__tip">单个文件大小不允许超过100M,支持上传文件类型: {{ accept }}</div>
    </el-upload>
  </div>
</template>

<script>
import { upload } from '@/api/business/beiAn'

export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    // 由父组件根据不同需求传参数，设置接受上传的文件类型
    accept: {
      type: String,
      default: ''
    },
    // 设置提示内容能否展示
    reminder: {
      type: Boolean,
      default: true
    },
    // 设置是否显示已上传文件列表
    showfile: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      datas: null,
      name: null,
      accessToken: {},
      fileList_FuJian: [],
      enclosure: '',
      file_add: '',
      idsz: '',
      file_catch: '',
      files_list: []
    }
  },
  methods: {
    show(val) {
      this.fileList_FuJian = []
      this.fileList_FuJian = val
    },
    handleChange(file, fileList) {
    },
    handleRemove(file, fileList) {
      this.$emit('handleRemove', file)
    },
    // 上传文件 FrontPhoto
    uploadSectionFile(params) {
      const file = params.file
      // 根据后台需求数据格式
      const form = new FormData()
      // 文件对象
      form.append('file', file)
      // 项目封装的请求方法，下面做简单介绍
      upload(form).then((res) => {
        // 自行处理各种情况
        if (res.success) {
          this.$emit('handleSuccess', res)
        }
        if (res.msg === '操作成功') {
          this.$message({
            message: '上传成功！',
            type: 'success'
          })
        }
      }).catch((err) => {
        console.log(err)
        // 如果等于备案,就调备案图片上传接口
      })
    }
  }
}
</script>

<style scoped></style>
