<div class="chat-inner-container">
  <mat-toolbar>
    <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
      <button mat-icon-button (click)="onChatSideTriggered()">
        <mat-icon>menu</mat-icon>
      </button>

      <div class="current-contact" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column">
          <span class="name" *ngIf="activeChat">{{ activeChat.name }}</span>
        </div>
      </div>

      <span fxFlex></span>

      <button mat-icon-button [matMenuTriggerFor]="chatMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </mat-toolbar>

  <div class="chat-content" fxLayout="column" fxLayoutAlign="end stretch">
    <perfect-scrollbar>
      <div class="messages-container" *ngIf="activeChat">
        <div
          class="chat-message"
          *ngFor="let message of activeChat.messages"
          [ngSwitch]="message.who"
          fxLayout="column"
          fxLayoutAlign="end start"
        >
          <div
            class="partner"
            *ngSwitchCase="'partner'"
            fxFlexAlign="start"
            fxLayout="row"
            fxLayoutAlign="start start"
          >
            <img class="avatar" [src]="activeChat.picture" />
            <span class="message mat-elevation-z1">{{ message.message }}</span>
          </div>
          <div
            class="me"
            *ngSwitchCase="'me'"
            fxFlexAlign="end"
            fxLayout="row"
            fxLayoutAlign="end start"
          >
            <span class="message mat-elevation-z1">{{ message.message }}</span>
            <img class="avatar" [src]="avatar" />
          </div>
        </div>
      </div>
    </perfect-scrollbar>

    <div class="chat-respond" fxLayout="row" fxLayoutAlign="start center">
      <mat-form-field fxFlex>
        <textarea
          matInput
          (keyup.enter)="onSendTriggered()"
          [(ngModel)]="newMessage"
          placeholder="输入您要发送的消息"
        ></textarea>
      </mat-form-field>
      <button (click)="onSendTriggered()" mat-fab color="primary">
        <mat-icon>send</mat-icon>
      </button>
    </div>
  </div>
</div>

<mat-menu #chatMenu="matMenu">
  <button mat-menu-item>
    <mat-icon> account_circle</mat-icon>
    <span> 群聊信息 </span>
  </button>
  <button mat-menu-item (click)="onNoticeTriggered()">
    <mat-icon> volume_mute</mat-icon>
    <span> 群公告 </span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item (click)="clearMessages(activeChat)">
    <mat-icon> clear_all</mat-icon>
    <span> 清空聊天记录 </span>
  </button>
</mat-menu>

$height__chat-header: 150px;
$height__chat-toolbar: 64px;
$height__chat-container: calc(
  100% - #{$height__chat-header - $height__chat-toolbar}
);

.chat-inner-container {
  height: 100%;
  .chat-content {
    position: relative;
    height: calc(100% - #{$height__chat-toolbar + 1});
    .messages-container {
      padding: 24px;
      .chat-message {
        margin: 24px 0;
        .message {
          padding: 8px;
          position: relative;
          box-shadow: 0 0 0 -1px rgba(0, 0, 0, 0.2),
            0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
        }
        .partner {
          .message {
            background: white;
            margin-left: 12px;
            &:after {
              position: absolute;
              content: '';
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0px 10px 10px 0;
              border-color: transparent #fff transparent transparent;
              top: 0;
              left: -10px;
            }
          }
        }
        .me {
          .message {
            background: #e1ffc7;
            margin-right: 12px;
            &:after {
              position: absolute;
              content: '';
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0px 0 10px 10px;
              border-color: transparent transparent transparent #e1ffc7;
              top: 0;
              right: -10px;
            }
          }
        }
      }
    }
    .chat-respond {
      background: white;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 12px 24px;
      border-top: 1px solid #eee;
      textarea {
        resize: none;
      }
      button {
        margin-left: 24px;
      }
    }
  }
}
mat-toolbar {
  border-bottom: 1px solid #eee;
  .toolbar {
    width: 100%;
  }
  .current-contact {
    .avatar {
      margin: 0 14px 0 10px;
    }
    .name {
      font-size: 18px;
      font-weight: 500;
    }
    .status {
      font-size: 14px;
      color: #888;
    }
  }
}
.pointer {
  cursor: default;
}