<div class="flex justify-between py-4 items-center">
  <div class="page-headline-font pl-8">{{ keyWord + '管理' }}</div>
  <div class="pr-8 flex">
    @if (showSearchForm) {
      <form nz-form nzLayout="inline" [formGroup]="validateForm">
        <nz-space>
          @for (item of inputFields; track item.key) {
            <nz-form-item *nzSpaceItem>
              <nz-form-label>{{ item.label }}</nz-form-label>
              <nz-form-control>
                <input
                  nz-input
                  class="precaution-input"
                  [placeholder]="'请输入' + item.label"
                  [formControlName]="item.key"
                />
              </nz-form-control>
            </nz-form-item>
          }
        </nz-space>
      </form>
      <button class="precaution-button" nz-button nzType="primary" (click)="onSearch()">查询</button>
      <button class="precaution-secondary ml-2" nz-button (click)="onReset()">重置</button>
    }
    <button class="precaution-button ml-6" nzType="primary" nz-button (click)="handleAdd()">
      <span nz-icon nzType="plus"></span>
      {{ '新增' + keyWord }}
    </button>
  </div>
</div>

<div class="px-6">
  <nz-table
    class="precaution-table"
    #table
    [nzData]="list"
    nzShowPagination
    nzPaginationType="small"
    [nzFrontPagination]="false"
    [nzTotal]="pageConfig.total"
    [nzPageIndex]="pageConfig.current + 1"
    (nzPageIndexChange)="onCurrentPageChange($event - 1)"
  >
    <thead>
      <tr>
        @for (item of columns; track $index) {
          <th
            [nzShowSort]="item.sortable"
            [nzSortOrder]="item.sortOrder || null"
            [nzSortDirections]="sortDirections"
            (nzSortOrderChange)="handleSort(item, $event)"
            [nzWidth]="item.width || null"
          >
            {{ item.label }}
          </th>
        }
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of table.data">
        @for (item of columns; track $index) {
          <td>{{ getValue(data, item.key) }}</td>
        }

        <td>
          @if (editable) {
            <button class="precaution-button px-4" nz-button nzSize="small" nzType="primary" (click)="handleEdit(data)">
              编辑
            </button>
          }
          <button
            class="precaution-secondary px-4 ml-2"
            nz-button
            nzSize="small"
            nzType="primary"
            (click)="handleDelete(data)"
          >
            删除
          </button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>
