<nav title="专属客服"></nav>
<ion-content
  [scrollEvents]="true"
  [fullscreen]="true"
  (ionScrollStart)="handleScrollStart()"
  (ionScroll)="handleScroll($any($event))"
  (ionScrollEnd)="handleScrollEnd()"
  class="content"
  (click)="changeShowEmoji(true)"
>
  <div #scrollMsg id="scrollMsg" class="scroll">
    @for (item of msgServe.messageMapList[channel]; track $index) {
    <div class="clearfix message-box">
      @if ($index == 0 || item.timestamp -
      msgServe.messageMapList[channel][$index-1].timestamp > 600000) {
      <div class="time-box">
        @if (item.istoday) {
        <div class="time">{{ item.timestamp | showDate }}</div>
        }@else {
        <div class="time">
          {{ item.timestamp | showDate }}
        </div>
        }
      </div>
      }

      <!-- 他人信息 -->
      @if (!item.is_self) {
      <div class="msg-bloak no_self">
        <img
          class="avatar fl"
          (click)="toUrl('user/profile/' + item.publisher)"
          mode="widthFix"
          src="img/客服.png"
        />
        <!-- 文字消息 msg_type == 1 || text -->
        @if (item.msg_type == 1 || item.msg_type == 'text') {
        <div class="msg-card">
          @if(channel == 'global_room'){
          <span class="text-item_status">{{
            item.name || "用户" + item.publisher
          }}</span>
          }
          <div class="text-item fl text-item_left">
            <p>{{ item.content }}</p>
          </div>
        </div>
        }
        <!-- 图片消息 msg_type == 2 || img -->
        @else if(item.msg_type == 2 || item.msg_type == 'img' || item.msg_type
        == 'image') {
        <img
          class="img-item fl"
          [src]="item.content"
          (click)="predivimg(item.content)"
        />
        <div class="text-item fl text-item_left">
          <p>{{ item.content }}</p>
        </div>
        }
      </div>
      } @else {
      <div class="msg-bloak self">
        <!-- 自己信息 -->
        @if (item.msg_type == 1 || item.msg_type == 'text') {
        <div class="text-item fr text-item_right">
          <p>{{ item.content }}</p>
        </div>
        } @if (item.msg_type == 2 || item.msg_type == 'img' || item.msg_type ==
        'image') {
        <img
          class="img-item fr"
          src="{{ item.content }}"
          (click)="predivimg(item.content)"
          bindtap="predivimg"
          data-src="{{ item.content }}"
        />
        } @if (item.msg_type == 3) {
        <div class="text-item fr text-item_right">
          <p>{{ item.content }}</p>
        </div>
        }
        <img class="avatar fr" [src]="item.avatar" />
      </div>
      }
    </div>
    }
  </div>
</ion-content>
<ion-footer>
  <ion-toolbar class="footer-tool">
    <ion-input
      slot="start"
      labelPlacement="stacked"
      [clearInput]="true"
      placeholder="输入您的问题发送至客服"
      [(ngModel)]="text"
      (keydown)="comfirmText($event)"
      [disabled]="false"
    >
    </ion-input>
    <div
      [ngClass]="{
        tools: true
      }"
      slot="end"
    >
      <ion-icon name="happy-outline" (click)="changeShowEmoji()"></ion-icon>
 
      <span class="splice">|</span>
      <!-- <div class="send">发送</div> -->
      <ion-button
        class="send"
        fill="outline"
        size="small"
        [disabled]="text.length == 0 || disabled"
        (click)="comfirmText()"
        >发送</ion-button
      >
    </div>
  </ion-toolbar>
  <div [style.height]="height + 'px'"></div>
  @if (showEmoji) {
  <div class="b-1px-b"></div>
  } @if (showEmoji) {
  <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)="delEmoji()">
        <img
          class="emoji-img"
          src="https://common.file.futurestack.cn/images/wxapp/card_multi/images//chat/del.svg"
        />
      </div>
    </div>
  </div>
  }
</ion-footer>