<template>
  <div class="clearfix">
    <a-upload list-type="picture-card" :multiple="false" :file-list="fileList" :accept="accept" :before-upload="beforeUpload" :preview-file="previewFile" :remove="handleRemove" @preview="handlePreview">
      <div v-if="fileList.length < maxListSize">
        <a-icon type="plus" />
        <div class="ant-upload-text">上传</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
import Upload from 'ant-design-vue/lib/upload'
import 'ant-design-vue/lib/upload/style'
import { ossUpload } from '@/api/sys/oss'
import axios from 'axios'
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  components: {
    [Upload.name]: Upload
  },
  props: {
    sourceId: {
      type: String,
      default: ''
    },
    defaultList: {
      type: Array,
      default() {
        return []
      }
    },
    maxListSize: {
      type: Number,
      default: 1
    },
    accept: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      uploading: false,
      fileList: [],
      previewVisible: false,
      previewImage: ''
    }
  },
  methods: {
    previewFile(file) {
      console.log(file)
    },
    clear() {
      this.fileList = []
    },
    flush() {
      this.clear()
      this.defaultList.forEach((file, index) => {
        this.fileList.push({
          uid: index,
          name: 'image.png',
          status: 'done',
          url: file
        })
      })
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleCancel() {
      this.previewVisible = false
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    async handlePreview(file) {
      console.log(file)

      if (!file.url && !file.preview)
        file.preview = await getBase64(file.originFileObj);

      this.previewImage = file.url
      this.previewVisible = true
    },
    submitUpload() {
      return new Promise((resolve, reject) => {
        const { fileList } = this
        if (fileList.length === 0) {
          resolve({})
        } else {
          const data = new FormData()
          data.append('file', fileList[0])
          data.append('sourceId', this.sourceId)

          const header = {}
          header['Content-Type'] = 'multipart/form-data'
          header[ACCESS_TOKEN] = storage.get(ACCESS_TOKEN)

          axios.post(ossUpload(), data, { headers: header }).then((res) => {
            if (res.data.code === 200) {
              resolve(res.data.url)
              this.uploading = false
            } else {
              this.$message.error(res.data.msg)
              this.uploading = false
            }
          }, (err) => {
            reject(err)
            this.uploading = false
          })
        }
      })
    }
  }
}
</script>
<style scoped>
/* you can make up upload button and sample style by using stylesheets */
/* .ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-upload-list-picture-card .ant-upload-list-item{
  width: 90px;
  height: 90px;
}
.ant-upload.ant-upload-select-picture-card{
  width: 90px;
  height: 90px;
} */
</style>
