<nz-table
  class="precaution-table"
  #table
  [nzData]="list"
  nzShowPagination
  nzPaginationType="small"
  [nzFrontPagination]="false"
  [nzTotal]="pageConfig.total"
  [nzPageIndex]="pageConfig.page + 1"
  (nzPageIndexChange)="onCurrentPageChange($event - 1)"
>
  <thead>
    <tr>
      <th
        [nzChecked]="checkCurrentPageAll"
        [nzIndeterminate]="indeterminate"
        nzLabel="Select all"
        (nzCheckedChange)="onAllChecked($event)"
      ></th>
      <th>工号</th>
      <th>姓名</th>
      <th>公司</th>
      <th>角色</th>
      <th>部门（班组）</th>
      <th>岗位</th>
      <th class="text-nowrap">用户状态</th>
      <!-- <th>登录时间</th>
      <th>创建时间</th> -->
      <th nzWidth="100px">操作</th>
    </tr>
  </thead>
  <tbody>
    @for (row of table.data; track $index) {
      <tr>
        <td
          [nzChecked]="checkedIds.has(row.id)"
          [nzLabel]="row.id"
          (nzCheckedChange)="onItemChecked(row.id, $event)"
        ></td>
        <td class="text-nowrap">{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.company }}</td>
        <td>
          @for (role of transformRolesToLabels(row); track $index) {
            <nz-tag class="rounded" [nzColor]="'blue'">{{ role }}</nz-tag>
          }
        </td>
        <td>
          <span>{{ getDepartmentTeamName(row) }}</span>
        </td>
        <td>{{ getJobName(row.job) }}</td>

        <td>
          <nz-tag class="rounded" [nzColor]="row.status === 0 ? 'green' : 'red'">{{
            getStatusText(row.status)
          }}</nz-tag>
        </td>
        <td class="text-nowrap">
          @if (editable(row)) {
            <button class="precaution-button px-4 mr-2" nz-button nzSize="small" nzType="primary" (click)="onEdit(row)">
              编辑
            </button>
          }
          <!-- @if (modifyRolesAble(row)) {
            <button
              class="precaution-button px-2 mr-2"
              nz-button
              nzSize="small"
              nzType="primary"
              (click)="onModifyRoles(row)"
            >
              修改角色
            </button>
          } -->
          @if (deleteAble(row)) {
            <button class="precaution-secondary px-4" nz-button nzSize="small" nzType="primary" (click)="onDelete(row)">
              删除
            </button>
          }
        </td>
      </tr>
    }
  </tbody>
</nz-table>
