<template>
  <div class="upload-box">
    <Upload
      class="house-upload"
      :multiple="multiple"
      type="drag"
      accept=".mp4,.mov"
      :before-upload="handleBeforeUpload"
      action="#"
      :show-upload-list="false"
      v-if="!hideUpload"
    >
      <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"
        @click="selectedVideo = uploadfiles.url;show=true"
      >
        <img :src="uploadfiles.img" />
        <div
          class="close-btn"
          @click.stop="handleCancleClick(uploadfiles, 'hasUploads')"
          v-if="!hideUpload"
        >
          <Icon type="md-close-circle"  size="16" />
        </div>
      </div>
      <div
        v-for="(uploadfiles) in preUploads"
        :key="uploadfiles.img"
        class="file-item"
        @click="selectedVideo = uploadfiles.url;show=true"
      >
        <img :src="uploadfiles.img" />
        <div
          class="close-btn"
          @click.stop="handleCancleClick(uploadfiles, 'preUploads')"
          v-if="!hideUpload"
        >
          <Icon type="md-close-circle"  size="16" />
        </div>
    </div>
    <p class="tips">{{ tips }}</p>
    <Modal v-model="show" footer-hide>
      <div>
        <video width="488" controls="controls" autoplay :src="selectedVideo"></video>
      </div>
    </Modal>
  </div>
</template>

<script>
import { uploadFile } from 'api/upload'
export default {
  props: {
    hideUpload: Boolean,
    limit: Number,
    preUploads: Array,
    hasUploads: Array,
    multiple: {
      type: Boolean,
      default: true
    },
    tips: {
      type: String,
      default: ''
    },
    maxSize: {
      type: Number,
      default: 10 * 1024
    }
  },
  data () {
    return {
      show: false,
      selectedVideo: ''
    }
  },
  computed: {
    uploads () {
      return [...this.hasUploads, ...this.preUploads]
    }
  },
  methods: {
    handleBeforeUpload (file) {
      const { size } = file
      if (size > this.maxSize * 1024) {
        this.$Message.error({
          content: '上传视频过大'
        })
        return
      }
      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
        file.url = url
        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)
          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 => {
        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
      })
    }
  },
  beforeDestroy () {
    this.uploads.forEach(item => {
      URL.revokeObjectURL(item.url)
    })
  }
}
</script>

<style lang="less" scoped>
.upload {
  padding: 30px 0 !important;
}
.tips {
    position: absolute;
    bottom: -8px;
    font-size: 12px;
    color:rgba(255,255,255,0.38);
    line-height: 1;
  }
  .file-item {
    cursor: pointer;
  }
</style>