<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">调解视频画面</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 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"><svg-icon class="mb-8" icon-class="sound-off" className="tabs-svg" /></div>
          <div class="cursor-pointer"><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">
        <svg-icon icon-class="video-recording-1" className="tabs-svg" />
        <div class="pl-4 f14">录制</div>
      </div>
      <div class="flex-row align-items-center cursor-pointer">
        <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">
        <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">
        <svg-icon icon-class="mute-all" className="tabs-svg" />
        <div class="pl-4 f14">全部静音</div>
      </div>
      <div class="room-bottom-btn-finish cursor-pointer border-radius-4 f14 color-fff" @click="handleClose">
        结束录制
      </div>
    </div>
  </div>
</template>

<script>
import TRTC from 'trtc-sdk-v5';
export default {
  props: {
    eventDialog: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      zoomActive: true,// true 放大状态、false 缩小状态

      roomId: '',
      sdkAppId: '',
      userId: '',
      userSig: '',
      cameraId: '',// 本地视频通道
      microphoneId: '',//  本地音频通道
      vidStatus: false,// 本地视频状态
      micStatus: false,// 本地音频状态

      trtc: null,
      personnelNumber: 1,
      remoteUsersViews: [],
    };
  },
  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 + 35.5}px`;
    }
  },
  mounted() {
    this.initMedia()
  },
  methods: {
    handleClose() {
      this.$emit('update:eventDialog', null)
    },
    toggleZoom() {
      this.zoomActive = !this.zoomActive;

      this.$nextTick(() => {
        if (this.$refs.videoRoom) {
          console.log(this.defaultTop, '---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;
        }
      });
    },

    // 获取视频、音频权限
    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 =>{
          console.log('访问用户媒体设备失败：' , err)
        });
      } else {
        console.log('你的浏览器不支持访问用户媒体设备')
      }
    },
    // 获取进入房间的参数
    handleEnterRoom() {
      let data = {
        sdkSecretKey: '',
        sdkAppId: '',
        userId: '',
        roomId: '',
        userSig: ''
      }
      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),
          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: 'local',
          option: {
            cameraId: this.cameraId,
            profile: '1080p',
          },
        });
        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();// 停止本地摄像头的采集、预览及发布
      // 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);
    },
    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);
    },

    // 退出房间
    async handleKickedOut(event) {
      this.trtc = null;
      await this.exitRoom();
    },
    // 远端进入房间
    handleRemoteVideoAvailable(event) {
      const { userId, streamType } = event;
      try {
        let data = {
          id: `${userId}_main`,
          name: '222',
          userId: userId
        }
        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) {
      const { streamType } = event;
      this.trtc.stopRemoteVideo({ userId: event.userId, streamType });
      this.personnelNumber--;
      this.remoteUsersViews = this.remoteUsersViews.filter(item => item.userId !== event.userId);
    },
  }
};
</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>