<ion-content class="content">
  <div class="nav-data">
    <div class="room-data">
      <!-- <img
        class="avatar"
        [src]="room?.get('user')?.get('avatar')"
        alt="avatar"
      /> -->
      @if(!loading){
      <app-avatar
        [avatar]="room?.get('user')?.get('avatar')"
        style="z-index: 99"
        frameId="live-avatar-frame"
        [size]="42"
        [avatarSize]="30"
        [frame]="userVip['rights']['avatar']"
      />
      }
      <div class="profile-title">
        <div class="profile-name">{{ room?.get("user")?.get("nickname") }}</div>
        <div
          class="level"
          [style.background-color]="
            aiServ.authorLevelColor[
              room?.get('user')?.get('completionRate') || 1
            ]?.color
          "
        >
          LV{{ room?.get("user")?.get("completionRate") || 1 }}
        </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="report" (click)="onComment($event)">
      <ion-icon name="star-outline"></ion-icon>
    </div> -->
    <div class="exit" (click)="endCall($event)">
      <ion-icon name="enter-outline"></ion-icon>
    </div>
  </div>
  <app-live (touch)="onPage()"></app-live>
  <div class="tools" [style.visibility]="showTool ? 'visible' : 'hidden'">
    <div class="swiper chartSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" (click)="showTool = !showTool">
          <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>

          <div class="row">
            <div class="row-li" (click)="onChangeLiveStatus($event, 'glorify')">
              <div
                [ngClass]="{
                  'action-icon': liveService.tools['glorify'],
                  'icon-box': true
                }"
              >
                <ion-icon name="sparkles"></ion-icon>
              </div>
              <div class="label">
                {{ liveService.tools["glorify"] ? "美颜已开启" : "美颜已关闭" }}
              </div>
            </div>
            <!-- @if (!liveService.isAnchor) { -->
            <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" (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 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, 'chat')">
              <div class="icon-box">
                <!-- <ion-icon class="icon" name="keypad"></ion-icon> -->
                <ion-icon name="arrow-forward-circle"></ion-icon>
              </div>
              <div class="label">左滑聊天</div>
            </div>
          </div>
        </div>
        <div class="swiper-slide chat-template">
          <div
            [ngClass]="{
              'chat-list': true,
              'langh': !liveService.isAnchor,
            }"
            id="liveScrollMsg"
          >
            <p class="message tips">欢迎进入视频直播1V1聊天</p>
            @for (item of msgServe.messageMapList[room?.get('user').id]; track
            $index) {
            <p
              [ngClass]="{
                slef_m: item?.is_self,
                message: true
              }"
            >
              <span>{{ item.name }}：</span> {{ item.content }}
            </p>
            }
          </div>
          <div class="footer-tool">
            <ion-input
              slot="start"
              labelPlacement="stacked"
              [clearInput]="true"
              placeholder="文明畅聊"
              [(ngModel)]="text"
              (keydown)="comfirmText($event)"
            >
            </ion-input>
            <div class="input-bar" slot="end">
              <ion-icon
                name="happy-outline"
                (click)="showEmoji = !showEmoji"
              ></ion-icon>
              <span class="splice">|</span>
              <ion-button
                class="send"
                fill="outline"
                size="small"
                [disabled]="text.length == 0 || disabled"
                (click)="comfirmText()"
                >发送</ion-button
              >
            </div>
          </div>
          <div [style.height]="0 + 'px'"></div>
          @if (showEmoji) {
          <div class="b-1px-b"></div>
          <div class="emoji-content">
            <div class="emoji-box">
              @for (item of aiServ.emojis; track $index) {
              <div class="emoji-item">
                <div class="emoji-img" (click)="emojiChoose(item.char)">
                  {{ item.char }}
                </div>
              </div>
              }
              <div
                class="emoji-item__del"
                (click)="text.substring(0, this.text.length - 2)"
              >
                <ion-icon
                  class="emoji-img"
                  name="close-circle-outline"
                ></ion-icon>
              </div>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
</ion-content>
@if (this.room?.id) {
<app-gift-modal
  #gift
  [domId]="'live-vap-warp'"
  (sendEmit)="onSendGift()"
  [toUid]="this.room?.get('user').id"
  [isRead]="liveService.isAnchor"
></app-gift-modal>
}
<app-flutter-comp [domId]="'live-vap-gift'"></app-flutter-comp>
