<template>
  <div class="upload-box">
    <Upload
      class="house-upload"
      :multiple="multiple"
      type="drag"
      accept=".mp4,.mov"
      :before-upload="handleBeforeUpload"
      action="#"
      :show-upload-list="false"
    >
      <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>
      <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>
  </div>
</template>

<script>
import { uploadFile } from 'api/upload'
export default {
  props: {
    limit: Number,
    preUploads: Array,
    hasUploads: Array,
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  computed: {
    uploads () {
      return [...this.hasUploads, ...this.preUploads]
    }
  },
  methods: {
    handleBeforeUpload (file) {
      if (this.limit && this.uploads.length >= this.limit) {
        this.$Message.error({
          content: '上传数量已超过限制'
        })
        return
      }
      const url = URL.createObjectURL(file)
      this.getVideoBase64(url).then(res => {
        file.img = res
        this.preUploads.push(file)
        URL.revokeObjectURL(url)
      })
      return false
    },
    getVideoBase64(url) {
        return new Promise(function (resolve, reject) {
          let dataURL = '';
          let video = document.createElement("video");
          video.setAttribute('crossOrigin', 'anonymous');//处理跨域
          video.setAttribute('src', url);
          video.setAttribute('width', 100);
          video.setAttribute('height', 100);
          video.setAttribute('autoplay', true);
          video.addEventListener('loadeddata', function () {
              let canvas = document.createElement("canvas"),
                  width = video.width, //canvas的尺寸和图片一样
                  height = video.height;
              canvas.width = width;
              canvas.height = height;
              canvas.getContext("2d").drawImage(video, 0, 0, width, height)
              canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
              dataURL = canvas.toDataURL('image/png'); //转换为base64
              resolve(dataURL);
          });
        })
    },
    handleCancleClick (uploadfile, type) {
      this[type].splice(this[type].indexOf(uploadfile), 1)
    },
    uploadfiles () {
      return Promise.all(this.preUploads.map(item => this.uploadTypeFile(item))).then((res) => {
        return res
      })
    },
    uploadTypeFile (file) {
      return uploadFile(file).then(res => {
        console.log(res.data, res.data.image)
        file.video = res.data.video
        file.cover_image = res.data.image
        this.hasUploads.push(file)
        this.preUploads.splice(this.preUploads.indexOf(file), 1)
        return res
      })
    }
  }
}
</script>
