<template>
  <div class="video-upload-com">
    <el-upload :action="uploadUrl" :before-upload="beforeAvatarUpload" :file-list="mediaList" :on-success="handleSuccess" :on-exceed="exceedTips" :limit="1" :on-remove="handleRemove">
      <el-button size="mini" type="primary">点击上传视频</el-button>
      <p v-if="tips" slot="tip" class="el-upload__tip">{{tips}}</p>
    </el-upload>
    <div v-if="mediaList&&mediaList[0]&&mediaList[0].url">
      <video :src="mediaList[0].url" style="width:320px;height:200px;" controls="controls">您的浏览器不支持视频播放</video>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'VideoUpload',
  componentName: 'VideoUpload',
  data () {
    return {
      mediaUrl: null,
      mediaList: [],
      uploadUrl: null,
      playTime: 0,
      videoSize: 0,
      videoWidth: 0,
      videoHeight: 0
    }
  },
  props: {
    value: {
      type: Array,
      default: () => [
      ]
    },
    tips: {
      type: String,
      default: '仅支持上传mp4或者MP4文件（限制50M以内）'
    },
    limitSize: {
      type: Number,
      default: 50
    },
    busiType: {
      type: Number,
      default: 2
    }
  },
  components: {},
  created () {
    this.uploadUrl = `xxx` // 上传接口url地址
    if (this.value) {
      this.mediaList = this.value
    }
  },
  watch: {
    value (val) {
      this.mediaList = this.value
    }
  },
  mounted () {
  },
  methods: {
    exceedTips (file, fileList) {
      this.$message(`最多上传${fileList.length}个文件！`)
    },
    // 移除分享图片
    handleRemove (file, fileList) {
      this.mediaList = []
      this.$emit('input', [])
    },
    handleSuccess (res, file, fileList) {
      if (res.code === 100) {
        const arr = res.result[0]
        this.mediaUrl = arr.url
        this.$emit('input', [{
          id: arr.id,
          url: arr.url,
          name: arr.fileName,
          playTime: this.playTime,
          size: this.videoSize,
          width: this.videoWidth,
          height: this.videoHeight
        }])
        this.mediaList = fileList
        // console.log('handleSuccess', this.mediaList, this.playTime, this.videoWidth, this.videoHeight)
      } else {
        this.mediaUrl = ''
        this.mediaList = []
        this.$message.error(res.desc ? res.desc : res.mobBaseRes.desc)
      }
    },
    beforeAvatarUpload (file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'mp4' || testmsg === 'MP4'
      const size = file.size / 1024 / 1024
      this.videoSize = size
      const isLimitM = size < this.limitSize
      if (!extension) {
        this.$message.error('视频格式不正确，仅支持 mp4')
      }
      if (!isLimitM) {
        this.$message.error(`上传视频大小不能超过${this.limitSize}MB!`)
      }
      if (extension && isLimitM) {
        // 获取视频时长
        const videoUrl = URL.createObjectURL(file)
        const videoObj = document.createElement('video')
        videoObj.onloadedmetadata = () => {
          URL.revokeObjectURL(videoUrl)
          // console.log('当前视频长度', videoObj.duration, videoObj.videoWidth, videoObj.videoHeight)
          this.playTime = videoObj.duration // 视频时长
          this.videoWidth = videoObj.videoWidth // 视频宽度
          this.videoHeight = videoObj.videoHeight // 视频高度
          // 执行上传的方法，获取外网路径，上传进度等
          // resolve(videoObj)
        }
        videoObj.src = videoUrl
        videoObj.load()
      }
      // 获取文件大小
      return isLimitM && extension
    }
  }
}
</script>
 
<style lang='less'>
.video-upload-com {
  .video .el-upload-list {
    width: 326px;
    padding-left: 157px;
  }
  .el-upload-list__item {
    margin: 0 8px 0 0;
  }
  .el-upload-list__item-status-label {
    right: -24px;
    line-height: 0px;
    // text-align: left;
    i {
      position: relative;
      top: 0px;
      left: -6px;
    }
  }
}
</style>

<template>
  <div>    
    <video-upload v-model="mediaList"></video-upload>    
  </div>
</template>
<script>
import VideoUpload from '@/components/video-upload'
 
export default {
  name: 'addvidart',
  components: {
    VideoUpload
  },
  data () {
    return {
  mediaList: [
        {
           name: '',
           playTime: 0,
           url: 'https://xxx' // 图片地址
         }
       ]
     }    
  },
  props: {
  },
  watch: {
  },
  created () {    
  },
  mounted () {
  },
  methods: {    
  }
}
</script>