<template>
  <div class="clearfix">
    <a-upload
      list-type="picture-card"
      :multiple="false"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :preview-file="previewFile"
      :remove="handleRemove"
      @preview="handlePreview">
      <div v-if="fileList.length < 1">
        <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 []
      }
    }
  },
  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)
      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>
