<template>
  <div class="upload">
    <el-upload class="upload-demo"
               :action="action+actionSuffix"
               :on-preview="handlePreview"
               :on-remove="handleRemove"
               :on-success="handleSuccess"
               :on-error="handleError"
               :on-progress="handleProgress"
               :before-upload="beforeAvatarUpload"
               list-type="text"
               :file-list="fileList"
               auto-upload:false
               :show-file-list="showFileList"
               multiple
               :limit="3"
               :on-exceed="handleExceed">
      <template v-if="uploadType === 'default'">
        <el-button size="small"
                   type="primary">点击上传</el-button>

      </template>
      <template v-else>
        <slot name="custom"></slot>
      </template>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: []
    }
  },
  props: {
    actionSuffix: {
      type: String,
      default () {
        return ''
      }
    },
    showFileList: {
      type: Boolean,
      default () {
        return false
      }
    },
    uploadType: {
      type: String,
      default () {
        return 'default'
      }
    }
  },
  methods: {
    // 点击文件列表中已上传的文件时的钩子
    handlePreview (file) {
      console.log(file)
    },
    // 文件列表移除文件时的钩子
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleSuccess (response, file, fileList) {
      console.log(response, file, fileList)
    },
    handleError (err, file, fileList) {
      console.log(err, file, fileList)
    },
    handleProgress (event, file, fileList) {
      console.log(event, file, fileList)
    },
    handleExceed (files, fileList) {
      console.log(files, fileList)
    },
    beforeAvatarUpload (file) {
      // const isJPG = file.type === 'file'
      // const isLt2M = file.size / 1024 / 1024 < 2
    }
  }
}
</script>

<style scoped>
</style>
