<div class="save display_flex justify-content_flex-center align-items_center add">
  <div class="modalBody">
    <div class="title">查看<i class="icon_transport transport-guanbi" (click)="hideModal()"></i></div>
    <div class="content">
      <div class="workingArea">
        <div class="tabs">
          <div class="tab" *ngFor="let item of tabs" (click)="clickTbab(item)" [ngClass]="{ active: activeTabValue === item.value }">{{ item.name }}</div>
        </div>
        <overlay-scrollbars #osComponentRef1 class="detail">
          <!-- 报修信息 -->
          <div class="repair" *ngIf="activeTabValue === 1">
            <div class="row">
              <div class="col">单号：{{incidentData.incidentsign}}</div>
              <div class="col">优先级：{{incidentData.priorityDTO?.name}}</div>
              <div class="col">状态：{{incidentData.state?.name}}</div>
            </div>
            <div class="row">
              <div class="col">报修类型：{{incidentData.repairIncidentType?.name}}</div>
              <div class="col display_flex">报修录音：<audio class="audio" controls style="outline: none;" *ngIf="incidentData.reqRecord && audioRequireSrc"><source [src]="audioRequireSrc" type="audio/mp3"></audio></div>
              <div class="col">报修来源：{{incidentData.source?.name}}</div>
            </div>
            <div class="row">
              <div class="col">故障现象：{{incidentData.category?.mutiCategory}}</div>
            </div>
            <div class="row">
              <div class="col">故障描述：{{incidentData.description}}</div>
            </div>
            <div class="row">
              <div class="col">详细地址：{{ incidentData.place?.building?.buildingName }}{{ incidentData.place ? incidentData.place.floorName + '层' : '' }}{{ incidentData.houseNumber }}</div>
            </div>
            <div class="row">
              <div class="col thumbs">
                <span class="colName">报修图片：</span>
                <div class="thumbList">
                  <div class="thumb" *ngFor="let item of repairImgs;let index = index;" (click)="previewImageHandler(repairImgs, index)"><img [src]="item.thumbFilePath" alt=""></div>
                </div>
              </div>
              <div class="col">联系人：{{incidentData.contacts}}</div>
              <div class="col">联系电话：{{incidentData.contactsInformation}}</div>
            </div>
            <div class="row">
              <div class="col">来电电话：{{incidentData.incomingPhone}}</div>
              <div class="col display_flex">来电录音：<audio class="audio" controls style="outline: none;" *ngIf="incidentData.callID && audioSrc"><source [src]="audioSrc" type="audio/wav"></audio></div>
              <div class="col"><ng-container *ngIf="incidentData.assetDTO">关联资产：{{incidentData.assetDTO?.name}}</ng-container></div>
            </div>
            <div class="row">
              <div class="col">报修科室：{{incidentData.department?.dept}}</div>
              <div class="col">报修人：{{incidentData.requester?.name}}</div>
              <div class="col">受理人：{{incidentData.acceptUser?.name}}</div>
            </div>
            <div class="row">
              <div class="col">登记时间：{{incidentData.acceptDate|date:'yyyy-MM-dd HH:mm:ss'}}</div>
              <div class="col flex2">预约维修时间：{{incidentData.yyTime}}</div>
            </div>
          </div>
          <!-- 处理信息 -->
          <div class="handle" *ngIf="activeTabValue === 2">
            <div class="row">
              <div class="col">处理方式：{{incidentData.handleCategory?.name}}</div>
              <div class="col">处理结果：{{incidentData.closecode?.name}}</div>
              <div class="col">处理人：{{computedHandlerUser}}</div>
            </div>
            <div class="row">
              <div class="col">解决方案：{{incidentData.handleDescription}}</div>
            </div>
            <div class="row">
              <div class="col">是否生成知识库：{{incidentData.solutionCode ? '是' : '否'}}</div>
              <div class="col">生成知识库编号：{{incidentData.solutionCode}}</div>
              <div class="col">是否引用知识库：{{incidentData.solutionNo ? '是' : '否'}}</div>
            </div>
            <div class="row">
              <div class="col thumbs">
                <span class="colName">处理图片：</span>
                <div class="thumbList">
                  <div class="thumb" *ngFor="let item of handleImgs;let index = index;" (click)="previewImageHandler(handleImgs, index)"><img [src]="item.thumbFilePath" alt=""></div>
                </div>
              </div>
              <div class="col">维修总价：{{incidentData.rsPrice === undefined ? '' : incidentData.rsPrice + '元'}}</div>
              <div class="col">协同人：{{computedSynergeticUser}}</div>
            </div>
            <div class="row">
              <div class="col files">
                附件列表：
                <div class="fileList">
                  <div class="file" *ngFor="let item of handleAttachments;let index = index;" (click)="download(item.name,item.token)">{{item.name}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 汇总单 -->
          <div class="order" *ngIf="activeTabValue === 4">
            <app-incident-handle-order [id]="id"></app-incident-handle-order>
          </div>
          <!-- 评价信息 -->
          <div class="evaluation" *ngIf="activeTabValue === 5">
            <div class="evaluationList">
              <div class="title"><div class="dot"></div>用户评价</div>
              <div class="body">
                <div class="top" *ngIf="incidentData.wxdegree"><nz-rate [ngModel]="incidentData.wxdegree.value" nzDisabled></nz-rate></div>
                <div class="bottom" *ngFor="let item of resolveLogs">{{item.remark}}</div>
              </div>
            </div>

            <div class="evaluationList">
              <div class="title"><div class="dot"></div>回访信息</div>
              <div class="body">
                <div class="top" *ngIf="incidentData.degree">{{incidentData.degree.name}}</div>
                <div class="bottom" *ngFor="let item of callbackLogs">{{item.remark}}</div>
              </div>
            </div>
          </div>
        </overlay-scrollbars>
      </div>
      <overlay-scrollbars #osComponentRef2 class="process">
        <div class="head">处理流程</div>
        <div class="process_step" *ngFor="let item of incidentLogList;let index = index;let last = last;">
          <div class="title"><i class="icon_transport transport-duigou1 num" *ngIf="last"></i><span class="num" *ngIf="!last">{{index + 1}}</span><span class="name">{{item.logType ? item.logType.name : ''}}<span class="remark" *ngIf="item.remark" [title]="item.remark">（{{item.remark}}）</span></span></div>
          <div class="body">{{item.startTime | date: 'yyyy-MM-dd HH:mm:ss'}}  <span class="remark" *ngIf="item.appointorName">{{item.appointorName}}</span></div>
        </div>
      </overlay-scrollbars>
    </div>
    <div class="display_flex justify-content_flex-center">
      <button nz-button nzType="primary" (click)="hideModal()">知道了</button>
    </div>
  </div>
</div>

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

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