<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 (data of table.data; track $index) {
      <tr>
        <td
          [nzChecked]="checkedIds.has(data.id)"
          [nzLabel]="data.id"
          (nzCheckedChange)="onItemChecked(data.id, $event)"
        ></td>
        <td class="text-nowrap">{{ data.id }}</td>
        <td>{{ data.name }}</td>
        <td>{{ data.company }}</td>
        <td>
          @for (role of transformRolesToLabels(data); track $index) {
            <nz-tag class="rounded" [nzColor]="'blue'">{{ role }}</nz-tag>
          }
        </td>
        <td>{{ getDepartmentName(data.department) }}</td>
        <td>{{ getJobName(data.job) }}</td>

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