<div class="list-template pt0">
  <div class="list-template__content">
    <div class="list-template__tab">
      <div class="list-template__tabItem" [ngClass]="{'active': queryTask == item.key}" (click)="changeTab(item.key)" *ngFor="let item of tabs">{{item.value}}<span [ngClass]="{ red: item.isRed && item.num > 0}">({{item.num}})</span></div>
    </div>
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='18' class="list-template__searchBox">
				<div class="list-template__searchItem" *ngIf="coopBtns.strideLook && queryTask!='todo' && queryTask!='doing' && queryTask!='storage'">
				  <span class="label">维修科室</span>：
				  <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch
				     (ngModelChange)="deptChange($event)" nzAllowClear nzPlaceHolder="请选择维修科室" [(ngModel)]="searchDTO.maintainDepartment">
				    <ng-container *ngFor="let option of maintainDept">
				      <nz-option [nzLabel]="option.hosName" [nzValue]="option.id"></nz-option>
				    </ng-container>
				  </nz-select>
				</div>
				<div class="list-template__searchItem" *ngIf="queryTask!='todo' && queryTask!='owns' && queryTask!='storage' && queryTask!='doing' && queryTask!='reassign'">
				  <span class="label">维修组</span>：
				  <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch
				     nzAllowClear nzPlaceHolder="请选择维修组" [(ngModel)]="searchDTO.maintainGroup">
				    <ng-container *ngFor="let option of maintainGroup">
				      <nz-option [nzLabel]="option.groupName" [nzValue]="option.id"></nz-option>
				    </ng-container>
				  </nz-select>
				</div>
        <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 class="list-template__searchItem">
          <span class="label">事件单号</span>：
          <input nz-input class="formItem" placeholder="请输入事件单号" [(ngModel)]="searchDTO.incidentsign" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">报修科室</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeInp($event)" nzAllowClear nzPlaceHolder="请选择报修科室" [(ngModel)]="searchDTO.department">
            <ng-container *ngFor="let option of alldepart">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [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]="false" nzAllowClear
            nzPlaceHolder="请选择状态" [(ngModel)]="searchDTO.statusId">
            <nz-option [nzLabel]="data.name" [nzValue]="data.id" *ngFor="let data of gdStates"></nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">处理人</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeUser($event, 'handle')" nzAllowClear nzPlaceHolder="请选择处理人" [(ngModel)]="searchDTO.todoingUser">
            <ng-container *ngFor="let option of handleUserList">
              <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]="false" nzAllowClear
				    nzPlaceHolder="请选择评分" [(ngModel)]="searchDTO.score">
				    <nz-option [nzLabel]="data.name" [nzValue]="data.id" *ngFor="let data of scoreData"></nz-option>
				  </nz-select>
				</div>
      </div>
      <div nz-col nzXl='6' class="list-template__btns">
        <button nz-button class="btn default ml8" (click)='search()'>搜索</button>
        <button nz-button class="btn default ml8" (click)='reset()'>重置</button>
        <button nz-button *ngIf="coopBtns.export" class="btn default ml8" (click)='export()' [nzLoading]="loading2">导出</button>
        <button nz-button class="btn default ml8" (click)='showSearchModal()'>详细搜索</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%">序号</th>
            <th nzWidth="27%">故障信息</th>
            <th nzWidth="14%">详细地址</th>
            <th nzWidth="12%">联系信息</th>
            <th nzWidth="12%">受理人|处理人/组</th>
            <th nzWidth="10%">延期记录</th>
            <th nzWidth="8%">状态</th>
            <th nzWidth="12%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let index=index;" (click)="detail($event,data)">
            <td>{{index+(pageIndex-1) * pageSize + 1}}</td>
            <td class="text_align_left">
              <span [ngClass]="priorityColor(data.priorityId)">{{ data.priorityDTO?.name }}</span>
              {{ data.incidentsign }} {{ data.acceptDate | date: 'yyyy-MM-dd HH:mm' }}<br>{{ data.description }}
              <i class="icon_transport transport-a-11111 ml8" *ngIf="data.reqAttachment"></i>
              <i class="icon_transport transport-luyin ml8" *ngIf="data.reqRecord"></i>
            </td>
            <td class="text_align_left">
              {{ data.hosName || '无' }}<br>
              <ng-container *ngIf="data.repairIncidentType.value === 'public'">
                {{ data.repairIncidentType.name }}<br>
              </ng-container>
              <ng-container *ngIf="data.repairIncidentType.value === 'dept'">
                {{ data.department?.dept || '无' }}<br>
              </ng-container>
              {{ data.place ? data.place.building.buildingName : '' }}{{ data.place ? data.place.floorName + '层' : '' }}{{ data.houseNumber }}
            </td>
            <td class="text_align_left">
              {{ data.requester?.name || '无' }}<br>
              联电：{{ data.contactsInformation || '无' }}<br>
              来电：{{ data.incomingPhone || '无' }}
              <i class="icon_transport transport-luyin ml8" *ngIf="data.callID"></i>
            </td>
            <td>
              {{ data.acceptUser?.name || '无' }}<br>
              {{ transferSynergetic(data) }}<br>
              <ng-container *ngIf="(data.state.value === 'pending' || data.state.value === 'reassign') && data.overdueResponseDate"><span [ngStyle]="{ color: data.acceptColourInfo ? data.acceptColourInfo.value : '' }">{{ data.overdueResponseDate | date: 'MM-dd HH:mm' }}</span>前接单</ng-container>
              <ng-container *ngIf="data.state.value === 'handler' && data.overdueTime"><span [ngStyle]="{ color: data.handleColourInfo ? data.handleColourInfo.value : '' }">{{ data.overdueTime | date: 'MM-dd HH:mm' }}</span>前处理</ng-container>
            </td>
            <td [innerHTML]="data.overtimeRemark"></td>
            <td>{{ data.state?.name }}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.look && data.inspectionTaskId" (click)="viewInspectionDetail($event,data.inspectionTaskId)">查看巡检</span>
                <span *ngIf="coopBtns.look" (click)="detail($event,data)">查看</span>
                <span *ngIf="data.computedEditFlag" (click)="edit($event,data)">编辑</span>
                <span *ngIf="data.computedVisitFlag" (click)="visit($event,data)">回访</span>
                <span *ngIf="data.computedReceiveFlag" (click)="showDelModal($event, data,'您确认要接单吗？','接单','receive')">接单</span>
                <span *ngIf="data.computedHandleFlag" (click)="handle($event,data)">处理</span>
                <span *ngIf="data.computedSubstitutionFlag" (click)="substitution($event,data)">换人处理</span>
                <span *ngIf="data.computedPostponeFlag" (click)="postpone($event,data)">延期处理</span>
                <span *ngIf="data.computedSetDutyFlag" (click)="setDuty($event,data)">设置责任部门</span>
                <span *ngIf="coopBtns.del && data.deleteFlag !== 1" (click)="showDelModal($event, data,'您确认要删除吗？','删除','del')">删除</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
        </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>

