<template>
  <div>
    <el-upload
      :action="action"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
      :on-exceed="handleExceed"
      :before-upload="beforeUploadVideo"
      :headers="{token:token}"
      :disabled="fileLists.length >= limit || uploadBtn"
      :limit="limit"
      multiple
      list-type="picture-card"
      class="video-upload"
      accept="video/mp4, video/ogg, video/flv,video/avi,video/wmv,video/rmvb">
      <i slot="default" class="el-icon-plus"/>
      <div slot="tip" class="el-upload__tip">最多上传{{ limit }}段视频，每段大小不超过10M</div>
      <div slot="file" slot-scope="{file}">
        <video :src="file.url" class="el-upload-list__item-thumbnail" alt=""/>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handleShowVideo(file)">
            <i class="el-icon-video-play"/>
          </span>
          <!--<span class="el-upload-list__item-edit" @click="handleEditVideo(file)">-->
          <!--<i class="el-icon-edit"/>-->
          <!--</span>-->
          <span class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"/>
          </span>
        </span>
        <el-progress v-if="showProgress && file.url == uploadUrl" :color="colors" :percentage="Number(uploadPercentage)" type="circle" class="progressModule"/>
      </div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="40%" title="视频预览" class="video-dialog">
      <video :src="dialogImageUrl" alt="" autoplay class="video" controls="controls"/>
    </el-dialog>
    <el-dialog :visible.sync="editView" width="40%" append-to-body>
      <el-input :rows="4" v-model="editForm.url" type="textarea" @input="editVideo"/>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'VideoUpload',
  props: {
    limit: {
      type: Number,
      default: 2
    },
    action: {
      type: String,
      default: '#'
    },
    token: {
      type: String,
      default: ''
    },
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileLists: this.fileList,
      editForm: {
        url: '',
        uid: null
      },
      editView: false,
      uploadPercentage: 0,
      showProgress: false,
      uploadUrl: '',
      colors: [
        { color: '#ADD8E6', percentage: 20 },
        { color: '#87CEEB', percentage: 40 },
        { color: '#87CEFA', percentage: 60 },
        { color: '#00BFFF', percentage: 80 },
        { color: '#278df9', percentage: 100 }
      ],
      uploadBtn: false
    }
  },
  mounted() {
  },
  methods: {
    // 移除视频
    handleRemove(file) {
      for (const i in this.fileLists) {
        if (this.fileLists[i].uid === file.uid) {
          this.fileLists.splice(i, 1)
        }
      }
      this.submitFile()
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB!')
        return false
      }
    },
    handleShowVideo(file) {
      console.log(file)
      this.dialogImageUrl = this.baseConfig.baseUrl + '/static/' + file.response.data
      this.dialogVisible = true
    },
    // 上传完成
    handleSuccess(response, file, fileList) {
      this.showProgress = false
      this.uploadBtn = false
      if (response.code !== 200) {
        fileList.splice(fileList.length - 1, 1)
        this.fileLists.splice(this.fileLists.length - 1, 1)
        this.$message.error('上传失败')
      } else {
        this.$message.success('上传成功')
        const obj = {
          name: response.data,
          status: 'success',
          uid: file.uid,
          url: this.baseConfig.baseUrl + '/static/' + response.data
        }
        this.fileLists.push(obj)
        this.submitFile()
      }
    },
    // 将图片文件传回给父组件
    submitFile() {
      this.$emit('submitVideo', this.fileLists)
    },
    // 上传进度
    handleProgress(event, file, fileList) {
      this.uploadBtn = true
      this.uploadUrl = file.url
      this.showProgress = true
      // this.uploadPercentage = file.percentage.toFixed(0)
      this.uploadPercentage = Math.floor(event.percent)
    },
    // 限制提示
    handleExceed(files, fileList) {
      console.log('handleExceed', this.limit)
      const limit = this.limit
      this.$message.warning(`限制选择` + limit + `段视频，本次选择了 ${files.length} 段视频，共选择了 ${files.length + fileList.length} 段视频`)
    },
    // 编辑视频
    handleEditVideo(file) {
      this.editForm.url = file.url
      this.editForm.uid = file.uid
      this.editView = true
    },
    // 编辑视频
    editVideo() {
      for (const i in this.fileLists) {
        if (this.fileLists[i].uid === this.editForm.uid) {
          this.fileLists[i].url = this.editForm.url
        }
      }
      this.submitFile()
    }
  }
}
</script>

<style scoped>
  .el-icon-plus{
    font-size: 30px!important;
  }
  .el-icon-edit{
    font-size: 18px !important;
  }
  .el-icon-video-play{
    font-size: 18px !important;

  }
  .el-icon-delete{
    font-size: 18px !important;
    /*color:rgb(243, 143, 130);*/
  }
  .video-dialog >>> .el-dialog__body {
    text-align: center !important;
  }
  .el-input>>> .el-textarea__inner{
    font-size:18px!important;
  }
  .video{
    min-height: 200px;
    max-height: 600px;
    min-width: 200px;
    max-width: 100%;
  }
  .progressModule >>> .el-progress__text{
    color:#278df9;
    font-size: 15px!important;
  }
  .video-upload >>> .el-upload-list__item div:first-child{
    display: contents !important;
  }

</style>