<div class="detail" *ngIf="!maskFlag">
  <div class="title">
    查看详情<i class="icon_transport transport-guanbi" (click)="close()"></i>
  </div>
  <div class="box">
    <div class="tab display_flex">
      <div
        [ngClass]="{ item: true, flex_1: true, checked: tabType == 1 }"
        (click)="checkTab(1)"
      >
        基础信息
      </div>
      <div [ngClass]="{ item: true, flex_1: true, checked: tabType == 2 }" (click)="checkTab(2)" *ngIf="orderInfo.status.value === '2'">
        巡检信息
      </div>
      <div
        [ngClass]="{ item: true, flex_1: true, checked: tabType == 4 }"
        (click)="checkTab(4)"
      >
        日志
      </div>
    </div>

    <!-- 基础信息 -->
    <overlay-scrollbars
      #osComponentRef1
      style="flex: 1"
      *ngIf="tabType == 1"
    >
      <div class="content orders">
        <div class="inner">
          <div class="top">
            <div class="info" nz-row>
              <div nz-col nzSpan="8">
                单号：{{ orderInfo.code }}
              </div>
              <div nz-col nzSpan="8">
                计划主题：{{ orderInfo.inspectionDTO?.name }}
              </div>
              <div nz-col nzSpan="8">
                批次号：{{ orderInfo.batchNo }}
              </div>
            </div>
          </div>
          <div class="top">
            <div class="info" nz-row>
              <div nz-col nzSpan="8">
                巡检点：{{ orderInfo.inspectionNodeDTO?.name }}
              </div>
              <div nz-col nzSpan="8">
                巡检单：{{ orderInfo.inspectionDTO?.inspectionFormDTO?.name }}
              </div>
              <div nz-col nzSpan="8">
                创建时间：{{ orderInfo.addTime | date:'yyyy-MM-dd HH:mm' }}
              </div>
            </div>
          </div>
          <div class="top">
            <div class="info" nz-row>
              <div nz-col nzSpan="8">
                签到方式：{{ orderInfo.signType?.name }}
              </div>
              <div nz-col nzSpan="8">
                执行人：{{ orderInfo.userDTO?.name || orderInfo.groupDTO?.groupName }}
              </div>
              <div nz-col nzSpan="8">
                状态：{{ orderInfo.status?.name }}
              </div>
            </div>
          </div>
          <div class="top">
            <div class="info" nz-row>
              <div nz-col nzSpan="8">
                截至时间：{{ orderInfo.overtime | date:'yyyy-MM-dd HH:mm' }}
              </div>
              <div nz-col nzSpan="8">
                完成时间：{{ orderInfo.completeTime | date:'yyyy-MM-dd HH:mm' }}
              </div>
              <div nz-col nzSpan="8">
                是否异常：<span [ngClass]="orderInfo.exception === 1 ? 'red': ''">{{ orderInfo.exception === 1 ? '是' : '否' }}</span>
              </div>
            </div>
          </div>
          <div class="top" *ngIf="orderInfo.incidentDTO">
            <div class="info" nz-row>
              <div nz-col nzSpan="8">
                关联故障单：{{ orderInfo.incidentDTO.incidentsign }}
              </div>
              <div nz-col nzSpan="8">
                状态：{{ orderInfo.incidentDTO.state?.name }}
              </div>
              <div nz-col nzSpan="8">
                处理人/组：{{ orderInfo.incidentDTO.groupORHandlerUser }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </overlay-scrollbars>
    <!-- 巡检信息 -->
    <overlay-scrollbars
      #osComponentRef2
      style="flex: 1"
      *ngIf="tabType == 2"
    >
      <div class="content orders">
        <div class="inner">
          <div class="top" *ngFor="let item of valueList">
            <div class="info info_display" nz-row>
              <div nz-col nzSpan="8" *ngFor="let value of item" [ngClass]="{ thumbs: value.inspectionFormItemDTO.type.value == 7 }">
                {{ value.name }}：
                <span *ngIf="value.inspectionFormItemDTO.type.value != 7" [ngClass]="value.exception === 1 ? 'red': ''">{{ getValuex(value) }}</span>
                <div *ngIf="value.inspectionFormItemDTO.type.value == 7" class="thumbList">
                  <div class="thumb" *ngFor="let item of value.valuex;let index = index;" (click)="previewImageHandler(value.valuex, index)"><img [src]="item.thumbFilePath" alt=""></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </overlay-scrollbars>
    <!-- 日志 -->
    <overlay-scrollbars
      #osComponentRef4
      style="flex:1;"
      *ngIf="tabType == 4"
    >
      <div class="content jifen">
        <div class="table">
          <nz-table class="integralTable" [nzData]="list" nzSize="middle" [nzShowPagination]="null" [nzLoading]="hsLoading" [nzScroll]="{ y: '500px' }">
            <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 item of list; let i = index">
                <td>{{ i + 1 }}</td>
                <td>{{ item.operationType?.name }}</td>
                <td>{{ item.operationTime | date:'yyyy-MM-dd HH:mm' }}</td>
                <td>{{ item.username }}</td>
                <td>{{ item.remarks }}</td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>
    </overlay-scrollbars>
  </div>
  <div class="btns">
    <button class="btn cancel" nz-button nzType="default" (click)="close()">
      关闭
    </button>
  </div>
</div>

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

<!-- 图片预览 -->
<app-image-viewer [imageUrl]="imgs" hidden *ngIf="isPreview" [isPreviewNow]="true" [initialViewIndex]="initialViewIndex"></app-image-viewer>
