<template>
  <div>
    <div v-show="!dialogVisible">
      <el-upload
        :http-request="handleUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :file-list="fileList"
        :limit="limit"
        accept=".jpg, .jpeg, .png, .gif"
        action
        list-type="picture-card">
        <i class="el-icon-plus" v-if="!dialogVisible"></i>
         <div slot="tip" class="el-upload__tip">{{ tip }}</div>
      </el-upload>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
  </div>
</template>


<script>
import {
  put,
  getFileNameUUID
} from '~/api/ali-oss'
export default {
  props: {
    tip: {
      type: String,
      default: '上传大小不能超过10M'
    },
    limit: {
      type: Number,
      default: 3
    },
    max: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      const max = this.max
      const isLt2M = file.size / 1024 / 1024 < max
      if (!isLt2M) {
        this.$message.error(`上传附件大小不能超过 ${max} MB!`)
      }
      return isLt2M
    },
    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)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      this.emitInput(fileList)
    },
    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>
