<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>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
            (nzOnSearch)="changeInp('search', 'department', $event)" nzAllowClear nzPlaceHolder="请选择科室" [(ngModel)]="searchDto.deptId">
            <ng-container *ngFor="let option of departmentSearchList">
              <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" nzServerSearch nzShowSearch
            (nzOnSearch)="changeInp('search', 'building', $event)" nzAllowClear nzPlaceHolder="请选择楼栋" [(ngModel)]="searchDto.buildId">
            <ng-container *ngFor="let option of buildingSearchList">
              <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 class="list-template__searchItem">
          <span class="label">名称</span>：
          <input nz-input class="formItem" placeholder="请输入名称" [(ngModel)]="searchDto.name" />
        </div>
      </div>
      <div nz-col nzLg="8" class="list-template__btns">
        <button nz-button *ngIf="coopBtns.add" class="btn default" (click)="showInspectionAddressDepartment()">批量关联科室</button>
        <div class="dropdown">
          <button [disabled]="!checkedDepIds.length" nz-button class="btn default ml8" *ngIf="coopBtns.del || coopBtns.print || coopBtns.reset" (mouseenter)="showDropdown = (checkedDepIds.length ? true : false)" (mouseleave)="showDropdown = false">批量操作</button>
          <div class="dropdown-content" [hidden]="!showDropdown" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
            <div class="dropdownItem" (click)="showDelModal($event, data,'删除后您配置的相关巡检计划，下次执行时不在生成巡检任务，您确认要删除吗？','删除','delList')" *ngIf="coopBtns.del">批量删除</div>
            <div class="dropdownItem" *ngIf="coopBtns.print" (click)="print($event,true)">批量打印</div>
            <div class="dropdownItem" *ngIf="coopBtns.reset" (click)="showDelModal($event, data,'您确认要重置二维码吗？','重置','resetList')">批量重置</div>
          </div>
        </div>
        <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.add" class="btn default ml8" (click)="addModal()">新增</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="4%" nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" (nzCheckedChange)="checkAll($event)"></th>
            <th nzWidth="16%">巡检点名称</th>
            <th nzWidth="16%">关联科室</th>
            <th nzWidth="16%">详细地址</th>
            <th nzWidth="16%">标签</th>
            <th nzWidth="16%">支持签到模式</th>
            <th nzWidth="16%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let i = index" (click)="selectedListData(data)">
            <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
            <td>{{data.name}}</td>
            <td>{{data.departmentDTO?.dept}}</td>
            <td>{{data.buildingDTO?.buildingName}}{{data.floorDTO?.floorName}}层{{data.address}}</td>
            <td>{{data.tagIdsList|dataToName:'name':' '}}</td>
            <td>{{data.signType?.name}}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.edit" (click)="edit($event, data)">编辑</span>
                <span *ngIf="coopBtns.del" (click)="showDelModal($event, 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 class="save display_flex justify-content_flex-center align-items_center add" *ngIf="modal">
    <div class="modalBody">
      <div class="title">{{modelName}}巡检点<i class="icon_transport transport-guanbi" (click)="hideAddModal()"></i></div>
      <div class="content">
        <form nz-form [formGroup]="validateForm" class="addForm">
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="name">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请输入名称!">
              <nz-input-group>
                  <input formControlName="name" nz-input placeholder="请输入名称">
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <!-- <nz-form-label [nzSpan]="5" nzRequired nzFor="deptId">关联科室</nz-form-label> -->
            <nz-form-label [nzSpan]="5" nzFor="deptId">关联科室</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择关联科室!">
              <!-- <nz-select (nzOnSearch)="changeInp('add', 'department', $event)" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear formControlName="deptId" nzPlaceHolder="请选择关联科室" (ngModelChange)="changeDepartment($event)" [nzDisabled]="!add" (nzOpenChange)="changeInp('add', 'department', '')"> -->
              <nz-select (nzOnSearch)="changeInp('add', 'department', $event)" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear formControlName="deptId" nzPlaceHolder="请选择关联科室" (ngModelChange)="changeDepartment($event)" (nzOpenChange)="changeInp('add', 'department', '')">
                <ng-container *ngFor="let option of departmentAddList">
                  <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>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="buildId">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;栋</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择楼栋!">
              <nz-select (nzOnSearch)="changeInp('add', 'building', $event)" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear formControlName="buildId" nzPlaceHolder="请选择楼栋" (ngModelChange)="changeBuilding($event)">
                <ng-container *ngFor="let option of buildingAddList">
                  <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>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="floorId">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择楼层!">
              <nz-select (nzOnSearch)="changeInp('add', 'floor', $event)" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear formControlName="floorId" nzPlaceHolder="请选择楼层">
                <ng-container *ngFor="let option of floorList">
                  <nz-option *ngIf="!isLoading" [nzLabel]="option.floorName" [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 style="margin: 4px 0 2px 0;">
            <nz-form-label [nzSpan]="5" nzRequired nzFor="address">详细地址</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请输入详细地址!">
              <nz-input-group>
                  <textarea formControlName="address" nz-input placeholder="请输入详细地址"></textarea>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="5" nzRequired nzFor="tagIds">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;签</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择标签!">
              <nz-select (ngModelChange)="changeTags($event)" nzMode="tags" nzAllowClear formControlName="tagIds" nzPlaceHolder="请选择标签">
                <ng-container *ngFor="let option of tagList">
                  <nz-option *ngIf="!isLoading" [nzLabel]="option.name" [nzValue]="option.name"></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" nzRequired nzFor="signType">签到模式</nz-form-label>
            <nz-form-control [nzSpan]="19" nzErrorTip="请选择签到模式!">
              <nz-select [nzDropdownMatchSelectWidth]="false" formControlName="signType" nzShowSearch
                nzPlaceHolder="请选择签到模式" nzServerSearch>
                <ng-container *ngFor="let data of dispatchMethods">
                  <nz-option *ngIf="!isLoading" [nzLabel]="data.name" [nzValue]="data.value"></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>
        </form>
      </div>
      <div class="display_flex justify-content_flex-center">
        <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">确认</button>
        <button class="btn cancel" nz-button nzType="default" (click)="hideAddModal()">取消</button>
      </div>
    </div>
  </div>
  <!-- 模态框 -->
  <app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading"
    (confirmDelEvent)="confirmDel()" [content]="tipsMsg1"></app-dialog-delete>
</div>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo">
</app-prompt-modal>
<!-- 二维码打印 -->
<div id="report" style="display: none">
  <div *ngFor="let img of codes" style="display: inline-block;">
    <img style="width: 200px;height:200px;" [src]="img.base64" alt="">
    <p style="margin: 0;text-align: center; font-size: 20px;width: 200px;">{{img.name}}</p>
  </div>
</div>
<!-- 批量关联科室 -->
<app-inspection-address-department-prompt-modal
  *ngIf="inspectionAddressDepartmentPromptModalShow"
  [show]="inspectionAddressDepartmentPromptModalShow"
  (closeModelHs)="closeModelInspectionAddressDepartment($event)"
  (confirmModelHs)="confirmModelInspectionAddressDepartment($event)"
></app-inspection-address-department-prompt-modal>

<!-- 批量关联科室-标签 -->
<app-inspection-address-tag-prompt-modal
  [deptFlag]="inspectionAddressTagPromptModalShow"
  [checkedDepIdsModel]="checkedDepIdsModel"
  (submitFormHand)="confirmModelInspectionAddressTag($event)"
  (deptFlagHand)="closeModelInspectionAddressTag($event)"
  *ngIf="inspectionAddressTagPromptModalShow"
></app-inspection-address-tag-prompt-modal>

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