<template>
  <div ref="videoRoom" class="room-content border-radius-8" v-vdrag :class="zoomActive ? `room-content-big` : 'room-content-small'">
    <div class="room-top flex-row justify-content-between align-items-center">
      <div class="f16 f-weight600 flex-row">
        <div class="mr-8">调解视频画面</div>
        <div class="color-F53F3F" v-if="videoRecordingSts">{{ formattedTime }}</div>
      </div>
      <div class="flex-row">
        <div class="room-top-btn background-color-fff flex-row align-items-center border-radius-4 cursor-pointer mr-8"
            @click="handleClose">
          <span class="mr-4">退出房间</span>
        </div>
        <div class="room-top-btn background-color-fff flex-row align-items-center border-radius-4 cursor-pointer"
            @click="toggleZoom">
          <span class="mr-4">{{ zoomActive ? '缩小' : '放大' }}</span>
          <svg-icon :icon-class="zoomActive ? `zoom-1` : 'zoom-2'" className="tabs-svg" />
        </div>
       
      </div>
      
    </div>
    <div class="room-middle">
      <!--  本地    -->
      <div class="video-col position-r" :class="personnelNumber <= 4 ? 'w-50' : 'w-33'" v-show="camStatus">
        <div class="video-col-Graphics border-radius-4" id="realTimeVideo0"></div>
        <div class="video-col-name text-center color-fff f12">调解人</div>
      </div>
      <!--  远端    -->
      <div class="video-col position-r" :class="personnelNumber <= 4 ? 'w-50' : 'w-33'"
           v-for="(item, index) in remoteUsersViews" :key="index">
        <div class="video-col-Graphics border-radius-4" :id="item.id"></div>
        <div class="video-col-btn" v-if="zoomActive">
          <div class="cursor-pointer" v-if="item.microphone" @click="handleOffRemoteAudio(item.userId)">
            <svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" />
          </div>
          <div class="cursor-pointer" v-if="!item.microphone" @click="handleOnRemoteAudio(item.userId)">
            <svg-icon class="mb-8" icon-class="sound-on" className="tabs-svg" />
          </div>
          <div class="cursor-pointer" @click="handleKickOut(item.userId)"><svg-icon icon-class="remove-room" className="tabs-svg" /></div>
        </div>
        <div class="video-col-name text-center color-fff f12">{{item.name}}</div>
      </div>
    </div>
    <div v-if="zoomActive" class="room-bottom border-radius-8 background-color-fff flex-row justify-content-between align-items-center">
      <div class="flex-row align-items-center cursor-pointer" @click="handleVideoRecording">
        <svg-icon :icon-class="videoRecordingSts ? 'video-recording-2' : 'video-recording-1'" className="tabs-svg" />
        <div class="pl-4 f14" :class="videoRecordingSts ? 'color-F53F3F' : ''">{{ videoRecordingSts ? '结束': '录制' }}</div>
      </div>
      <div class="flex-row align-items-center cursor-pointer" @click="InviteDialog={caseId:caseId,id:eventDialog.id}">
        <svg-icon icon-class="Invite-room" className="tabs-svg" />
        <div class="pl-4 f14">邀请</div>
      </div>
      <div class="flex-row align-items-center cursor-pointer" v-if="micStatus" @click="handleStopLocalAudio">
        <i class="f24 el-icon-microphone color-4E5969"></i>
        <div class="pl-4 f14">关闭语音</div>
      </div>
      <div class="flex-row align-items-center cursor-pointer" v-if="!micStatus" @click="handleStartLocalAudio">
        <i class="f24 el-icon-turn-off-microphone color-4E5969"></i>
        <div class="pl-4 f14">开启语音</div>
      </div>
      <div class="flex-row align-items-center cursor-pointer"
           @click="audioRecordingSts ? handleOffRemoteAudio('') : handleOnRemoteAudio('')">
        <svg-icon icon-class="mute-all" className="tabs-svg" />
        <div class="pl-4 f14">{{audioRecordingSts ? '全部静音' : '全部开启'}}</div>
      </div>
      <div class="room-bottom-btn-finish cursor-pointer border-radius-4 f14 color-fff" @click="handleStopMediate">
        结束调解
      </div>
    </div>

    <VideoInvitation v-if="InviteDialog" :eventDialog.sync="InviteDialog" />
  </div>
