<template>
  <el-upload
    class="avatar-uploader"
    :action="uploadVideoUrl"
    :on-progress="uploadVideoProcess"
    :on-success="handleVideoSuccess"
    :before-upload="beforeUploadVideo"
    :on-error="handleUploadError"
    :show-file-list="false"
    :headers="headers"
  >
    <div class="video-main">
      <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>
      <div
        class="close-btn"
        @click.stop="handleClose()"
        v-if="videoForm.showVideoPath != ''"
      >
        <i class="el-icon-delete-solid"></i>
      </div>
    </div>

    <el-progress
      v-if="videoFlag == true"
      type="circle"
      v-bind:percentage="videoUploadPercent"
      style="margin-top: 7px"
    ></el-progress>
  </el-upload>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    value: [String, Object, Array],
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadVideoUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
        showVideoPath: "", //回显的变量
      },
    };
  },
  watch: {
    value: {
      handler(val) {
        console.log("会显示", val);
        if (val) {
          this.videoForm.showVideoPath = this.baseUrl + val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /**s删除视频 */
    handleClose() {
      this.videoForm.showVideoPath = "";
      this.videoFlag = false;
      this.$emit("input", "");
    },
    //上传前回调
    beforeUploadVideo(file) {
      var fileSize = file.size / 1024 / 1024 < 50; //控制大小  修改50的值即可
      if (
        ["video/mp4", "video/avi", "video/rmvb"].indexOf(file.type) == -1 //控制格式
      ) {
        this.$modal.msgError("请上传正确的视频格式");
        return false;
      }
      if (!fileSize) {
        this.$modal.msgError("视频大小不能超过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;
      this.videoForm.showVideoPath = this.baseUrl + res.fileName;
      this.$emit("input", res.fileName);
      this.$modal.msgSuccess("上传成功");
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传视频失败，请重试");
      this.$modal.closeLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}
.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
.video-main {
  position: relative;
  .close-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 1px solid red;
    text-align: center;
    line-height: 25px;
    color: red;
    background: #fff;
  }
}
</style>