<!-- 详细搜索模态框 -->
<div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="searchModal">
  <div class="modalBody">
    <div class="title">{{modelName}}<i class="icon_transport transport-guanbi" (click)="hideSearchModal()"></i></div>
    <div class="content">
      <form nz-form [formGroup]="validateSearchForm" class="addForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzFor="levelCategory">故障现象</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请输入故障现象!">
            <nz-tree-select [nzDropdownStyle]="{ height: '400px'}" [nzNodes]="incidentCategoryList" nzPlaceHolder="请选择故障现象" formControlName="levelCategory"></nz-tree-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzFor="acceptUser">受理人</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择受理人!">
            <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeUser($event, 'acceptUser')" nzAllowClear nzPlaceHolder="请选择受理人" formControlName="acceptUser">
              <ng-container *ngFor="let option of acceptUserList">
                <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>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzFor="selectType">逾期查询</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择逾期查询!">
            <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
            nzPlaceHolder="请选择逾期查询" formControlName="selectType">
              <nz-option [nzLabel]="data.name" [nzValue]="data.id" *ngFor="let data of overdueStates"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzFor="sourceValue">报修来源</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择报修来源!">
            <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
            nzPlaceHolder="请选择报修来源" formControlName="sourceValue">
              <nz-option [nzLabel]="data.name" [nzValue]="data.value" *ngFor="let data of sourceList"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSpan]="5" nzFor="busiParent">业务父级</nz-form-label>
				  <nz-form-control [nzSpan]="19" nzErrorTip="请选择业务父级!">
				    <nz-select nzAllowClear [nzDropdownMatchSelectWidth]="false" formControlName="busiParent" nzShowSearch
				      nzPlaceHolder="请选择业务父级" nzServerSearch (nzOnSearch)="changeDeptInp($event)"
				      (nzOpenChange)="openDeptSelect($event)">
				      <ng-container *ngFor="let data of allParentdepart">
				        <nz-option *ngIf="!isLoading" [nzLabel]="data.dept" [nzValue]="data.id">
				        </nz-option>
				      </ng-container>
				      <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
				        <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
				      </nz-option>
				    </nz-select>
				  </nz-form-control>
				</nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSpan]="5" nzFor="deleteFlag">是否已删除</nz-form-label>
          <nz-form-control [nzSpan]="19" nzErrorTip="请选择是否已删除!">
            <nz-radio-group formControlName="deleteFlag">
              <label nz-radio [nzValue]="1">是</label>
              <label nz-radio [nzValue]="0">否</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSpan]="5" nzFor="repairsUser">报修人</nz-form-label>
				  <nz-form-control [nzSpan]="19" nzErrorTip="请选择报修人!">
				    <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
				    (nzOnSearch)="changeRepairsUser($event)" nzAllowClear nzPlaceHolder="请选择报修人" formControlName="repairsUser">
				      <ng-container *ngFor="let option of repairsUserList">
				        <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>
				  </nz-form-control>
				</nz-form-item>
				<nz-form-item>
				  <nz-form-label [nzSpan]="5" nzFor="incomingPhone">来电号码</nz-form-label>
				  <nz-form-control [nzSpan]="19" nzErrorTip="请输入来电号码!">
						<input type="text" nz-input placeHolder="请输入来电号码" formControlName="incomingPhone">
				  </nz-form-control>
				</nz-form-item>
      </form>
    </div>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" nz-button (click)="submitSearchModal()" [nzLoading]="btnLoading">确认搜索</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideSearchModal()">取消</button>
    </div>
  </div>
