<template>
  <div class="palyVideo">
    <div class="fmp4-player">
      <video v-if="videoType == 'fmp4'" controls ref="myVideo" autoplay>
        <source :src="playVideoSrc" type="video/mp4" />
        您的浏览器不支持
      </video>
      <JessibucaPlayer v-if="videoType == 'ws_flv' && videoUrl" :video-url="videoUrl" />
    </div>
  </div>
</template>

<script>
import { defineComponent, watch, ref, onMounted, nextTick } from 'vue';
import { loginModel, login, getDevices, getDevicesChannels, playVideo, stopVideo, controlVideo } from '/@/api/map/monitor';
import JessibucaPlayer from './jessibucaPlayer.vue';
export default defineComponent({
  name: 'PlayVideo',
  components: { JessibucaPlayer },
  props: {
    videoInfo: null,
  },
  setup(props, ctx) {
    let playVideoSrc = '';
    // 必须和模板里的 ref 同名

    const myVideo = ref(null);
    const videoUrl = ref('');
    const videoType = ref('ws_flv');

    // watch(
    //   () => props.videoInfo,
    //   () => {
    //     debugger
    //   },
    //   { deep: true }
    // );

    /**
     * @description 获取视频流
     */
    async function getVideoSrc() {
      // 获取视频流地址
      const res = await fetch('http://localhost:9015/static/video/mov_bbb.mp4');
      const buffer = await res.arrayBuffer();
      // 构建 blob 对象
      const blob = new Blob([buffer], { type: 'video/mp4' });
      // 将 blob 对象转换为 URL
      const videoSrc = URL.createObjectURL(blob);
      return videoSrc;
    }

    /**
     * @description 动态通过接口获取数据
     */
    function getLgVideo() {
      let paramsModel = {
        'access-token': '',
        page: 1,
        count: 10000,
      };

      login(loginModel)
        .then((res) => {
          console.log('登录', res);
          paramsModel['access-token'] = res.data.accessToken;

          //获取设备信息
          let deviceModel = {
            deviceId: props.videoInfo.deviceCode,
            // deviceId: '51010000002000000001',
            ...paramsModel,
          };
          return getDevices(deviceModel);
        })
        .then((res) => {
          //获取通道信息
          let channelsModel = {
            deviceId: res.data.list[0].deviceId,
            // deviceId: '51010000002000000001',
            ...paramsModel,
          };
          return getDevicesChannels(channelsModel);
        })
        .then((res) => {
          //开始播放
          let playModel = {
            deviceId: res.data.list[0].deviceId,
            channelId: res.data.list[0].channelId,
            // deviceId: '51010000002000000001',
            ...paramsModel,
          };
          return playVideo(playModel);
        })
        .then((res) => {
          //获取播放的url
          console.log('播放列表:', res.data);
          var type = videoType.value; //'ws_flv'; //fmp4;
          var playUrl = res.data[type]; //fmp4;
          if (playUrl && type == 'fmp4') {
            var playUrl = playUrl.replace(/^https?:\/\/([\d.]+)(?::\d+)?/, ''); // 匹配 IP 地址和端口号部分并替换为空字符串
            console.log('截取播放的url:', playUrl);
            myVideo.value.src = playUrl;
            initPlayVideo();
          } else if (playUrl && type == 'ws_flv') {
            var playUrl = playUrl.split('rtp')[1];
            videoUrl.value = `ws://${location.host}/rtp${playUrl}`;
          }
        })
        .catch((e) => {
          console.log('video', e);
        });
    }

    /**
     * @description 播放
     */
    function initPlayVideo() {
      // const video = this.$refs.videoPlayer;
      // myVideo.value.src = 'http://localhost:9015/static/video/mov_bbb.mp4';
      if (myVideo.value.paused) {
        myVideo.value.play();
      }
    }

    /**
     * @description 初始加载
     */
    onMounted(() => {
      // List();
      // initPlayVideo();

      getLgVideo();
      // getVideoSrc().then((src) => {
      //   debugger;
      //   playVideoSrc = src;
      //   // playVideoxx();
      // });

      // myVideo.value.src = 'http://localhost:9015/static/video/mov_bbb.mp4';
    });

    const eventPlayVideo = () => {
      nextTick(() => {
        myVideo.value.play();
      });
    };

    const eventPauseVideo = () => {
      nextTick(() => {
        myVideo.value.pause();
      });
    };

    return {
      playVideoSrc,
      videoUrl,
      myVideo,
      videoType,
      eventPlayVideo,
      eventPauseVideo,
    };
  },
});
</script>

<style lang="less" scoped>
.palyVideo {
  height: calc(100% - 15px);
  width: calc(100% - 20px);
  position: absolute;
  left: 20px;
  .fmp4-player {
    height: 100%;
    width: 100%;
    position: relative;
    video {
      position: relative;
      height: 100% !important;
      width: 100% !important;
    }
  }
}
</style>
