<!-- 报修信息 -->
<div class="detail" *ngIf="!maskFlag">
  <div class="title">报修信息<i class="icon_transport transport-guanbi" (click)="close()"></i></div>
  <overlay-scrollbars #osComponentRef1 style="height: 90%; flex: 1">
    <div class="content">
      <div class="top" *ngIf="amplificationShow">
        <div class="num">
          <span class="left">报修编号：{{orderInfo.bxcode}}</span>
          <span class="right">{{orderInfo.incidentState?orderInfo.incidentState.name:''}}</span>
        </div>
        <div class="info" nz-row>
          <div nz-col nzSpan="8">报修类别：{{orderInfo.category?orderInfo.category.category:''}}</div>
          <div nz-col nzSpan="8">报修地址：<ng-container *ngIf="orderInfo.place">{{ orderInfo.place.area.area }} {{ orderInfo.place.place }} {{ orderInfo.address }}</ng-container></div>
          <div nz-col nzSpan="24">报修内容：{{orderInfo.incidentDescription}}</div>
          <div nz-col nzSpan="24">报修图片：
            <app-image-viewer [imageUrl]="imgs_wechatRequesterIncident" *ngIf="imgs_wechatRequesterIncident.length"></app-image-viewer>
          </div>
          <div nz-col nzSpan="24">处理图片：
            <app-image-viewer [imageUrl]="imgs_incident" *ngIf="imgs_incident.length"></app-image-viewer>
          </div>
          <div nz-col nzSpan="8">维修人：<ng-container *ngIf="orderInfo.incident&&orderInfo.incident.handlingPersonnelUser">{{ orderInfo.incident.handlingPersonnelUser.name }}</ng-container></div>
          <div nz-col nzSpan="8">维修人电话：<ng-container *ngIf="orderInfo.incident&&orderInfo.incident.handlingPersonnelUser">{{ orderInfo.incident.handlingPersonnelUser.phone }}</ng-container></div>
          <div nz-col nzSpan="8" *ngIf="orderInfo.incident&&orderInfo.incident.repairSummaryDTO">维修总金额：{{ orderInfo.incident.repairSummaryDTO.totalMaintenancePrice }}元</div>
          <div nz-col nzSpan="24" *ngIf="processData == '已撤回'">撤回原因：{{ orderInfo.retractReason }}</div>
          <div nz-col nzSpan="24" *ngIf="processData == '不受理'">不受理原因：{{ orderInfo.rejectRemark }}</div>
        </div>
      </div>
      <div class="center" *ngIf="amplificationShow">
        <div class="box">
          <!-- 流程图 start -->
          <div class="processBox">
            <div
              class="process"
              *ngIf="
                processData == '不受理' ||
                  processData == '结束' ||
                  processData == '已撤回' ||
                  processData == '重复事件'
              "
            >
              <div class="status">
                {{ processMessage[4] ? processMessage[4].name : "" }}
              </div>
              <div class="ico">
                <i class="icon_transport transport-icon_liucheng last"></i>
              </div>
              <div class="time">
                <ng-container *ngIf="processTime[4]">
                  {{processTime[4].startTime | date:"MM-dd HH:mm:ss"}}
                </ng-container>
              </div>
            </div>
            <div
              class="processCont"
              *ngIf="
                processData == '不受理' ||
                  processData == '结束' ||
                  processData == '已撤回' ||
                  processData == '重复事件'
              "
            >
              <div class="status"></div>
              <div
                class="conents"
                [innerHTML]="processMessage[4] ? processMessage[4].desc : ''"
              ></div>
            </div>
            <div
              class="process"
              *ngIf="
                processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status">
                {{ processMessage[3] ? processMessage[3].name : "" }}
              </div>
              <div class="ico">
                <i
                  class="icon_transport transport-icon_liucheng green now"
                  *ngIf="processData == '评价'"
                ></i>
                <i
                  class="icon_transport transport-icon_liucheng last"
                  *ngIf="processData != '评价'"
                ></i>
              </div>
              <div class="time">
                <ng-container *ngIf="processTime[3]">
                  {{processTime[3].startTime | date:"MM-dd HH:mm:ss"}}
                </ng-container>
              </div>
            </div>
            <div
              class="processCont"
              *ngIf="
                processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status"></div>
              <div
                class="conents"
                [innerHTML]="processMessage[3] ? processMessage[3].desc : ''"
              ></div>
            </div>
            <!-- 处理日志 start -->
            <ng-container *ngIf="orderInfo.incident">
              <div *ngFor="let item of orderInfo.incident.handlerLogs;let i = index;">
                <div
                  class="process"
                  *ngIf="
                    processData == '处理' ||
                      processData == '评价' ||
                      (processData == '结束' && processData != '重复事件')
                  "
                >
                  <div class="status">
                    {{ processMessage[2] ? processMessage[2].name : "" }}
                  </div>
                  <div class="ico">
                    <i
                      class="icon_transport transport-icon_liucheng green now"
                      *ngIf="processData == '处理' && i === 0"
                    ></i>
                    <i
                      class="icon_transport transport-icon_liucheng last"
                      *ngIf="!(processData == '处理' && i === 0)"
                    ></i>
                  </div>
                  <div class="time">
                    {{ item.opTime | date:"MM-dd HH:mm:ss"}}，{{ item.userName }}
                  </div>
                </div>
                <div
                  class="processCont"
                  *ngIf="
                    processData == '处理' ||
                      processData == '评价' ||
                      (processData == '结束' && processData != '重复事件')
                  "
                >
                  <div class="status"></div>
                  <div class="conents"><span *ngIf="item.repairType && item.expectedDate">{{item.repairType.name}}{{item.expectedDate|date:'MM月dd日前完成'}}</span> {{ item.opValue }}</div>
                </div>
              </div>
            </ng-container>
            <!-- 处理日志 end -->
            <div
              class="process"
              *ngIf="
                processData == '处理' ||
                  processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status">
                {{ processMessage[2] ? processMessage[2].name : "" }}
              </div>
              <div class="ico">
                <i
                  class="icon_transport transport-icon_liucheng green now"
                  *ngIf="processData == '处理' && orderInfo.incident && !orderInfo.incident.handlerLogs"
                ></i>
                <i
                  class="icon_transport transport-icon_liucheng last"
                  v-else
                ></i>
              </div>
              <div class="time">
                <ng-container *ngIf="processTime[2]">
                  {{processTime[2].startTime | date:"MM-dd HH:mm:ss"}}
                </ng-container>
              </div>
            </div>
            <div
              class="processCont"
              *ngIf="
                processData == '处理' ||
                  processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status"></div>
              <div
                class="conents"
                [innerHTML]="processMessage[2] ? processMessage[2].desc : ''"
              ></div>
            </div>
            <div
              class="process"
              *ngIf="
                processData == '受理' ||
                  processData == '处理' ||
                  processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status">
                {{ processMessage[1] ? processMessage[1].name : "" }}
              </div>
              <div class="ico">
                <i
                  class="icon_transport transport-icon_liucheng green now"
                  *ngIf="processData == '受理'"
                ></i>
                <i
                  class="icon_transport transport-icon_liucheng last"
                  *ngIf="processData != '受理'"
                ></i>
              </div>
              <div class="time">
                <ng-container *ngIf="processTime[1]">
                  {{processTime[1].startTime | date:'MM-dd HH:mm:ss'}}
                </ng-container>
              </div>
            </div>
            <div
              class="processCont"
              *ngIf="
                processData == '受理' ||
                  processData == '处理' ||
                  processData == '评价' ||
                  (processData == '结束' && processData != '重复事件')
              "
            >
              <div class="status"></div>
              <div
                class="conents"
                [innerHTML]="processMessage[1] ? processMessage[1].desc : ''"
              ></div>
            </div>
            <div class="process">
              <div class="status">
                {{ processMessage[0] ? processMessage[0].name : "" }}
              </div>
              <div class="ico">
                <i
                  class="icon_transport transport-icon_liucheng green now"
                  *ngIf="processData == '申请'"
                ></i>
                <i
                  class="icon_transport transport-icon_liucheng last"
                  *ngIf="processData != '申请'"
                ></i>
              </div>
              <div class="time">
                <ng-container *ngIf="processTime[0]">
                  {{processTime[0].startTime | date:"MM-dd HH:mm:ss"}}
                </ng-container>
              </div>
            </div>
            <div class="processCont">
              <div class="status"></div>
              <div
                class="conents lastConents"
                [innerHTML]="processMessage[0] ? processMessage[0].desc : ''"
              ></div>
            </div>
          </div>
          <!-- 流程图 end -->
        </div>
      </div>
      <div class="bottom" *ngIf="orderInfo.urgentDetails&&showCoop">
        <div class="urgent">
          <div>
            <ng-container *ngIf="amplificationShow&&orderInfo.urgentDetails&&showCoop">
                加急原因：{{orderInfo.urgentDetails.urgentReason}}
              <button *ngIf="orderInfo.urgentDetails.checkStatus.id==329" class=" btn default" nz-button nzType="primary"
                [nzLoading]="urgentLoading" nzGhost (click)="urgent()">确认加急</button>
            </ng-container>
          </div>
          <div class="amplification">
            <button
              nz-button
              nzType="primary"
              class="btn default"
              (click)="amplification()"
            >
              {{ amplificationShow ? "放大" : "还原" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </overlay-scrollbars>
  <div class="btns display_flex justify-content_flex-center">
    <button nz-button nzType="primary" (click)="goToSummary()" *ngIf="orderInfo.incident.duty && orderInfo.incident.duty.addSummary == 1">维修单</button>
    <button class=" btn cancel" nz-button nzType="default" (click)="close()">取消</button>
  </div>
</div>

<!-- 撤回工单 -->
<div class="recallOrder" *ngIf="recallOrderShow">
  <div class="modalBody">
    <div class="title">提示<i class="icon_transport transport-guanbi" (click)="closeRecallOrderModal()"></i></div>
    <div class="content">
      <div class="icon"><i class="icon_transport transport-wenhao"></i></div>
      <div class="defeat">您确认要撤回此工单吗？</div>
    </div>
    <div class="btns display_flex justify-content_flex-center">
      <button nz-button nzType="primary" [nzLoading]='btnLoading' (click)="confirmRec()">确认</button>
      <button nz-button nzType="primary" [nzLoading]='recLoading' nzGhost (click)="recAndDel()">撤回并删除</button>
      <button class=" btn cancel" nz-button nzType="default" (click)="closeRecallOrderModal()">取消</button>
    </div>
  </div>
</div>

<!-- 删除工单 -->
<div class="recallOrder delModel" *ngIf="delOrderShow">
  <div class="modalBody">
    <div class="title">提示<i class="icon_transport transport-guanbi" (click)="closeDelOrderModal()"></i></div>
    <div class="content">
      <div class="icon"><i class="icon_transport transport-wenhao"></i></div>
      <div class="defeat">您确认要删除此工单吗？</div>
    </div>
    <div class="btns display_flex justify-content_flex-center">
      <button nz-button nzType="primary" [nzLoading]='btnLoading' (click)="confirmDel()">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="closeDelOrderModal()">关闭</button>
    </div>
  </div>
</div>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo" (closeModel)="close()">
  <!-- 2.父组件调用子组件时绑定到这个事件属性，并在事件发生时作出回应。(closeModel)="close()" -->
</app-prompt-modal>
<app-incident-details *ngIf="isShowIncidentDetails" (close)="closeIncidentDetails()" [incidentId]="orderInfo.incident.id"></app-incident-details>
<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>
