<template>
  <div class="palyVideo">
    <div class="fmp4-player">
      <!-- <video
        controls
        ref="videoPlayer"
        width="600"
        height="400"
        :src="playVideoSrc"
        type="video/mp4;"
      ></video> -->

      <!-- <video controls ref="videoPlayer" width="600" height="400" >
        <source :src="playVideoSrc" type="video/mp4" />
      </video> -->

      <!-- src="http://localhost:9015/static/video/mov_bbb.mp4" -->

      <video controls ref="myVideo" width="600" height="400">
        <source :src="playVideoSrc" type="video/mp4" />
        您的浏览器不支持
      </video>

      <!-- <button @click="playVideo">Play</button>
      <button @click="pauseVideo">Pause</button> -->
    </div>
  </div>
</template>

<script>
import { defineComponent, watch, ref, onMounted, nextTick } from 'vue';
import { loginModel, login, getDevices, getDevicesChannels, playVideo, stopVideo, controlVideo } from '/@/api/map/monitor';

export default defineComponent({
  name: 'PlayVideo',
  components: {},

  setup() {
    let playVideoSrc = '';
    // 必须和模板里的 ref 同名

    const myVideo = ref(null);

    /**
     * @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: '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
          var playUrl = res.data.fmp4;
          var playUrl = playUrl.replace(/^https?:\/\/([\d.]+)(?::\d+)?/, ''); // 匹配 IP 地址和端口号部分并替换为空字符串
          console.log('获取播放的url:', playUrl);
          myVideo.value.src = 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();
      } else {
        myVideo.value.pause();
      }
    }

    /**
     * @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,

      myVideo,

      eventPlayVideo,
      eventPauseVideo,
    };
  },
});
</script>

<style lang="less" scoped>
.palyVideo {
  height: 100%;
  position: relative;
}
</style>
