<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="tabs">
        <div class="tab" *ngFor="let item of tabs" (click)="clickTbab(item)" [ngClass]="{ active: activeTabValue === item.value }">{{ item.name }}</div>
      </div>
      <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>：
                <nz-range-picker style="width: 373px;" nzShowTime [(ngModel)]="searchDTO.dateRange" (nzOnCalendarChange)="onCalendarChangeDate($event)"></nz-range-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="8%">序号</th>
              <th nzWidth="23%">留言时间</th>
              <th nzWidth="23%">来电号码</th>
              <th nzWidth="23%">处理状态</th>
              <th nzWidth="23%">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of messageList;let i = index;">
              <td>{{ (pageIndex - 1) * pageSize + i + 1 }}</td>
              <td>{{ data.recTime | date:'yyyy-MM-dd HH:mm' }}</td>
              <td>{{ data.ano}}</td>
              <td>{{ data.isExcute == 1 ? '已受理' : (data.isExcute == 2 ? '不受理' : '未受理') }}</td>
              <td>
                <div class="coop">
                  <span *ngIf="data.isExcute === 0" (click)="createOrder(data)">生成工单</span>
                  <span *ngIf="data.isExcute === 0 || data.isExcute === 1" (click)="recordcall(data)">回放录音</span>
                  <span *ngIf="data.isExcute === 0" (click)="showDelModal(data, '确认不受理后，将无法转换为事件工单!', '不受理', 'notAccepted')">不受理</span>
                  <span *ngIf="data.isExcute === 1" (click)="openItsmDetails(data.incidentDTO)">查看故障单</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.recFileName" *ngIf="recordingModalShow" (closeModelHs)="closeRecordingModelOrder($event)"></app-incident-recording>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow" [info]="promptInfo"></app-prompt-modal>

<app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading" (confirmDelEvent)="confirmDelFn()" [content]="tipsMsg1"></app-dialog-delete>

<!-- 详情 -->
<app-incident-detail [id]="coopData.id" *ngIf="detailModalShow" (closeModelHs)="closeDetailModelOrder($event)" (confirmModelHs)="confirmDetailModelOrder($event)"></app-incident-detail>
