<template>
  <div class="upload-box">
    <Upload
      class="house-upload"
      :multiple="multiple"
      type="drag"
      accept="image/png, image/jpeg"
      :before-upload="handleBeforeUpload"
      action="#"
      :show-upload-list="false"
      :data="data"
    >
      <div class="upload">
        <Icon type="md-add" size="40" style="color: #1FE4DC;" />
        <p>本地上传</p>
      </div>
    </Upload>
      <div
        v-for="(uploadfiles) in hasUploads"
        :key="uploadfiles.img"
        class="file-item"
      >
        <img :src="uploadfiles.img" />
        <div
          class="close-btn"
          @click="handleCancleClick(uploadfiles, 'hasUploads')"
        >
          <Icon class="close" custom="iconfont iconform_close" />
        </div>
        <div
          class="tip "
          :class="{ 'is-cover': cover_image === uploadfiles.img }"
          @click="handleClickCover(uploadfiles)"
          v-if="cover_image !== undefined"
        >
          {{ cover_image === uploadfiles.img ? "封面图" : "设为封面图" }}
        </div>
      </div>
      <div
        v-for="(uploadfiles) in preUploads"
        :key="uploadfiles.img"
        class="file-item"
      >
        <img :src="uploadfiles.img" />
        <div
          class="close-btn"
          @click="handleCancleClick(uploadfiles, 'preUploads')"
        >
          <Icon class="close" custom="iconfont iconform_close" />
        </div>
        <div
          class="tip "
          :class="{ 'is-cover': cover_image === uploadfiles.img }"
          @click="handleClickCover(uploadfiles)"
          v-if="cover_image !== undefined"
        >
          {{ cover_image === uploadfiles.img ? "封面图" : "设为封面图" }}
        </div>
    </div>
  </div>
</template>

<script>
import { uploadFile } from 'api/upload'
export default {
  props: {
    preUploads: Array,
    hasUploads: Array,
    cover_image: String,
    limit: Number,
    multiple: {
      type: Boolean,
      default: true
    },
    data: {}
  },
  data () {
    return {
    }
  },
  computed: {
    uploads () {
      return [...this.hasUploads, ...this.preUploads]
    }
  },
  methods: {
    handleBeforeUpload (file) {
      if (this.limit && this.uploads.length >= this.limit) {
        this.$Message.error({
          content: `只能上传${this.limit}张图片`
        })
        return
      }
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        const _base64 = reader.result
        file.img = _base64
        this.preUploads.push(file)
      }
      return false
    },
    handleCancleClick (uploadfile, type) {
      this[type].splice(this[type].indexOf(uploadfile), 1)
    },
    uploadfiles (opts) {
      if (opts) {
        this.data = opts
      }
      console.log(opts, 'opts')
      return Promise.all(this.preUploads.map(item => this.uploadTypeFile(item))).then(() => {
        return this.cover_image
      })
    },
    uploadTypeFile (file) {
      return uploadFile(file, this.data).then(res => {
        if (this.cover_image === file.img) {
          this.handleClickCover({
            img: res.data.url,
            isUploaded: true
          })
        }
        file.img = res.data.url
        this.hasUploads.push(file)
        this.preUploads.splice(this.preUploads.indexOf(file), 1)
        return res
      })
    },
    handleClickCover (file) {
      this.$emit('changeCoverImage', file)
    }
  }
}
</script>
