<div class="modal display_flex align-items_center">
  <div class="modalBody">
    <div class="title">通话记录<i class="icon_transport transport-guanbi" (click)="hideModal()"></i></div>
    <div class="content">
      <div class="list-template w100" style="padding: 16px;">
        <div class="list-template__content">
          <div class="list-template__top" nz-row style="padding: 0;">
            <div nz-col nzXl='18' class="list-template__searchBox">
              <div class="list-template__searchItem">
                <span class="label">主叫号码：</span>
                <input nz-input class="formItem" placeholder="请输入主叫号码" [(ngModel)]="searchDTO.dTMFA" />
              </div>
              <div class="list-template__searchItem">
                <span class="label">被叫号码：</span>
                <input nz-input class="formItem" placeholder="请输入被叫号码" [(ngModel)]="searchDTO.dTMFB" />
              </div>
              <div class="list-template__searchItem">
                <span class="label">开始时间：</span>
                <nz-date-picker class="formItem" [ngModel]="searchDTO.responseTime" (ngModelChange)="searchDTO.responseTime = $event" nzShowTime></nz-date-picker>
              </div>
            </div>
            <div nz-col nzXl='6' class="list-template__btns">
              <button nz-button class="btn default ml8 mt0" (click)='search()'>搜索</button>
              <button nz-button class="btn default ml8 mt0" (click)='reset()'>重置</button>
            </div>
          </div>
        </div>
      </div>
      <div class="tableWrap">
        <nz-table class="hospitalTable" [nzData]="messageList" nzSize="small" [nzShowPagination]="false" [nzLoading]="loading">
          <thead>
            <tr class="thead">
              <th nzWidth="12.5%">主叫号码</th>
              <th nzWidth="12.5%">被叫号码</th>
              <th nzWidth="12.5%">开始时间</th>
              <th nzWidth="12.5%">结束时间</th>
              <th nzWidth="12.5%">通话时长</th>
              <th nzWidth="12.5%">已接/未接</th>
              <th nzWidth="12.5%">呼入/呼出</th>
              <th nzWidth="12.5%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of messageList;let i = index;">
              <td>{{ data.dTMFA }}</td>
              <td>{{ data.dTMFB }}</td>
              <td>{{ data.responseTime}}</td>
              <td>{{ data.overTime}}</td>
              <td *ngIf="data.longTime!==undefined">{{data.longTime}}秒</td>
              <td *ngIf="data.longTime===undefined"></td>
              <td>{{data.callState == 1?'已接':'未接'}}</td>
              <td>{{data.callType == 1?'呼入':(data.callType == 0?'呼出':'')}}</td>
              <td>
                <div class="coop">
                  <span *ngIf="data.path" (click)="recordcall(data)">回放录音</span>
                </div>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <div class="pagination">
          <ng-template #totalTemplate let-total> 共 {{ total }} 条 </ng-template>
          <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="total"
            [(nzPageSize)]="pageSize" (nzPageIndexChange)="getList()"
            (nzPageSizeChange)="getList()" [nzShowTotal]="totalTemplate">
          </nz-pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 回放录音模态框 -->
<app-incident-recording [path]="coopData.relativePath" *ngIf="recordingModalShow" (closeModelHs)="closeRecordingModelOrder($event)"></app-incident-recording>

<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>
