<ion-content class="content">
  <div class="nav-data">
    <div class="room-data">
      <img
        class="avatar"
        [src]="room?.get('user')?.get('avatar')"
        alt="avatar"
      />
      <div class="profile-title">
        <div class="profile-name">{{ room?.get("user")?.get("nickname") }}</div>
        <div class="level">LV:33</div>
      </div>
      <ion-icon
        (click)="onCollection()"
        name="heart-circle-sharp"
        [style.color]="isFollow ? '#fe454e' : '#fff'"
      ></ion-icon>
    </div>
    <div class="report" (click)="onReport($event)">
      <ion-icon name="warning-outline"></ion-icon>
    </div>
    <div class="exit" (click)="endCall($event)">
      <ion-icon name="enter-outline"></ion-icon>
    </div>
  </div>
  <app-live (touch)="showTool = !showTool"></app-live>
  <div
    class="tools"
    (click)="showTool = !showTool"
    [style.visibility]="showTool ? 'visible' : 'hidden'"
  >
    <div class="row" style="justify-content: center">
      @if(liveService.connection_state === 'CONNECTED'){
      <div class="tips">
        剩余通话时长
        <span
          [style.color]="liveService.countdown > 120 ? '#ffc409' : '#ff2636'"
          >{{ liveService.countdown | secondsToTime }}</span
        >
      </div>
      }
    </div>
    @if (!liveService.isAnchor) {
    <div class="row">
      <div class="row-li" (click)="onChangeLiveStatus($event, 'gift')">
        <div class="icon-box">
          <ion-icon class="icon" name="gift"></ion-icon>
        </div>
        <div class="label">礼物</div>
      </div>
    </div>
    }
    <div class="row">
      <div class="row-li" (click)="onChangeLiveStatus($event, 'camera')">
        <div
          [ngClass]="{
            'action-icon': liveService.tools['camera'],
            'icon-box': true
          }"
        >
          <ion-icon name="camera-reverse"></ion-icon>
        </div>
        <div class="label">旋转摄像头</div>
      </div>
      <div class="row-li" (click)="onChangeLiveStatus($event, 'mute')">
        <div
          class="icon-box"
          [ngClass]="{
            'action-icon': liveService.tools['mute'],
            'icon-box': true
          }"
        >
          <ion-icon class="icon" name="notifications-off"></ion-icon>
        </div>
        <div class="label">
          {{ liveService.tools["mute"] ? "已静音" : "静音" }}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="row-li">
        <div class="icon-box">
          <ion-icon class="icon" name="keypad"></ion-icon>
        </div>
        <div class="label">聊天</div>
      </div>
      <div class="row-li" (click)="endCall($event)">
        <div class="icon-box" style="background-color: rgba(0, 0, 0, 0)">
          <img class="icon" src="/img/挂断.png" alt="" class="icon-img" />
        </div>
        <div class="label">挂断</div>
      </div>
      <div class="row-li" (click)="onChangeLiveStatus($event, 'audio')">
        <div
          [ngClass]="{
            'action-icon': liveService.tools['audio'],
            'icon-box': true
          }"
        >
          <ion-icon class="icon" name="mic-off"></ion-icon>
        </div>
        <div class="label">
          麦克风{{ liveService.tools["audio"] ? "已关" : "已开" }}
        </div>
      </div>
    </div>
  </div>
</ion-content>
@if (this.room?.id) {
<app-gift-modal
  #gift
  (sendEmit)="onSendGift()"
  [toUid]="this.room?.get('user').id"
></app-gift-modal>
}
