<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='16' class="list-template__searchBox">
        <div class="list-template__searchItem">
          <span class="label">单号</span>：
          <input nz-input class="formItem" placeholder="请输入单号" [(ngModel)]="searchDto.code" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">计划主题</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeInp('search', 'inspectionPlan', $event)" nzAllowClear nzPlaceHolder="请选择计划主题" [(ngModel)]="searchDto.inspectionId" (ngModelChange)="changeInspection($event)">
            <ng-container *ngFor="let option of inspectionPlanSearchList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">批次号</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeInp('search', 'inspectionBatch', $event)" nzAllowClear nzPlaceHolder="请选择批次号" [(ngModel)]="searchDto.batchId">
            <ng-container *ngFor="let option of inspectionBatchSearchList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.batchNo" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">状态</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear nzPlaceHolder="请选择状态" [(ngModel)]="searchDto.statusId">
            <ng-container *ngFor="let option of statusSearchList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">是否异常</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear nzPlaceHolder="请选择" [(ngModel)]="searchDto.exceptionId">
            <ng-container *ngFor="let option of exceptionList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
				<div class="list-template__searchItem">
				  <span class="label">巡检点</span>：
				  <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
				    (nzOnSearch)="changePollingInp($event)" nzAllowClear nzPlaceHolder="请选择巡检点" [(ngModel)]="searchDto.nodeId">
				    <ng-container *ngFor="let option of pollingData">
				      <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
				    </ng-container>
				    <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
				      <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
				    </nz-option>
				  </nz-select>
				</div>
				<div class="list-template__searchItem">
				  <span class="label width-105">截止时间区间：</span>
				  <nz-range-picker class="formItem" nzShowTime [(ngModel)]="searchDto.dateRange" (nzOnCalendarChange)="onCalendarChangeDate($event)" (ngModelChange)="changeDate($event)"></nz-range-picker>
				</div>
      </div>
      <div nz-col nzLg="8" class="list-template__btns">
        <button nz-button *ngIf="coopBtns.del" [disabled]="!checkedDepIds.length" class="btn default" (click)="showDelModal(data,'您确认要删除选中的巡检任务吗？','删除','delList')">批量删除</button>
        <button nz-button *ngIf="coopBtns.designate" [disabled]="!checkedDepIds.length" class="btn default ml8" (click)="showInspectionExecuteAssign()">批量指派</button>
        <button nz-button class="btn default ml8" (click)='search()'>搜索</button>
        <button nz-button class="btn default ml8" (click)='reset()'>重置</button>
      </div>
    </div>
    <div class="list-template__bottom">
      <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
        [nzLoading]="loading1">
        <thead>
          <tr class="thead">
            <th nzWidth="5%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="9%">单号</th>
            <th nzWidth="9%">计划主题|批次号</th>
            <th nzWidth="9%">巡检点|巡检单</th>
            <th nzWidth="13%">截至时间|完成时间</th>
            <th nzWidth="9%">签到方式</th>
            <th nzWidth="9%">执行人|组</th>
            <th nzWidth="7%">是否异常</th>
            <th nzWidth="7%">状态</th>
            <th nzWidth="9%">故障单号|状态</th>
            <th nzWidth="14%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let i = index" (click)="selectedListData(data)">
            <td nzShowCheckbox [nzDisabled]="data.status.value != 1" [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
            <td>{{data.code}}</td>
            <td>{{data.inspectionDTO?.name}}<br>{{data.batchNo}}</td>
            <td>{{data.inspectionNodeDTO?.name}}<br>{{data.inspectionDTO?.inspectionFormDTO?.name}}</td>
            <td>
							<div>{{data.overtime | date:'yyyy-MM-dd HH:mm'}}</div>
							<div>{{data.completeTime | date:'yyyy-MM-dd HH:mm'}}</div>
						</td>
            <td>{{data.signType?.name}}</td>
            <td>{{data.userDTO?.name || data.groupDTO?.groupName}}</td>
            <td [ngClass]="{ red: data.exception === 1 }">{{data.exception === 1 ? '是' : '否'}}</td>
            <td>{{data.status?.name}}</td>
            <td>{{data.incidentDTO?.incidentsign}}<br>{{data.incidentDTO?.state?.name}}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.look && data.incidentId" (click)="viewIncidentDetail($event, data)">查看故障单</span>
                <span *ngIf="coopBtns.look" (click)="detail($event,data.id)">查看</span>
                <span *ngIf="coopBtns.designate && data.status.value == 1" (click)="showInspectionExecuteAssign(data)">指派</span>
                <span *ngIf="coopBtns.del" (click)="showDelModal(data,'您确认要删除选中的巡检任务吗？','删除','del')">删除</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" [(nzPageSize)]="pageSize" nzShowSizeChanger
          (nzPageIndexChange)="getList(0)" (nzPageSizeChange)="getList(0)">
        </nz-pagination>
      </div>
    </div>
  </div>
</div>
<!-- 模态框 -->
<app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
(confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo">
</app-prompt-modal>

<!-- 指派 -->
<app-inspection-execute-assign-prompt-modal
  [deptFlag]="inspectionExecuteAssignPromptModalShow"
  (submitFormHand)="confirmModelInspectionExecuteAssign($event)"
  (deptFlagHand)="closeModelInspectionExecuteAssign($event)"
  *ngIf="inspectionExecuteAssignPromptModalShow"
></app-inspection-execute-assign-prompt-modal>

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

<!-- 查看详情 -->
<router-outlet></router-outlet>

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