<!--
<template>
  <div class="video-container">
    <h1>视频播放页面</h1>
    <video controls width="640" ref="thermalVideo" :src="thermalVideo" height="360" autoplay>
      您的浏览器不支持 video 标签。
    </video>
    <video controls width="640" ref="visibleVideo" :src="visibleVideo" height="360" autoplay>
      您的浏览器不支持 video 标签。
    </video>
  </div>
</template>

<script>
import { getThermalVideo, getVisibleVideo } from "@/api/record/recordInspectionCabinet";
import axios from 'axios';

export default {
  data() {
    return {
      thermalVideo: '',
      visibleVideo: '',
      thermalVideoUrl: '',
      visibleVideoUrl: '',
      thermalVideoPath: '',
      visibleVideoPath: ''
    };
  },
  mounted() {
    this.loadVideoPaths();
  },
  methods: {
    async loadVideoPaths() {
      const filePath = this.$route.query.filePath;
      try {
        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;*/
/*        const thermalResponse =  getThermalVideo(filePath);
        this.thermalVideoUrl = thermalResponse;
        const visibleResponse=  getVisibleVideo(filePath);
        this.visibleVideoUrl = visibleResponse;*/

        console.log(this.thermalVideoUrl);
        console.log(this.visibleVideoUrl);

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

    playVideo() {
      // 检查视频源是否已经更改，避免重复设置
      if (this.thermalVideo !== this.thermalVideoUrl) {
        this.thermalVideo = this.thermalVideoUrl;
        this.$refs.thermalVideo.load(); // 加载新的视频源
      }
      if (this.visibleVideo !== this.visibleVideoUrl) {
        this.visibleVideo = this.visibleVideoUrl;
        this.$refs.visibleVideo.load(); // 加载新的视频源
      }

      // 确保视频加载完成后再播放
      this.$refs.thermalVideo.onloadeddata = () => {
        this.$refs.thermalVideo.play();
      };
      this.$refs.visibleVideo.onloadeddata = () => {
        this.$refs.visibleVideo.play();
      };
    }
  }
};

</script>

<style scoped>
video {
  margin: 10px 0;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-container video {
  margin-bottom: 20px; /* 在每个视频下方添加20px的间隔 */
}
</style>-->




<template>
  <div class="video-container">
    <h1>视频播放页面</h1>
    <video controls width="640" ref="thermalVideo" :src="thermalVideo" height="360" autoplay>
      您的浏览器不支持 video 标签。
    </video>
    <video controls width="640" ref="visibleVideo" :src="visibleVideo" height="360"  autoplay>
      您的浏览器不支持 video 标签。
    </video>
  </div>
</template>


<script>
import {getThermalVideo, getVisibleVideo} from "@/api/record/recordInspectionCabinet";
import axios from 'axios';


export default {
  data() {
    return {
      thermalVideo: '',
      visibleVideo: '',
      thermalVideoUrl: '',
      visibleVideoUrl: '',
      thermalVideoPath: '',
      visibleVideoPath: ''
    };
  },
  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;*/
        /*        const thermalResponse =  getThermalVideo(filePath);
                this.thermalVideoUrl = thermalResponse;
                const visibleResponse=  getVisibleVideo(filePath);
                this.visibleVideoUrl = visibleResponse;*/

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

    playVideo() {
      this.thermalVideo = this.thermalVideoUrl;
      this.visibleVideo = this.visibleVideoUrl;

      this.$refs.thermalVideo.play();
      this.$refs.visibleVideo.play();
    }
  },

}

</script>

<style scoped>
video {
  margin: 10px 0;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-container video {
  margin-bottom: 20px; /* 在每个视频下方添加20px的间隔 */
}

</style>
