<div class="flex justify-between py-4 items-center">
  <div class="page-headline-font pl-8">{{ keyWord }}</div>
  <div class="pr-8 flex">
    <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"
                (ngModelChange)="searchFormChange(item.key)"
              />
            </nz-form-control>
          </nz-form-item>
        }
        <nz-form-item *nzSpaceItem>
          <nz-form-label>风险类型</nz-form-label>
          <nz-form-control>
            <nz-select
              class="precaution-select"
              nzDropdownClassName="precaution-select-dropdown"
              nzAllowClear
              style="min-width: 144px"
              formControlName="type"
              nzPlaceHolder="请选择风险类型"
              (ngModelChange)="searchFormChange('type')"
            >
              @for (item of types; track item.value) {
                <nz-option [nzValue]="item.id" [nzLabel]="item.value"></nz-option>
              }
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *nzSpaceItem>
          <nz-form-label>风险项</nz-form-label>
          <nz-form-control>
            <nz-select
              class="precaution-select"
              nzDropdownClassName="precaution-select-dropdown"
              nzAllowClear
              style="min-width: 144px"
              formControlName="category"
              nzPlaceHolder="请选择风险项"
              (ngModelChange)="searchFormChange('category')"
            >
              @for (item of categories; track item.value) {
                <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
              }
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-space>
    </form>

    <button class="precaution-secondary ml-2" nz-button (click)="onReset()">重置</button>
    <button class="precaution-button ml-6" nz-button nzType="primary" (click)="handleAdd()">
      <span nz-icon nzType="plus"></span>
      {{ '新增' + keyWord }}
    </button>
  </div>
</div>

<div class="px-6">
  <nz-table
    class="precaution-table"
    #table
    [nzData]="filterList"
    nzShowPagination
    nzPaginationType="small"
    [nzFrontPagination]="false"
    [nzTotal]="pageConfig.total"
    [nzPageIndex]="pageConfig.current + 1"
    (nzPageIndexChange)="onCurrentPageChange($event - 1)"
  >
    <thead>
      <tr>
        <th>设备名称</th>
        <th>风险类型</th>
        <th>风险项</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of table.data">
        <td>{{ data.name }}</td>
        <td>{{ getTypeName(data) }}</td>
        <td>{{ getCategoryName(data) }}</td>
        <td>
          <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>
