<!-- -->
<template>
  <el-upload
    class="avatar-uploader"
    :action="uploadUrl"
    v-bind:on-progress="uploadVideoProcess"
    v-bind:on-success="handleVideoSuccess"
    v-bind:before-upload="beforeUploadVideo"
    v-bind:show-file-list="false"
    :headers="headers"
  >
    <video
      v-if="videoForm.showVideoPath != '' && !videoFlag"
      v-bind:src="videoForm.showVideoPath"
      class="avatar video-avatar"
      controls="controls"
    >
      您的浏览器不支持视频播放
    </video>
    <i
      v-else-if="videoForm.showVideoPath == '' && !videoFlag"
      class="el-icon-plus avatar-uploader-icon"
    ></i>
    <el-progress
      v-if="videoFlag == true"
      type="circle"
      v-bind:percentage="videoUploadPercent"
      style="margin-top: 7px"
    ></el-progress>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl:
        process.env.NODE_ENV === "test" ||
        process.env.NODE_ENV === "development"
          ? "/api/sysFiles/upload"
          : process.env.NODE_ENV + "/sysFiles/upload", // 上传的图片服务器地址
      headers: {
        authorization: getToken(),
      },
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "", //回显的变量
      },
    };
  },
  mounted() {},
  methods: {
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50; //控制大小  修改50的值即可
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
          "video/mov",
        ].indexOf(file.type) == -1 //控制格式
      ) {
        layer.msg("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        layer.msg("视频大小不能超过50MB");
        return false;
      }
      this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      //注意在data中添加对应的变量名
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      //后台上传数据
      if (res.success == true) {
        this.videoForm.showVideoPath = res.data.url; //上传成功后端返回视频地址 回显
      } else {
        this.$message.error("上传失败！");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
