<app-page-list (create)="create()" (refresh)="load()" (search)="search($event)" [loading]="loading">

  <nz-table
    nzSize="small"
    [nzData]="datum"
    [nzFrontPagination]="false"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="pageSize"
    [nzPageIndex]="pageIndex"

    (nzQueryParams)="onQuery($event)"
  >
    <thead>
    <tr>
      <th nzColumnKey="id" [nzSortFn]="true">ID</th>
      <th nzColumnKey="username" [nzSortFn]="true">用户名</th>
      <th nzColumnKey="name" [nzSortFn]="true">姓名</th>
      <th nzColumnKey="cellphone">手机号</th>
      <th nzColumnKey="email">邮箱</th>
      <th nzColumnKey="id" [nzSortFn]="true">创建时间</th>
      <th nzWidth="100">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of datum; let i=index" (dblclick)="open(data)">
      <td>{{ data.id }}</td>
      <td>{{data.disabled ? '❌' : ''}}{{ data.username }}</td>
      <td>{{ data.name }}</td>
      <td>{{ data.cellphone }}</td>
      <td>{{ data.email }}</td>
      <td [title]="data.created|dateString">{{data.created | fromNow}}</td>
      <td>
        <a [routerLink]="'/admin/user/detail/'+data.id">详情</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a [routerLink]="'/admin/user/edit/'+data.id">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-dropdown [nzDropdownMenu]="menu" nzTrigger="click">
          更多
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu>
            <li nz-menu-item [nzDisabled]="!data.disabled" (click)="enable(data)">启用</li>
            <li nz-menu-item [nzDisabled]="data.disabled" nz-popconfirm nzPopconfirmTitle="确定禁用？"
                (nzOnConfirm)="disable(data)">禁用
            </li>
            <li nz-menu-item nzDanger nz-popconfirm nzPopconfirmTitle="确定删除？" (nzOnConfirm)="remove(data, i)">删除</li>
          </ul>
        </nz-dropdown-menu>
      </td>
    </tr>
    </tbody>
  </nz-table>


</app-page-list>