</template>

<script>
import TRTC from 'trtc-sdk-v5';
import videoTelephone from "@/services/videoTelephone";
export default {
  components: {
    VideoInvitation: () => import('./VideoInvitation'),//邀请视频
  },
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      zoomActive: true,// 布局状态

      caseId: '',
      arrPersonnel: [],
      roomId: 0,
      sdkAppId: 0,
      userId: '',
      userSig: '',
      cameraId: '',// 本地视频通道
      microphoneId: '',//  本地音频通道
      camStatus: false,// 本地流
      vidStatus: false,// 本地视频状态
      micStatus: false,// 本地音频状态

      trtc: null,
      personnelNumber: 1,
      remoteUsersViews: [],

      audioRecordingSts: true, // 全部音频状态
      videoRecordingSts: false, // 录制状态
      startTime: null,
      timerId: null,
      duration: 0, // 记录录制时间（秒）

      InviteDialog: null, // 邀请
    };
  },
  computed: {
    zoomedStyles() {
      return {
        left: '269px',
        top: '330px'
      };
    },
    defaultTop() {
      const itemsPerRow = 4;
      const rowHeight = 35.5;
      const numberOfRows = Math.ceil(this.personnelNumber / itemsPerRow);
      return `${numberOfRows * rowHeight + 37.5}px`;
    },
    formattedTime() {
      const hours = Math.floor(this.duration / 3600);
      const minutes = Math.floor((this.duration % 3600) / 60);
      const seconds = this.duration % 60;
      return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(Math.floor(seconds)).padStart(2, '0')}`;
    }
  },
  mounted() {
    this.initMedia();
    this.getVideoDetail();
    this.getRoomArgument();
  },
  methods: {
    handleClose() {
      this.handleKickedOut()
      this.$emit('update:eventDialog', null)
    },
    toggleZoom() {
      this.zoomActive = !this.zoomActive;

      this.$nextTick(() => {
        if (this.$refs.videoRoom) {
          console.log(this.defaultTop, this.personnelNumber, '---this.defaultTop')
          this.$refs.videoRoom.style.left = this.zoomActive ? this.zoomedStyles.left : '157px';
          this.$refs.videoRoom.style.top = this.zoomActive ? this.zoomedStyles.top : this.defaultTop;
        }
      });
    },

    // 获取详情
    getVideoDetail() {
      videoTelephone.videoDetail({id: this.eventDialog.id}).then((res) => {
        // console.log(res, '---videoDetail')
        this.caseId = res.caseId;
        this.arrPersonnel = [...res.litigants, ...res.members];
      });
    },
    // 获取房间参数
    getRoomArgument() {
      let {roomId, sdkAppId, userId, userSig} = this.eventDialog;
      console.log(roomId, sdkAppId, userId, userSig, '---roomId, sdkAppId, userId, userSig')
      this.roomId =  parseInt(roomId, 10);
      this.sdkAppId = parseInt(sdkAppId, 10);
      this.userId =  userId;
      this.userSig =  userSig;
      console.log(this.roomId, this.sdkAppId, this.userId, this.userSig, '---this.roomId, sdkAppId, userId, userSig')
      this.handleEnterRoom();
      // videoTelephone.getEnterById({id: this.eventDialog.id}).then((res) => {
      //   let {roomId, sdkAppId, userId, userSig} = res;
      //   this.roomId =  roomId;
      //   this.sdkAppId = sdkAppId;
      //   this.userId =  userId;
      //   this.userSig =  userSig;
      //   console.log(res, '---房间参数')
      //   this.handleEnterRoom();
      // });
    },

    // 获取视频、音频权限
    async getDeviceList() {
      let camera = await TRTC.getCameraList();
      let microphone = await TRTC.getMicrophoneList();
      console.log(camera, '---camera')
      console.log(microphone, '---microphone')
      this.cameraId = camera[0].deviceId;
      this.microphoneId = microphone[0].deviceId;
    },
    async initMedia() {
      if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then((stream) => {
          console.log('音视频初始化完毕：', stream)
          // stream.getTracks().forEach(track => track.stop());
          this.getDeviceList();
        }).catch(err =>{
          this.$message.error("访问用户媒体设备失败,请重新打开视频通话！");
          console.log('访问用户媒体设备失败：' , err)
        });
      } else {
        this.$message.error("你的浏览器不支持访问用户媒体设备！");
        console.log('你的浏览器不支持访问用户媒体设备')
      }
    },
    // 获取进入房间的参数
    handleEnterRoom() {
      this.enterRoom();
      this.handleStartLocalAudio();
      this.handleStartLocalVideo();
    },
    async enterRoom() {
      this.trtc = TRTC.create();
      try {
        await this.trtc.enterRoom({
          roomId: this.roomId,
          // sdkAppId: parseInt(this.sdkAppId, 10),
          sdkAppId: this.sdkAppId,
          userId: this.userId,
          userSig: this.userSig,
        });
        this.installEventHandlers();
        this.startGetAudioLevel();
      }catch (e) {
        console.log('视频云初始化报错！', e)
        throw e;
      }

    },

    // 本地音频
    async handleStartLocalAudio() {
      if (this.micStatus) {
        return;
      }
      try {
        await this.trtc.startLocalAudio({
          option: {
            microphoneId: this.microphoneId,
          },
        });
        this.micStatus = true;
      } catch (error) {
        throw error;
      }
    },
    async handleStopLocalAudio() {
      if (!this.micStatus) {
        return;
      }
      try {
        await this.trtc.stopLocalAudio();
        this.micStatus = false;
      } catch (error) {
        throw error;
      }
    },
    // 本地视频
    async handleStartLocalVideo() {
      if (this.vidStatus) {
        return;
      }
      try {
        await this.trtc.startLocalVideo({
          view: 'realTimeVideo0',
          option: {
            cameraId: this.cameraId,
            profile: '1080p',
          },
        });
        this.camStatus = true;
        this.vidStatus = true;
      } catch (error) {
        throw error;
      }
    },
    async handleStopLocalVideo() {
      if (!this.vidStatus) {
        return;
      }
      try {
        await this.trtc.stopLocalVideo();
        this.vidStatus = false;
      } catch (error) {
        throw error;
      }
    },
    // 退出房间-结束调解
    async exitRoom() {
      this.stopGetAudioLevel();
      try {
        await this.trtc.exitRoom();
        this.micStatus = false;
        this.personnelNumber = 1;
        this.remoteUsersViews = [];
        this.uninstallEventHandlers();
      } catch (error) {
        throw error;
      }
      await this.trtc.stopLocalAudio();// 停止本地麦克风的采集及发布
      await this.trtc.stopLocalVideo();// 停止本地摄像头的采集、预览及发布
      this.trtc = null;
      // await this.trtc.stopScreenShare();// 停止屏幕分享
    },

    // 音量
    startGetAudioLevel() {
      this.trtc.on(TRTC.EVENT.AUDIO_VOLUME, (event) => {
        event.result.forEach(({ userId, volume }) => {
          const isMe = userId === '';
          if (isMe) {
            console.log(`my volume: ${volume}`);
          } else {
            console.log(`user: ${userId} volume: ${volume}`);
          }
        });
      });
      this.trtc.enableAudioVolumeEvaluation(2000);
    },
    stopGetAudioLevel() {
      this.trtc && this.trtc.enableAudioVolumeEvaluation(-1); // 开启或关闭音量大小回调
    },

    installEventHandlers() {
      this.trtc.on(TRTC.EVENT.KICKED_OUT, this.handleKickedOut);
      this.trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, this.handleRemoteVideoAvailable);
      this.trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, this.handleRemoteVideoUnavailable);
      this.trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, this.handleCustomMessage);
    },
    uninstallEventHandlers() {
      this.trtc.off(TRTC.EVENT.KICKED_OUT, this.handleKickedOut);
      this.trtc.off(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, this.handleRemoteVideoAvailable);
      this.trtc.off(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, this.handleRemoteVideoUnavailable);
      this.trtc.off(TRTC.EVENT.CUSTOM_MESSAGE, this.handleCustomMessage);
    },

    // 退出房间
    async handleKickedOut(event) {
      // this.trtc = null;
      await this.exitRoom();
    },
    // 远端进入房间
    handleRemoteVideoAvailable(event) {
      console.log(event, '---event远端进入房间')
      const { userId, streamType } = event;
      try {
        let obj = this.arrPersonnel.find(item => item.phone === userId)
        let data = {
          id: `${userId}_main`,
          name: obj.name,
          userId: userId,
          microphone: true
        }

        this.personnelNumber++;
        this.remoteUsersViews.push(data);
        this.$nextTick(async () => {
          await this.trtc.startRemoteVideo({ userId, streamType, view: `${userId}_main` });
        });
      } catch (error) {
        console.log(error)
      }
    },
    // 远端退出房间
    handleRemoteVideoUnavailable(event) {
      console.log(event, '---event远端退出房间')
      const { streamType } = event;
      this.trtc.stopRemoteVideo({ userId: event.userId, streamType });
      if (this.personnelNumber>1){this.personnelNumber--;}
      this.remoteUsersViews = this.remoteUsersViews.filter(item => item.userId !== event.userId);
    },
    // 接收远端消息
    handleCustomMessage(event) {
      console.log(`---收到 ${event.userId} 的 sei message: ${event.data}`)
    },

    // 关闭远端声音
    async handleOffRemoteAudio(userId) {
      console.log(userId, '---关闭远端声音')
      try {
        if (!userId){
          this.audioRecordingSts = false;
          this.remoteUsersViews = this.remoteUsersViews.map(item => {
            item.microphone = false;
            return {
              ...item,
              microphone: false
            }
          })
        }else {
          this.remoteUsersViews = this.remoteUsersViews.map(item => {
            if (item.userId == userId){
              item.microphone = false;
              return {
                ...item,
                microphone: false
              }
            }
          })
        }
        let json = {behavior: 'offAudio', userId: userId}
        let data = {
          destination: `/topic/video-room/${this.eventDialog.roomId}`,
          body: JSON.stringify(json)
        }
        this.$stompSocket.publish(data)

        // let jsonString = JSON.stringify({behavior: 'offAudio', userId: userId});
        // let encoder = new TextEncoder();
        // let encoded = encoder.encode(jsonString).buffer;
        // console.log(encoded, '---关闭远端声音')
        // let decoder = new TextDecoder();
        // let decodedString = decoder.decode(encoded);
        // let parsedObj = JSON.parse(decodedString);
        // console.log(parsedObj, '---解析关闭远端声音');
        // await this.trtc.sendCustomMessage({
        //   cmdId: 1,
        //   data: encoded
        // });
      } catch (error) {
        throw error;
      }
    },
    // 开启远端声音
    async handleOnRemoteAudio(userId) {
      console.log(userId, '---开启远端声音')
      try {
        if (!userId){
          this.audioRecordingSts = true;
          this.remoteUsersViews = this.remoteUsersViews.map(item => {
            item.microphone = true;
            return {
              ...item,
              microphone: true
            }
          })
        }else {
          this.remoteUsersViews = this.remoteUsersViews.map(item => {
            if (item.userId == userId){
              item.microphone = true;
              return {
                ...item,
                microphone: true
              }
            }
          })
        }

        let json = {behavior: 'onAudio', userId: userId}
        let data = {
          destination: `/topic/video-room/${this.eventDialog.roomId}`,
          body: JSON.stringify(json)
        }
        this.$stompSocket.publish(data)
        // let jsonString = JSON.stringify({behavior: 'onAudio', userId: userId});
        // let encoder = new TextEncoder();
        // let encoded = encoder.encode(jsonString).buffer;
        // await this.trtc.sendCustomMessage({
        //   cmdId: 2,
        //   data: encoded
        // });
      } catch (error) {
        throw error;
      }
    },
    // 踢出远端用户
    async handleKickOut(userId) {
      console.log(userId, '---踢出远端用户')
      try {
        let json = {behavior: 'kickOut', userId: userId}
        let data = {
          destination: `/topic/video-room/${this.eventDialog.roomId}`,
          body: JSON.stringify(json)
        }
        this.$stompSocket.publish(data)
        // let jsonString = JSON.stringify({behavior: 'kickOut', userId: userId});
        // let encoder = new TextEncoder();
        // let encoded = encoder.encode(jsonString).buffer;
        // await this.trtc.sendCustomMessage({
        //   cmdId: 3,
        //   data: encoded
        // });
      } catch (error) {
        throw error;
      }
    },

    // 录制
    updateTimerDisplay() {
      if (!this.startTime) return;
      const currentTime = performance.now();
      this.duration = Math.floor((currentTime - this.startTime) / 1000); // 将毫秒转换为秒
    },
    handleVideoRecording(){
      if (this.videoRecordingSts){
        // clearInterval(this.timerId);
        // this.timerId = null;
        // this.videoRecordingSts = false;
        // return
        videoTelephone.stopRecord({id: this.eventDialog.id}).then((res) => {
          console.log('---视频已停止录制')
          clearInterval(this.timerId);
          this.timerId = null;
          this.videoRecordingSts = false;
        });
      }else {
        // this.startTime = performance.now();
        // this.updateTimerDisplay(); // 立即更新一次显示
        // this.timerId = setInterval(() => this.updateTimerDisplay(), 1000); // 每秒更新一次
        // this.videoRecordingSts = true;
        // return
        videoTelephone.startRecord({id: this.eventDialog.id}).then((res) => {
          console.log('---视频已开始录制')
          this.startTime = performance.now();
          this.updateTimerDisplay(); // 立即更新一次显示
          this.timerId = setInterval(() => this.updateTimerDisplay(), 1000); // 每秒更新一次
          this.videoRecordingSts = true;
        });
      }
    },
    // 停止调解
    handleStopMediate() {
      this.$confirm("请确定是否结束调解?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(!this.$clickThrottle()) { return }//防止重复点击
        let data = {id:this.eventDialog.id}
        // if (this.videoRecordingSts){
        //   this.handleVideoRecording();
        // } // 结束录制
        videoTelephone.stopMediate(data).then((res) => {
          this.handleClose();
          this.$parent.visiblePopover = null
        });
      }).catch(() => {});
    }
  },
  beforeDestroy() {
    if (this.timerId) {
      clearInterval(this.timerId);
    }
    if (this.trtc){
      this.handleKickedOut();
    }
  }
};
</script>

<style scoped lang="scss">
  .room-content{
    background: linear-gradient(180deg, #F8E8FF 0%, #E7EAFE 100%);
    border: 2px solid #FFFFFF;
    top: 50%;
    left: 50%;
    position: absolute;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    user-select: none;
    .room-top{
      .room-top-btn{
        padding: 6px 10px;
        .tabs-svg{
          width: 16px;
          height: 16px;
        }
      }
    }
    .room-middle{
      display: flex;
      flex-wrap: wrap; /* 当子元素总宽度超过父容器时，子元素会自动换到下一行 */

      .video-col{
        aspect-ratio: 1 / 1; /* 宽度与高度的比例为1:1 */
        //flex: 0 0 auto; /* 禁用子元素的伸缩性 */
        .video-col-Graphics{
          width: 100%;
          height: 100%;
          //background-color: #FFFFFF;
        }
        .video-col-btn{
          position: absolute;
          top: 11px;
          right: 10px;
          .tabs-svg{
            width: 24px;
            height: 24px;
          }
        }
        .video-col-name{
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 21px;
          background-color: #00000059;
          border-radius: 0 0 4px 4px;
        }
      }
    }
    .room-bottom{
      position: absolute;
      left: 24px;
      bottom: 24px;
      padding: 8px 16px;
      width: calc(100% - 45px);
      .tabs-svg{
        width: 24px;
        height: 24px;
      }
      .room-bottom-btn-finish{
        background-color: #F53F3F;
        padding: 10px 16px;
      }
    }
  }

  .room-content-big{
    padding: 24px;
    width: 536px;
    height: 658px;
    //left: calc(50% - 268px);
    //bottom: 86px;

    .room-middle{
      padding: 16px 0;
      width: 488px;
      //height: 488px;
      gap: 8px; /* 子元素之间的间隔 */
      .w-100{
        width: calc(100%);
        //height: calc(100%);
      }
      .w-50{
        width: calc(50% - 4px);
        //height: calc(50% - 4px);
      }
      .w-33{
        width: calc(33% - 5px);
        //height: calc(33% - 5px);
      }
    }
  }

  .room-content-small{
    padding: 12px 16px;
    //width: 300px;
    min-height: 140px;
    //top: 0;
    //left: 0;
    .room-middle{
      padding: 8px 0;
      width: 272px;
      gap: 4px; /* 子元素之间的间隔 */
      .video-col{
        width: 65px;
      }
    }
  }
</style>