<template>
  <div class="videoRoomContainer">
    <div class="wrapper">
      <video ref="videoStreamtopVideo" width="100%" autoplay></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 class="actionBtnList">
        <div @click="closeVoice">
          <div class="actionBtn">
            <img :src="voiceImg">
          </div>
        </div>
        <div @click="closeCamera">
          <div class="actionBtn">
            <img :src="cameraImg">
          </div>
        </div>
        <div @click="switchCamera">
          <div class="actionBtn">
            <img :src="switchCameraImg">
          </div>
        </div>
        <div @click="videoDownAction">
          <div class="actionBtn callDownBox">
            <img :src="callDwonImg">
          </div>
        </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' // 注意这里的引入
import {Notify, Dialog} from 'vant';

import {getStatisFileUrl} from '../utils/publicFun'

/* 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,
      publishSdk: null,
      publistUrl: "",
      constraints: {
        audio: true,
        video: {
          // deviceId: {
          //   exact: "136e115ef37b7ec8361207a61d42cd39818381aa0e99728e35eb9746bedce6b4"
          // },
          width: {ideal: 320, max: 576}
        }
      },
      cameraDevices: [],
      cameraIndex: 0,
      isCloseCamera: false,
      isCloseVoice: false,
      voiceImg: "",
      cameraImg: "",
      switchCameraImg: "",
      callDwonImg: "",
      showConfirmDialog: 0,
      inviteName: 0,
      showInviteConfirmDialog: 0,
    };
  },
  mounted() {
    console.log(location.href)
    console.log(location.href)
    console.log(location.href)

    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.inviteName = this.$route.query.inviteName || '';
    this.topVideo = this.uid;
    this.showConfirmDialog = this.$route.query.showConfirmDialog;
    this.showInviteConfirmDialog = this.$route.query.showInviteConfirmDialog;


    this.voiceImg = getStatisFileUrl("/media/voice_open.png")
    this.cameraImg = getStatisFileUrl("/media/camera_open.png")
    this.switchCameraImg = getStatisFileUrl("/media/switch.png")
    this.callDwonImg = getStatisFileUrl("/media/call_down.png")

    this.token = this.$route.query.token || "";
    if (this.token > 10) {
      localStorage.setItem("hd_token", this.token)
    }

    if (this.showConfirmDialog == 1) {
      Dialog.confirm({
        title: '是否接受？',
        message: `${this.inviteName}邀请你加入视频聊天`,
      })
          .then(() => {
            this.init();
            // on confirm
          })
          .catch(() => {
            location.href = "uniwebview://action?function=refuseVideoInvite";
            // on cancel
          });
    } else if (this.showInviteConfirmDialog == 1) {
      Dialog.confirm({
        title: '提示',
        message: `确认是否发起视频聊天？`,
      })
          .then(() => {
            this.init();
            // on confirm
          })
          .catch(() => {
            window.history.go(-1);
            // on cancel
          });
    } else {
      this.init();
    }

  },

  beforeDestroy() {
    clearInterval(this.roomTimer);
    this.roomTimer = null;
    this.leaveRoom();
  },
  methods: {
    init() {
      Notify({
        message: '如视频不能播放，请点击视频列表中对应的用户上方的小视频',
        duration: 10000,
        type: 'primary'
      });

      if (this.isPublish == 1) {
        this.beginPublish()
      }
      if (this.isPlayer == 1) {
        this.getRoomVideoList();
        this.roomTimer = setInterval(() => {
          this.getRoomVideoList();
        }, 2000)
      }
      this.swiperInstance = new Swiper('.swiper-container', {
        slidesPerView: 4,
        spaceBetween: 30,
        observer: true,
        on: {},
      })
    },
    closeVoice() {
      this.constraints.audio = false;
      //如果声音是开启状态
      if (!this.isCloseVoice) {
        // 关闭声音
        this.isCloseVoice = true
        this.voiceImg = getStatisFileUrl("/media/voice_close.png")
      } else {
        // 打开声音
        this.isCloseVoice = false;
        this.constraints.audio = true
        this.voiceImg = getStatisFileUrl("/media/voice_open.png")
      }
      this.beginPublish()
    },
    closeCamera() {
      this.constraints.video = false;
      //如果视频是开启状态
      if (!this.isCloseCamera) {
        this.constraints.video = false
        this.isCloseCamera = true
        this.cameraImg = getStatisFileUrl("/media/camera_close.png")
      } else {
        let deviceId = {
          exact: ""
        }
        deviceId.exact = this.cameraDevices[this.cameraIndex].deviceId
        this.constraints.video = {}
        this.constraints.video.deviceId = deviceId
        this.isCloseCamera = false
        this.cameraImg = getStatisFileUrl("/media/camera_open.png")
      }
      this.beginPublish()
    },
    switchCamera() {
      let self = this;
      self.cameraIndex = self.cameraIndex + 1 == self.cameraDevices.length ? 0 : self.cameraIndex + 1
      let deviceId = {
        exact: ""
      }
      deviceId.exact = self.cameraDevices[self.cameraIndex].deviceId
      self.constraints.video.deviceId = deviceId

      this.beginPublish()

    },
    gotDevices(deviceInfos) {
      for (let i = 0; i !== deviceInfos.length; ++i) {
        const deviceInfo = deviceInfos[i];
        const option = document.createElement('option');
        option.value = deviceInfo.deviceId;
        if (deviceInfo.kind === 'audioinput') {
          // console.log(option)
          // console.log(deviceInfo)
        } else if (deviceInfo.kind === 'audiooutput') {
          // console.log(option)
          // console.log(deviceInfo)
        } else if (deviceInfo.kind === 'videoinput') {
          this.cameraDevices.push(deviceInfo)
        } else {
          console.log('Some other kind of source/device: ', deviceInfo);
        }
      }
    },
    handleError(error) {
      console.log('navigator.getUserMedia error: ', error);
    },
    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;
      _this.publistUrl = publistUrl;
      // srs_init_rtc("#txt_url", publistUrl);

      navigator.mediaDevices.enumerateDevices().then(this.gotDevices).catch(this.handleError);


      if (_this.publishSdk) {
        _this.publishSdk.close();
      }
      _this.publishSdk = null;

      _this.publishSdk = new SrsRtcPublisherAsync();
      // 绑定本地视频流
      // const localVideo = this.$refs.localVideo;
      // localVideo.srcObject = null;
      // localVideo.srcObject = sdk.stream;

      _this.publishSdk.publish(publistUrl, _this.constraints).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}`);
          }
        }
        _this.publishSdk.close();
        console.error(reason);
      });


    },
    playVideo(publishId = "", url = "") {
      let _this = this;
      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.volume = 0
          topVideo.play();
        };
      }


      video.srcObject = sdk.stream;
      video.onloadedmetadata = function (e) {
        if (publishId == _this.uid)
          video.volume = 0
          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]
      video.play();

      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;
      }

    },
    videoDownAction() {
      location.href = "uniwebview://action?function=restartCamera";
      this.publishSdk.close();
      if (this.showConfirmDialog == 1) {
        console.log("挂断视频")
        location.href = "uniwebview://action?function=refuseVideoInvite";
      } else {
        window.history.go(-1);
      }
    }
  }
}
</script>

<style lang="less">

.videoRoomContainer {
  width: 100vw;
  height: 100vh;
  background-color: #333030;
}

.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;
  }
}

.actionBtnList {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 16px;

  .actionBtn {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 50%;
      height: 50%;
    }

  }
}

.callDownBox {
  background: #DA4C4B !important;
}
</style>
