<template>
  <el-upload
    class="upload-demo"
    :action="actionUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :multiple="multiple"
    :limit="limit"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :headers="headers"
    :on-success="handleSuccess"
    :data="uploadData"
    :before-upload="beforeUpload"
  >
    <slot name="default">
      <el-button size="small" type="primary">点击上传</el-button>
    </slot>
    <!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
  </el-upload>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadFile',
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    actionUrl: {
      type: String,
      default: 'https://jsonplaceholder.typicode.com/posts/',
    },
    limit: {
      type: Number,
      default: 3,
    },
    // uploadTip: {
    //   type: String,
    //   default: '只能上传jpg/png文件，且不超过500kb'
    // },
    multiple: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      uploadData: {
        fileType: 'sx',
      },
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.$emit('remove', file, fileList)
    },
    handleSuccess(response, file, fileList) {
      this.$emit('success', response, fileList)
    },
    handlePreview(file) {
      this.$emit('preview', file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
      this.$emit('exceed', files, fileList)
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name} ？`)
      //   .then(() => {
      //     this.$emit('before-remove', file, fileList)
      //   })
      //   .catch(() => {})
    },
    beforeUpload(file) {
      console.log('file', file)
      const isJPGorPNG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg'
      const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
      if (!isJPGorPNG) {
        this.$message.error('只能上传 jpg、jpeg、png  格式的图片')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 5MB')
      }
      return isJPGorPNG && isLt5M
    },
  },
}
</script>

<style scoped>
.upload-demo .el-upload__tip {
  margin-top: 10px;
}
</style>