</div>

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

<!-- 处理 -->
<app-incident-handle [id]="coopData.id" *ngIf="handleModalShow" (closeModelHs)="closeHandleModelOrder($event)" (confirmModelHs)="confirmHandleModelOrder($event)"></app-incident-handle>

<!-- 换人处理 -->
<app-incident-substitution [id]="coopData.id" *ngIf="substitutionModalShow" (closeModelHs)="closeSubstitutionModelOrder($event)" (confirmModelHs)="confirmSubstitutionModelOrder($event)"></app-incident-substitution>

<!-- 设置责任部门 -->
<app-incident-setduty [id]="coopData.id" *ngIf="setdutyModalShow" (closeModelHs)="closeSetdutyModelOrder($event)" (confirmModelHs)="confirmSetdutyModelOrder($event)"></app-incident-setduty>

<!-- 延期处理 -->
<app-incident-postpone [id]="coopData.id" *ngIf="postponeModalShow" (closeModelHs)="closePostponeModelOrder($event)" (confirmModelHs)="confirmPostponeModelOrder($event)"></app-incident-postpone>

<!-- 回访 -->
<app-incident-visit [id]="coopData.id" *ngIf="visitModalShow" (closeModelHs)="closeVisitModelOrder($event)" (confirmModelHs)="confirmVisitModelOrder($event)"></app-incident-visit>

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

<!-- 编辑/新增 -->
<app-incident-create [id]="coopData.id" *ngIf="editModalShow" (closeModelHs)="closeEditModelOrder($event)" (confirmModelHs)="confirmEditModelOrder($event)"></app-incident-create>
