<template>
  <div>
    <div class="wrapper">
      <video ref="videoStreamtopVideo" width="100%" autoplay muted controls></video>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <template v-for="(item,index) in videoRoomSteamList">
            <div :key="item.webrtcUrl" class="swiper-slide">
              <video class="remoteVideo" :ref="'videoStream'+item.publishId" width="100%" autoplay
                     @click="videoClickAction(item.publishId)"></video>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!--    <video ref="localVideo" id="rtc_media_local_player" width="310" autoplay muted controls></video>-->
    <!--    <van-button type="primary" @click="playVideo">主要按钮</van-button>-->
    <!--    <van-button type="primary" @click="beginPublish">开始推流</van-button>-->
  </div>
</template>

<script>
import axios from "axios";
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

/* eslint-disable */
export default {
  name: "call_room",
  data() {
    return {
      value: "webrtc://119.45.242.222/live/livestream123",
      isPublish: 0,
      isPlayer: 0,
      uid: 0,
      roomId: 0,
      roomTimer: null,
      topVideo: "",
      videoRoomSteamList: [],
      oldVideoStreamList: [],
      swiperInstance: null,
    };
  },
  mounted() {
    this.isPublish = this.$route.query.isPublish;
    this.isPlayer = this.$route.query.isPlayer;
    this.uid = this.$route.query.uid;
    this.roomId = this.$route.query.room;
    this.topVideo = this.uid;

    if (this.isPublish == 1) {
      this.beginPublish()
    }
    if (this.isPlayer == 1) {
      this.roomTimer = setInterval(() => {
        this.getRoomVideoList();
      }, 2000)
    }
    this.swiperInstance = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 30,
      observer: true,
      on: {},
    })

  },
  beforeDestroy() {
    clearInterval(this.roomTimer);
    this.roomTimer = null;
    this.leaveRoom();
  },
  methods: {
    beginPublish() {
      let _this = this;
      //http://localhost:8080/hd-glasses-app/#/call_room?isPublish=1&isPlayer=1&uid=123&room=call_room

      // var query = parse_query_string();

      const publistUrl = process.env.VUE_APP_SRS_URL + this.roomId + "/" + this.uid;

      // srs_init_rtc("#txt_url", publistUrl);

      //初始化sdk
      let sdk = null;
      if (sdk) {
        sdk.close();
      }
      sdk = new SrsRtcPublisherAsync();
      //绑定本地视频流
      // const localVideo = this.$refs.localVideo;
      // localVideo.srcObject = null;
      // localVideo.srcObject = sdk.stream;

      sdk.publish(publistUrl).then((session) => {
        _this.joinRoom()
      }).catch(function (reason) {
        console.error(reason)
        // Throw by sdk.
        // See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
        if (reason instanceof DOMException) {
          if (reason.name === 'NotFoundError') {
            alert(`找不到麦克风和摄像头设备：getUserMedia ${reason.name} ${reason.message}`);
          } else if (reason.name === 'NotAllowedError') {
            alert(`你禁止了网页访问摄像头和麦克风：getUserMedia ${reason.name} ${reason.message}`);
          } else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) {
            alert(`getUserMedia ${reason.name} ${reason.message}`);
          }
        }
        sdk.close();
        console.error(reason);
      });


    },
    playVideo(publishId = "", url = "") {
      let sdk = null;
      let video = null;
      // const _key=`${}`

      video = eval('this.$refs.videoStream' + publishId)[0]

      // const video = this.$refs[_key];
      if (video.srcObject != null) {
        return false;
      }
      // console.warn(video.srcObject )
      // console.warn(video.srcObject )
      // console.warn(video.srcObject )
      // console.warn(video.srcObject )
      // console.warn(video.srcObject )

      var query = parse_query_string();

      srs_init_rtc("#txt_url", this.value);

      if (sdk) {
        sdk.close();
      }
      sdk = new SrsRtcPlayerAsync();

      if (this.topVideo == publishId) {
        const topVideo = this.$refs.videoStreamtopVideo
        topVideo.srcObject = sdk.stream;
        topVideo.onloadedmetadata = function (e) {
          topVideo.play();
        };
      }


      video.srcObject = sdk.stream;
      video.onloadedmetadata = function (e) {
        video.play();
      };

      // $('#rtc_media_player').prop('srcObject', sdk.stream);
      // Optional callback, SDK will add track to stream.
      // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };

      // For example: webrtc://r.ossrs.net/live/livestream
      // var url = this.value
      sdk.play(url).then(function (session) {
        // $('#sessionid').html(session.sessionid);
        // $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
      }).catch(function (reason) {
        sdk.close();
        $('#rtc_media_player').hide();
        console.error(reason);
      });

    },
    getRoomVideoList() {
      axios({
        method: "post",
        url: process.env.VUE_APP_IM_API_URL + "/room/getRoomInfo",
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        // mode: 'no-cors',
        data: {
          roomId: this.roomId
        },
      }).then(res => {
        if (res.status == 200) {
          this.generateVideoRoomStream(res.data.data)
        }
      })
    },
    leaveRoom() {
      axios({
        method: "post",
        url: process.env.VUE_APP_IM_API_URL + "/room/leaveRoom",
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        data: {
          roomId: this.roomId,
          publishId: this.uid,
          type: 'webrtc'
        },
      }).then(res => {
        console.log(res)
      })
    },
    joinRoom() {
      axios({
        method: "post",
        url: process.env.VUE_APP_IM_API_URL + "/room/joinRoom",
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        },
        // mode: 'no-cors',
        data: {
          roomId: this.roomId,
          publishId: this.uid,
          type: 'webrtc',
          webrtcUrl: process.env.VUE_APP_SRS_URL + this.roomId + "/" + this.uid
        },
      }).then(res => {
        console.log(res)
      })
    },
    generateVideoRoomStream(videoList) {
      let hasUpdate = false;
      if (this.oldVideoStreamList == null) {
        this.oldVideoStreamList = videoList;
      } else {
        if (JSON.stringify(this.oldVideoStreamList) != JSON.stringify(videoList)) {
          hasUpdate = true
        }
      }
      this.oldVideoStreamList = videoList;
      this.videoRoomSteamList = videoList;

      setTimeout(() => {
        videoList.map((item) => {
          this.playVideo(item.publishId, item.webrtcUrl)
        })
        if (hasUpdate) {
          this.swiperInstance.update();
          console.log("数据有变化，更新swipper")
          //视频流有变化，检查置顶用户是否以及走掉
          this.updateTopVideoStream();

        }

      }, 1000)
      //videoSteamList
    },
    videoClickAction(publishId) {
      this.topVideo = publishId;
      var video = eval('this.$refs.videoStream' + publishId)[0]
      console.log(video.srcObject)
      this.$refs.videoStreamtopVideo.srcObject = video.srcObject;
    },
    //讲列表有人下线，判断top流是否正常，如果不正常则把列表第一个移到Top
    updateTopVideoStream() {
      console.log(this.$refs.videoStreamtopVideo.srcObject)
      let topVideo = this.oldVideoStreamList.find(item => item.publishId == this.topVideo)
      //如果置顶用户已经走掉，则把用户自己的视频置顶
      if (topVideo == undefined) {
        var video = eval('this.$refs.videoStream' + this.uid)[0]
        this.$refs.videoStreamtopVideo.srcObject = video.srcObject;
      }

    }
  }
}
</script>

<style lang="less">

.slide {
  height: 200px;
  width: 200px;
}

.swiper-slide {
  background: #000000;
  width: 200px;
  height: 180px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 20px;

  .remoteVideo {
    width: 100%;
    height: auto;
  }
}
</style>
