<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: '上传大小不能超过80M'
    },
    limit: {
      type: Number,
      default: 3
    },
    action: {
      type: String,
      default: ''
    },
    headers: {
      type: Object,
      default: () => {}
    },
	fileList:{
		type: Array,
		default: () => []
	},
    name: {
      type: String,
      default: ''
    },
    listType: {
      type: String,
      default: 'text'
    },
    max: {
      type: Number,
      default: 99
    }
  },
  data() {
    return {
    }
  },
  created(){
	console.log(this.fileList)  
  },
  methods: {
    emitInput(fileList) {
      let value = []
      for (let i = 0; i < fileList.length; i++) {
     let message = {}
      message.name = fileList[i].name
     message.url = fileList[i].url  
     message.fileName = fileList[i].name
     message.fileUrl = fileList[i].url  
     message.uid=fileList[i].uid
        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 => {
          console.log(res)
		    this.fileList.push(res)
		    console.log(this.fileList)
		    this.emitInput(this.fileList)
        })	
      } 
    }

  }
}
</script>

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


