<template>
  <div class="container">
    <div v-for="(url, index) in addList" :key="index" class="img_item">
      <el-image
        style="width: 100px; height: 100px; border-radius: 8px"
        fit="cover"
        :src="url.faceImg"
        @click="videoClick(url.url)"
      >
        <div slot="error">
          <img
            src="../../assets/image/image_placeholder.png"
            style="width: 100px; height: 100px"
          />
        </div>
      </el-image>
      <img
        src="../../assets/image/close.png"
        class="image_del"
        @click="handleRemove(index)"
      />
    </div>
    <div class="upload-box" v-if="addList.length != count">
      <el-upload
        :action="uploadImgUrl"
        multiple
        :limit="count"
        accept="video/*"
        :file-list="showImgList"
        :show-file-list="false"
        :on-exceed="exceedLimit"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      >
        <div class="add-picture">
          <div
            v-if="tip != ''"
            style="color: #999; margin: 0 10px; line-height: 20px"
          >
            {{ tip }}
          </div>
          <img
            v-else
            src="../../assets/image/addVideo.png"
            class="addPicture"
          />
        </div>
      </el-upload>
    </div>
    <!-- 视频播放 弹框 -->
    <el-dialog title="视频播放" :visible.sync="videoShow" width="60%">
      <div v-show="videoShow">
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        >
        </video-player>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UploadImg",
  props: {
    imgList: {
      type: Array,
      default: [],
    },
    count: {
      type: Number,
      default: 1,
    },
    type: {
      type: String,
      default: "",
    },
    tip: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/oss/videoUpload", // 上传的视频服务器地址
      list: "",
      srcList: [],
      showImgList: [],
      addList: [],
      // 视频播放弹框显示
      videoShow: false,
      // 视频插件参数
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "", // url地址
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
    };
  },
  created() {},
  watch: {
    imgList() {
      this.filterList(this.imgList);
    },
  },
  methods: {
    filterList(imgArr) {
      this.$nextTick(() => {
        let arr = [];
        this.showImgList = [];
        this.addList = [];
        imgArr.map((item) => {
          let obj = { url: "", faceImg: "", resourceType: "" };
          if (item.response && item.response.result != "") {
            arr.push(item.response.result);
            obj.url = item.response.result.videoUrl;
            obj.faceImg = item.response.result.signedUrl;
          } else {
            arr.push(item.signedUrl);
            obj.url = item.signedUrl;
          }
          this.showImgList.push(obj);
          this.addList.push(obj);
        });
        this.list = arr.join(";");
      });
    },
    //文件上传完成
    handleSuccess(res, file, fileList) {
      this.addList.push({
        faceImg: res.result.signedUrl,
        url: res.result.videoUrl,
        resourceType: "001",
      });
      this.$emit("changeVideo", this.addList, this.type);
    },
    //文件删除
    handleRemove(i) {
      this.addList.splice(i, 1);
      this.filterList(this.addList);
      this.$emit("changeVideo", this.addList, this.type);
    },
    // 点击视频
    videoClick(url) {
      console.log(url)
      this.playerOptions.sources[0].src = url;
      this.videoShow = true;
    },
    beforeUpload(file) {
      const isMP4 = file.type === "video/mp4";
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isMP4) {
        this.$message.error("上传图片只能是 MP4格式!");
      }
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return (isMP4 || isPNG) && isLt10M;
    },
    exceedLimit() {
      this.$message.error(`最多上传${this.count}个视频`);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}
.img_item {
  position: relative;
  margin-right: 10px;
  display: inline-block;
  .image_del {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    width: 20px;
    height: 20px;
    color: red;
    cursor: pointer;
  }
}
.add-picture {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 8px;
  .addPicture {
    width: 60px;
    height: 60px;
  }
}
</style>