<template>
  <div>
    <div class="video-container">
      <div class="return-btn">
        <el-button type="primary" size="mini" icon="el-icon-d-arrow-left"
          @click="$router.push({ path: '/oa/study/myStudy' })">返回我的学习</el-button>
      </div>
      <video ref="reviewPlayer" width="1300" height="750" class="custom-video video-js vjs-big-play-centered"
        @play="handlePlay" @pause="handlePause" @ended="handleEnd">
      </video>
    </div>
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { listResource, getResource, delResource, addResource, updateResource } from "@/api/oa/study/resource";
import { listStudy, getStudy, delStudy, addStudy, updateStudy } from "@/api/oa/study/myStudy";

export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      videoId: '',
      videoPath: '',
      player: null,
      lastPosition: 0,
      getHours: '', //可获得的学时
      isComplete: false, //是否已经看完
      resource: {},
      // 禁用功能配置
      disabledControls: [
        'progressControl', // 隐藏进度条
        'seekBar',         // 禁用拖拽
        'remainingTimeDisplay',
        'playbackRateMenuButton'
      ],
      videoDuration: undefined,
      percentage: 0,
      boxShow: false,
    };
  },
  watch: {
    videoPath() {
      this.$nextTick(() => {
        const video = this.$refs.reviewPlayer;
        if (!video) return;
        video.pause();
        video.removeAttribute("src");
        video.load();
        setTimeout(() => {
          video.src = this.fullVideoPath;
          video.load();
        }, 100);
      });
    }
  },
  computed: {
    fullVideoPath() {
      return `/dev-api/profile/upload/${this.videoPath}`
    }
  },
  created() {
    if (this.$store.getters.device === 'mobile') {
      this.boxShow = false;
      return
    } else {
      this.boxShow = true;
    }
    this.getData();
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    async getData() {
      let studyId = this.$route.params.id;
      let resData = await getStudy(studyId);
      let data = resData.data
      this.resource = data.resource;
      this.videoPath = data.resource.sourcePath;
      this.percentage = Number(data.lastPoint);
    },
    // 初始化播放器
    initPlayer() {
      const self = this;
      this.player = videojs(this.$refs.reviewPlayer, {
        // 增加错误处理回调
        errorDisplay: false,
        autoplay: false,
        controls: true,
        sources: [{ src: this.fullVideoPath, type: 'video/mp4' }],
        controlBar: {
          // children: this.disabledControls,
          // 自定义禁止拖拽的进度条
          progressControl: true, // 关闭进度条
          volumePanel: true      // 启用音量控制
        },
        userActions: {
          hotkeys: false,
          // 禁用双击全屏
          doubleClick: false
        }
      });
      let retryCount = 0;
      // 增加错误监听
      this.player.on('error', () => {
        console.error('播放器错误:', this.player.error());
        if (retryCount < 3) {
          this.player.src(this.fullVideoPath);
          this.player.load();
          retryCount++;
        }
      });
    },
    // 处理播放事件
    handlePlay() {
    },

    // 处理暂停事件
    handlePause() {

    },

    // 处理视频结束
    async handleEnd() {

    },
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style lang="scss" scoped>
.video-container {
  position: relative;

  .return-btn {
    position: absolute;
    left: 20px;
    top: 30px;
    width: 130px;
  }

  .custom-video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
  }

  .progress-alert {
    position: absolute;
    bottom: 40px;
    width: 100%;
    z-index: 1;
  }
}
</style>