<template>
  <teleport to=".local" v-if="(isRTCJoined || isPublished) && isLeader">
    <div class="micBox">
      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
      <i class="speak_mic_off" v-else></i>
    </div>
  </teleport>
  <teleport to=".remote" v-if="!isLeader && remoteStreams.length > 0">
    <div class="micBox">
      <i class="speak_mic" v-if="!roomLeader?.IsMuted"></i>
      <i class="speak_mic_off" v-else></i>
    </div>
  </teleport>
</template>
<script lang="ts" setup>
  //   import { ref } from 'vue';

  import { computed, onMounted } from 'vue';
  // import { useRtcSdk } from '/@/hooks/useTRTC';
  // import { useSocket } from '/@/hooks/userSocket';

  //   import { useRtcSdk } from '/@/hooks/useTRTC';
  import { useRtcStore } from '/@/store/modules/rtc';

  const rtcStore = useRtcStore();
  // const destination = computed(() => (rtcStore.isLeader ? '.local' : '.remote'));
  const isPublished = computed(() => rtcStore.isPublished);
  const isRTCJoined = computed(() => rtcStore.isRTCJoined);
  const isLeader = computed(() => rtcStore.isLeader);
  const remoteStreams = computed(() => rtcStore.remoteStreams);
  const roomLeader = computed(() => rtcStore.getRoomLeader());
  // const { muteVideoLeader } = useRtcSdk();
  // const hasVideo = computed(() => rtcStore.videoDeviceId.length > 0);
  onMounted(() => {});
</script>
<style lang="scss">
  #PageRtcLive {
    &.leader + div.local {
      + div.remote {
        display: none;
      }
    }
    &.customer + div.local {
      display: none;
    }
  }
  #PageRtcLive {
    &.hideCam + div.local {
      display: none;
      + div.remote {
        display: none;
      }
    }
  }
  .local,
  .remote {
    width: 1.94rem;
    height: 1.94rem;
    position: fixed;
    top: 0.69rem;
    left: 0.53rem;
    overflow: hidden;
    z-index: 10000;
    border-radius: 50%;
    video {
      background: transparent;
    }
    .micBox {
      width: 100%;
      height: 0.44rem;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      .speak_mic {
        display: block;
        background-size: 720px auto;
        width: 12px;
        height: 12px;
        background-image: url(/@/assets/images/rtcLive/speed.png);
        // width: 0.69rem;
        // height: 0.69rem;
        animation: myAnimation 3s steps(59) infinite;
      }
      .speak_mic_off {
        display: block;
        background-size: center center;
        background-size: contain;
        width: 12px;
        height: 12px;
        background-image: url(/@/assets/images/rtcLive/scene_mic_off@2x.png);
      }
    }
  }
  @keyframes myAnimation {
    0% {
      background-position: 0px 0px;
    }

    100% {
      background-position: -708px 0px;
    }
  }
</style>
