

<div style="width:100%;display: flex;justify-content: end;">
  <div style="width:30%;display: flex;justify-content: end;align-items: flex-end;">
    <ng-container *ngFor="let button of schema?.buttons">
      <button *ngIf="button?.place=='top'&&button?.show({queryParams:queryParams})" mat-raised-button color="primary" (click)="batchHandle(button)" >{{button?.name }}</button>
    </ng-container>
  </div>
</div>

<!-- 数据表格：渲染当前页 -->
<nz-table #editRowTable [nzData]="list" *ngIf="showMode=='list'&&list?.length"
  [nzLoading]="isLoading" nzFrontPagination="false">
    <thead>
      <tr>
        <!-- 全部选择 -->
        <th
            [nzChecked]="checked"
            [nzIndeterminate]="indeterminate"
            nzLabel="Select all"
            (nzCheckedChange)="onAllChecked($event)"
            (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
          ></th>
        <ng-container *ngFor="let field of headerArray">
            <th >{{field?.name}}</th>
        </ng-container>
            <th >时间</th>
            <th >操作</th>
    </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let object of editRowTable.data">
        <tr class="editable-row" *ngIf="object?.get('isDeleted')!=true">
          <!-- 单行选择 -->
          <!-- [nzDisabled]="object.disabled" -->
          <td
          [nzChecked]="setOfCheckedId.has(object.id)"
          [nzLabel]="object.className"
          (nzCheckedChange)="onItemChecked(object.id, $event)"
        ></td>
          <ng-container *ngFor="let field of headerArray">
            <!-- 单行数据每个字段渲染 -->
            <td > 
              <ng-contianer [ngSwitch]="field?.type">
                <ng-container *ngSwitchCase="'Pointer'">
                  {{ pointerShowMap?.[object?.get(field.key)?.objectId||object?.get(field.key)?.id] || "-" }}
                  <!-- 设备: cluster 单元切换 -->
                  <!-- <comp-select-cluster *ngIf="field?.className=='MinerCluster' && object?.className!='MinerCluster'" [device]="object" [unit]="object?.get(field.key)"></comp-select-cluster> -->
                </ng-container>
                <ng-container *ngSwitchCase="'Boolean'">
                  <ng-container *ngIf="currentLang=='cn'">
                    <mat-slide-toggle [checked]="object.get(field.key)" (change)="toggleFiled(object,field.key)">{{object.get(field.key)?"是":"否"}}</mat-slide-toggle>
                  </ng-container>
                  <ng-container *ngIf="currentLang=='en'">
                    <mat-slide-toggle [checked]="object.get(field.key)" (change)="toggleFiled(object,field.key)">{{object.get(field.key)?"Yes":"No"}}</mat-slide-toggle>
                  </ng-container>
                </ng-container>
                <ng-container *ngSwitchDefault>
                  {{ (object.get(field.key) || "-")  }}
                  <!-- 设备: position 位置切换 -->
                  <!-- <comp-select-position [unit]="unit" *ngIf="queryParams?.where?.type=='miner' && field.key=='position' && object?.className=='MinerDevice'" [device]="object" [position]="object?.get(field.key)"></comp-select-position> -->

                </ng-container>
              </ng-contianer>
            </td>
          </ng-container>
          <td>
            <!-- 在线时间：优先显示最后在线时间，若无则显示数据更新时间 -->
            {{(object?.get("onlineAt") || object?.updatedAt) | utilnow:currentLang }}
          </td>
          <td >
            <ng-container *ngFor="let button of schema?.buttons">
              <button *ngIf="button?.place=='item'&&button?.show({object:object})" mat-raised-button [color]="button?.color||'primary'" (click)="buttonHandle(button,object)" >{{button?.name }}</button>
            </ng-container>
          </td>
        </tr>
      </ng-container>

    </tbody>
  </nz-table>

  <div style="display:flex;flex-wrap: wrap;width:100%;" *ngIf="showMode=='grid'">
    <ng-container *ngFor="let object of list">
      <div style="width:33%;padding:10px;">
        <!-- <comp-monitor-card [monitor]="object"></comp-monitor-card> -->
      </div>
    </ng-container>
  </div>

  <!-- 暂无数据：提示模板 -->
  <ng-template #noResultTpl>
    <nz-result [nzIcon]="emptyImgTpl" [nzTitle]="schema?.title+'管理'" [nzSubTitle]="schema?.emptyDesc || '当前还没有'+schema?.title+'数据哦，请您点击创建。'">
      <div nz-result-extra>
        <button mat-raised-button color="secondary" (click)="createObject()">创建{{schema?.title}}</button>
      </div>
    </nz-result>
  </ng-template>
  <ng-template #emptyImgTpl>
    <img style="width:50%;max-width:300px;" [src]="schema?.emptyImg || '/img/404-empty.svg' " alt="">
  </ng-template>

  <ng-container *ngIf="!list?.length">
    <ng-container *ngTemplateOutlet="noResultTpl"></ng-container>
  </ng-container>

  <!-- 分页区域：分页组件 -->
  <div style="width:100%;display: flex;justify-content: end;align-items: center;padding-right: 20px;margin-top:-20px;">
    <nz-pagination 
    [nzPageIndex]="pageIndex"
    [nzSize]="'small'"
    [nzPageSize]="pageSize" [nzTotal]="pageTotal" (nzPageIndexChange)="onPageIndexChange($event)"
    ></nz-pagination>
  </div>

  <!-- 全选操作：批量操作 -->
  <div class="batch-toolbar-modal" *ngIf="setOfCheckedId?.size">
    <div class="batch-toolbar">
      <div class="styles_counter__18S08">
      <span>已选</span>
      <span class="styles_num__178Wa">{{setOfCheckedId?.size}}</span>
    </div>
    <div class="batch-toolbar-actions">
      <div class="ant-space ant-space-horizontal ant-space-align-center">
        <div class="ant-space-item" style="margin-right: 16px;">
          <button nz-button nzType="text" (click)="deleteSelected()">
            <span nz-icon nzType="delete"></span>
            删除
          </button>
        </div>
      </div>
    </div>
    <div class="styles_cancel__AARoT">
      <button nz-button nzType="text">取消选中</button>
    </div>
  </div>
</div>