<template>
  <div
    class="study-video"
    v-loading="loading"
    element-loading-text="视频加载中，请耐心等待..."
    element-loading-background="rgba(0, 0, 0, 1)"
  >
    <!-- 视频播放器容器 -->
    <video
      id="my-video"
      class="video-js"
      controls
      preload="auto"
      width="100%"
      height="100%"
      data-setup="{}"
    >
      <!-- 视频源，指定视频文件和类型 -->
      <source :src="videoUrl" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import { mapState} from 'vuex'
import {onlinePreview} from '@/api/systemInterface'

export default {
  name: 'previewVideo',
  props: {
    // 资料信息
    dataInformation: {
      default: () => ({}),
      type: Object
    }
  },
  components: {},
  data() {
    return {
      player: null, // video.js 的播放器实例
      messageAssembly: null,
      videoUrl: '',
      loading: true
    }
  },
  computed: {
    actionUrl: _ => window.context.portal,
    fileId() {
      return this.dataInformation.id || ''
    },
  },
  watch: {
    dataInformation: {
      handler(newVal, oldVal) {
        this.loading = true
        if (oldVal?.id) {
          clearInterval(this.intervalTimer)
          this.sendLearningDuration(_ => {
            this.getVideoSrc(newVal.id)
          }, oldVal)
        }
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.creatVideo()
    this.$nextTick(_ => this.getVideoSrc(this.dataInformation.id))
  },
  methods: {

    // 获取pdf都中
    async getVideoSrc(fileId = '') {
      if (!fileId) return this.$message.error('文件错误，请联系管理员解决')
      try {
        const {mediaUrl} = await onlinePreview(fileId)
        if (mediaUrl) {
          this.videoUrl = this.actionUrl + mediaUrl
          this.player.src({
            type: 'application/x-mpegURL',
            src: this.videoUrl
          })
        } else {
          this.$message.error('文件错误，请联系管理员解决2')
        }
      } catch {
        this.$message.error('文件错误，请联系管理员解决3')
      }
    },

    creatVideo() {
      // 在组件挂载完成后初始化视频播放器，并设置事件监听
      const _this = this
      this.player = this.$videoJs(
        this.$el.querySelector('#my-video'),
        {
          language: 'zh-CN',
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true
        },
        function() {
          _this.initializePlayerEvents()
        }
      )
    },

    // 注册视频播放器的事件监听
    initializePlayerEvents() {
      this.player.on('loadedmetadata', () => {
        this.player.play()
        this.loading = false
      })
      // this.player.on('timeupdate', this.handleTimeUpdate) // 处理播放时间更新事件
      // this.player.on('seeking', this.handleSeeking) // 处理用户试图跳转事件
      // this.player.on('ended', () => this.startEndInterval(false)) // 视频播放结束
      // this.player.on('error', () => this.startEndInterval(false)) // 加载错误
      // this.player.on('abort', () => this.startEndInterval(false)) // 当视频加载被终止时触发
      // this.player.on('emptied', () => this.startEndInterval(false)) // 当前资源被移除时触发
    },

    handleTimeUpdate() {
      return 
      // 使用防抖方式处理播放时间更新，以确保只处理最后一次事件
      this.timeUpdateDebounceTimer = setTimeout(() => {
        const currentTime = this.player.currentTime()
        // 更新已观看的最大时间点，仅当当前时间大于记录的最大时间时更新
        if (currentTime > this.maxWatchedTime) {
          this.maxWatchedTime = currentTime
        }
        // 更新进度条样式以反映可观看部分
        this.updateProgressBar(this.maxWatchedTime)
      }, 0) // 设置为0毫秒，实际效果是将事件放到事件队列的末尾
    },

    // 当用户试图跳转时触发
    handleSeeking() {
      return 
      const seekingTime = this.player.currentTime()
      // 如果跳转目标时间大于已观看的最大时间，将播放器跳回到最大观看时间点
      if (seekingTime > this.maxWatchedTime + 1) {
        this.messageAssembly && this.messageAssembly.close()
        this.messageAssembly = this.$message.warning('不能跳转到未学习的进度')
        this.player.currentTime(this.maxWatchedTime)
      }
    },

    // 更新进度条样式以反映可观看部分
    updateProgressBar(maxTime) {
      const duration = this.player.duration()
      const percentage = (maxTime / duration) * 100
      const progressHolder = this.player
        .el()
        .querySelector('.vjs-progress-holder')

      if (progressHolder) {
        progressHolder.style.background = `linear-gradient(to right, #3399FF 0%, #3399FF ${percentage}%, #666 ${percentage}%, #666 100%)`
      }
    }
  },
  beforeDestroy() {
    if (this.player) {
      // 组件销毁前清理资源
      this.player.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.study-video {
  width: 100%;
  height: 100%;

  ::v-deep .video-js {
    width: 100%;
    height: 100%;

    .vjs-control-bar {
      height: 40px;

      * {
        font-size: 16px;
      }

      .vjs-load-progress {
        display: none;
      }

      /* 已播放部分的样式 */
      .vjs-progress-holder {
        background-color: #666; /* 暗色表示未观看 */
        position: relative;

        /* 标记禁用状态的光标样式 */
        //cursor: not-allowed;
      }

      /* 进度条的总体背景，表示未播放的部分 */
      .vjs-play-progress {
        background-color: #3399ff; /* 明亮的颜色表示已观看部分 */
        /* 在已播放区域显示正常的指针 */
        cursor: pointer;

        &::after {
          font-size: 16px;
        }
      }

      /* 加载但未播放部分的样式 */

      .vjs-load-progress {
        background-color: #999; /* 中等明亮的颜色 */
      }

      .vjs-mouse-display {
        * {
          font-size: 16px;
        }
      }

      .vjs-button {
        font-size: 12px;
      }

      .vjs-remaining-time-display {
        line-height: 40px;
      }
    }

    .vjs-big-play-button {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 50px;
      line-height: 53spx;

      .vjs-icon-placeholder {
        font-size: 32px;
      }
    }
  }
}
</style>
