<template>
  <div class="video-container">
    <h1>视频播放页面</h1>
    <div ref="thermalPlayerContainer" class="player-container"></div>
    <div ref="visiblePlayerContainer" class="player-container"></div>
  </div>
</template>

<script>
import DPlayer from 'dplayer';
import { saveAs } from 'file-saver';

export default {
  data() {
    return {
      thermalVideoUrl: '',
      visibleVideoUrl: '',
      thermalPlayer: null,
      visiblePlayer: null
    };
  },
  mounted() {
    this.loadVideoPaths();
  },
  methods: {
    async loadVideoPaths() {
      const filePath = this.$route.query.filePath;
      try {

        //TODO:修改为实际接口地址
/*        const thermalResponse = `/dev-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
        this.thermalVideoUrl = thermalResponse;
        const visibleResponse = `/dev-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
        this.visibleVideoUrl = visibleResponse;*/
        const thermalResponse = `/prod-api/record/recordInspectionCabinet/getThermalVideo/${filePath}`;
        this.thermalVideoUrl = thermalResponse;
        const visibleResponse = `/prod-api/record/recordInspectionCabinet/getVisibleVideo/${filePath}`;
        this.visibleVideoUrl = visibleResponse;

        this.playVideo();
      } catch (error) {
        console.log(error);
      }
    },

    playVideo() {
      // 销毁热成像播放器实例，如果存在的话
      if (this.thermalPlayer) {
        this.thermalPlayer.destroy();
      }

      // 销毁可见光播放器实例，如果存在的话
      if (this.visiblePlayer) {
        this.visiblePlayer.destroy();
      }

      // 初始化红外视频播放器实例
      this.thermalPlayer = new DPlayer({
        // 指定视频播放器的容器
        container: this.$refs.thermalPlayerContainer,
        // 启用截图功能
        screenshot: true,
        // 配置视频源
        video: {
          // 设置视频的URL
          url: this.thermalVideoUrl,
          // 自动检测视频类型
          type: 'auto'
        },

        // 定义一个数组，用于在组件中动态生成上下文菜单
        contextmenu: [
          // 创建一个菜单项对象
          {
            // 菜单项的文本内容
            text: '下载视频',
            // 菜单项的链接地址，绑定到当前组件的 thermalVideoUrl 属性
            link: this.thermalVideoUrl,
            // 菜单项的点击事件处理函数
            click: () => {
              // 调用 downloadVideo 方法下载视频
              // 参数1: 视频的URL，来自当前组件的 thermalVideoUrl 属性
              // 参数2: 下载后的文件名
              this.downloadVideo(this.thermalVideoUrl, 'thermal-video.mp4');
            }
          }
        ]
      });

      this.visiblePlayer = new DPlayer({
        container: this.$refs.visiblePlayerContainer,
        screenshot: true,
        video: {
          url: this.visibleVideoUrl,
          type: 'auto'
        },
        contextmenu: [
          {
            text: '下载视频',
            link: this.visibleVideoUrl,
            click: () => {
              this.downloadVideo(this.visibleVideoUrl, 'visible-video.mp4');
            }
          }
        ]
      });
    },

    /**
     * 下载视频文件
     * 该函数通过fetch API从给定的URL获取视频内容，并将其保存到本地，文件名由用户指定
     *
     * @param {string} url - 视频内容的URL地址，用于fetch API获取数据
     * @param {string} filename - 保存到本地时使用的文件名
     */
    downloadVideo(url, filename) {
      // 使用fetch API从指定URL获取视频内容
      fetch(url)
        .then(response => response.blob())
        .then(blob => saveAs(blob, filename))
        .catch(error => console.error('下载失败:', error));
    }
  },

  beforeDestroy() {
    if (this.thermalPlayer) {
      this.thermalPlayer.destroy();
    }
    if (this.visiblePlayer) {
      this.visiblePlayer.destroy();
    }
  }
};

</script>

<style scoped>
.video-container {
  /* 使用Flexbox布局来优化组件内部元素的排列 */
  display: flex;
  /* 设置主轴方向为垂直，使子元素沿柱状轴线排列 */
  flex-direction: column;
  /* 指定交叉轴上的对齐方式，使子元素在水平方向居中对齐 */
  align-items: center;
  /* 指定主轴上的对齐方式，使子元素在垂直方向居中对齐 */
  justify-content: center;
  min-height: 100vh; /* 使容器至少与视口一样高 */
}

.player-container {
  width: 100%; /* 或者你可以设置一个固定宽度 */
  max-width: 640px; /* 限制最大宽度 */
  margin: 10px 0;
  aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
/*使用Flexbox布局使内容居中显示*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black; /* 背景色，可根据需要调整 */
}
</style>
