<div class="washingBatchView">
  <!-- 头部 -->
  <div class="head">
    <div class="head_logo">
      <div class="logo"><img [src]="tool.logoUrl" [alt]="tool.logoTitle"></div>
      <div class="title">被服洗涤<span class="createTime">{{createTime|date:'yyyy-MM-dd HH:mm'}}</span></div>
    </div>
    <div class="red">请选择被服科室绑定分类和父级被服分类后进行搜索</div>
  </div>
  <!-- 主体 -->
  <div class="main">
    <div class="search top display_flex justify-content_space-between align-items_center">
      <div class="flex_1 display_flex">
        <div class="searchItem">
          <span class="label">被服科室绑定分类</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
            nzPlaceHolder="请选择被服科室绑定分类" [(ngModel)]="searchDto.child">
            <ng-container *ngFor="let data of childList">
              <nz-option [nzLabel]="data.typeName" [nzValue]="data.id"></nz-option>
            </ng-container>
          </nz-select>
        </div>
        <div class="searchItem">
          <span class="label">父级被服分类</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false" nzAllowClear
            nzPlaceHolder="请选择父级被服分类" [(ngModel)]="searchDto.parent">
            <ng-container *ngFor="let data of parentList">
              <nz-option [nzLabel]="data.name" [nzValue]="data.id"></nz-option>
            </ng-container>
          </nz-select>
        </div>
        <div class="searchItem">
          <span class="label">楼栋</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear
            nzPlaceHolder="请选择楼栋" [(ngModel)]="searchDto.buildingId" (nzOnSearch)="changeInp($event, 'building')">
            <ng-container *ngFor="let option of buildingList">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.buildingName" [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>
      <div class="display_flex align-items_center">
        <button nzType="primary" nz-button (click)="getList()">搜索</button>
        <button nzType="primary" nz-button (click)="reset()">重置</button>
        <button nzType="primary" nz-button (click)="printAll()">打印功能</button>
        <button nzType="primary" nz-button (click)="viewDetail()">查看异常</button>
        <button nzType="primary" nz-button (click)="showDelModal()" [disabled]="checkedDepIds.length === 0">批量送回</button>
      </div>
    </div>
    <div class="list">
      <nz-table nzBordered class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
        [nzLoading]="loading" [nzScroll]="{ x: '100%', y: scrollY + 'px' }">
        <thead>
          <tr class="thead">
            <!-- 多选框 -->
            <th nzLeft="0px" nzAlign="center" nzWidth="40px" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked"
              (nzCheckedChange)="checkAll($event)"></th>
            <!-- 固定列-first -->
            <th nzLeft="40px" nzAlign="center" nzWidth="140px">科室名称</th>
            <!-- 动态列 -->
            <th nzAlign="center" nzWidth="65px" *ngFor="let row of rows[1]">{{ row }}</th>
            <!-- 固定列-last -->
            <th [nzRight]="last ? '0px' : (first ? null : '100px')" nzAlign="center" [nzWidth]="(last ? '100px' : (first ? null : '65px'))" *ngFor="let row of rows[2];let first = first;let last = last;">{{ row }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData" (click)="selectedListData(data)">
            <td nzLeft="0px" nzAlign="center" nzShowCheckbox [nzDisabled]="data[0][1] != 4" [(nzChecked)]="mapOfCheckedId[data[0][0]]" (nzCheckedChange)="refreshStatus()"></td>
            <td nzLeft="40px" nzAlign="center"><span>{{ data[0][data[0].length - 1] }}</span></td>
            <td nzAlign="center" *ngFor="let row of data[1];let index = index;"><span (click)="clickNum($event, row)" class="table_hover" [ngClass]="{ red: row.exception == 1 }">{{ row.sendBackNum }}</span></td>
            <td [nzRight]="last ? '0px' : (first ? null : '100px')" nzAlign="center" *ngFor="let row of data[2];let first = first;let last = last;"><span>{{ row }}</span></td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <div class="bottom" *ngIf="listOfData.length">
      <strong>总件数：{{totalData.totalNum}}件</strong>
      <strong>总费用：{{totalData.totalPrice}}元</strong>
    </div>
  </div>
</div>
<!-- 批量送回模态框 -->
<app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="loading3"
(confirmDelEvent)="confirmDel()" [content]="content"></app-dialog-delete>

<!-- 修改数量模态框 -->
<div class="save display_flex justify-content_flex-center align-items_center add" *ngIf="washingModal">
  <div class="modalBody">
    <div class="title">提示<i class="icon_transport transport-guanbi" (click)="hideWashingModal()"></i>
    </div>
    <div class="content">
      <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="confirmWashing()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="sendBackNum">调整数量</nz-form-label>
          <nz-form-control nzErrorTip="请输入调整数量!">
            <nz-input-group>
              <nz-input-number formControlName="sendBackNum" placeholder="请输入调整数量" [nzStep]="1" [nzPrecision]="0"></nz-input-number>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="clothesExceptionResId">调整原因</nz-form-label>
          <nz-form-control nzErrorTip="请选择调整原因!">
            <nz-select formControlName="clothesExceptionResId" nzPlaceHolder="请选择调整原因">
              <nz-option *ngFor="let option of dictionaryList" [nzLabel]="option.name" [nzValue]="option.id">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="remarks">备注</nz-form-label>
          <nz-form-control nzErrorTip="请输入备注!">
            <nz-input-group>
              <input nz-input formControlName="remarks" placeholder="请输入备注" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

      </form>
    </div>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" [nzLoading]="btnLoading" nz-button (click)="confirmWashing()">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideWashingModal()">取消</button>
    </div>
  </div>
</div>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo"></app-prompt-modal>

<!-- 异常查看 -->
<app-businessData-detail-modal
  *ngIf="washingExceptionModalShow"
  [show]="washingExceptionModalShow"
  type="washingException"
  [orderId]="route.snapshot.paramMap.get('id')"
  (closeModelHs)="closeModelWashingException($event)"
></app-businessData-detail-modal>

<!-- 打印的内容 -->
<div id="print-section" hidden>
  <table style="overflow: hidden;width: 100%;">
    <thead>
      <tr style="text-align: center;font-weight: bold;page-break-inside: avoid;" *ngIf="listOfData.length">
        <td style="border: 1px solid #ccc;width: 4em;">科室名称</td>
        <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;" *ngFor="let item of rows[1]">{{item}}</td>
        <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;">总件数</td>
        <!-- <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;border-top: 1px solid #ccc;">费用/元</td> -->
      </tr>
    </thead>
    <tbody *ngFor="let item of listOfData">
      <tr style="text-align: center;page-break-inside: avoid;">
        <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;" [ngStyle]="{'border-left':'1px solid #ccc'}">{{item[0][item[0].length - 1]}}</td>
        <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;" *ngFor="let v of item[1]">{{v.sendBackNum}}</td>
        <ng-container *ngFor="let v of item[2];let first = first;let last = last;">
          <td style="border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;" *ngIf="!first && !last">{{v}}</td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</div>
<button ngxPrint printSectionId="print-section" #printBtn hidden [printStyle]="{ '@page': { size: 'landscape !important' } }">打印</button>
