<template>
  <div class="hello">
    <el-upload
      :http-request="handleUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-remove="beforeRemove"
      :limit="limit"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :list-type="listType"
      :accept="accept"
      class="upload-demo"
      action
      multiple>
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import {
  put,
  getFileNameUUID
} from '~/api/ali-oss'

export default {
  name: 'Upload',
  props: {
    accept: {
      type: String,
      default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx'
    },
    tip: {
      type: String,
      default: '上传大小不能超过2M'
    },
    limit: {
      type: Number,
      default: 5
    },
    action: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {}
    },
    name: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: 'text'
    },
    max: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    emitInput(fileList) {
      let value = []
      for (let i = 0; i < fileList.length; i++) {
        let message = {}
         message.fileName = fileList[i].name
         message.fileUrl = fileList[i].url
        value.push(message)
      }
      this.$emit('input', value)
    },
    beforeUpload(file) {
      const max = this.max
      const isLt2M = file.size / 1024 / 1024 < max
      if (!isLt2M) {
        this.$message.error(`上传附件大小不能超过 ${max} MB!`)
      }
      return isLt2M
    },
    handleRemove(file, fileList, index) {
      this.$emit('on-remove', file, fileList)
      this.fileList = fileList
      this.emitInput(fileList)
    },
    handlePreview(file) {
      this.$emit('on-preview', file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleSuccess(response, file, fileList) {
      console.log('成功')
      this.fileList = fileList
      this.$emit('on-success', file, fileList)
    },
    /**
			 * 自定义上传方法
			 */
    handleUpload(option) {
      const max = this.max
      const isLt2M = option.file.size / 1024 / 1024 < max
      if (isLt2M) {
        // 生成的文件名称
        let objName = getFileNameUUID()
        // 调用 ali-oss 中的方法
        put(`${objName}${option.file.name}`, option.file).then(res => {
          res.fileName = res.name
          res.fileUrl = res.url
          this.fileList.push(res)
          this.emitInput(this.fileList)
        })
      }
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
