<nz-layout>

  <nz-card>
    <form class="ctx-form-implicit" nz-form [formGroup]="_userSearchForm">
      <div nz-row [nzGutter]="[16, 16]" [style.max-width]="'calc(100% + 16px)'">
        <div nz-col>
          <nz-form-item>
            <nz-form-label>机构</nz-form-label>
            <nz-form-control [nzErrorTip]="controlErrorTemplate">
              <nz-tree-select formControlName="organizationId"
                              nzPlaceHolder="全部机构"
                              [nzDropdownStyle]="{ maxHeight: '360px', overflow: 'auto' }"
                              [nzNodes]="_organizationOptionResource.optionList"
                              nzShowSearch
                              nzDefaultExpandAll></nz-tree-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col>
          <nz-form-item>
            <nz-form-label>模糊查询</nz-form-label>
            <nz-form-control [nzErrorTip]="controlErrorTemplate">
              <nz-select #keywordsInputMultiple
                         formControlName="keywords"
                         nzPlaceHolder="输入任意查询条件"
                         nzMode="tags"
                         [nzDropdownStyle]="{ display: keywordsInputMultiple['searchValue'] ? '': 'none' }"
                         nzAllowClear>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzFlex]="1">
          <nz-form-item [nzGutter]="[8, 8]" nzJustify="end">
            <div nz-col><button nz-button nzType="primary" (click)="_requeryUserList()">查询</button></div>
            <div nz-col><button nz-button (click)="_resetUserSearchForm()">重置</button></div>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-card>

  <nz-content>
    <nz-card class="ctx-card ctx-card-fixed" [nzTitle]="userActionTemplate" [nzExtra]="userExtraActionTemplate">
      <ng-template #userActionTemplate>
        <div nz-row [nzGutter]="[8, 8]">
          <div nz-col><button nz-button nzType="primary" (click)="_createUser()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增</button></div>
        </div>
      </ng-template>
      <ng-template #userExtraActionTemplate>
        <div nz-row>
          <div nz-col><button nz-button nzType="text" title="刷新" (click)="_queryUserList()"><i nz-icon nzType="reload" nzTheme="outline"></i></button></div>
          <div nz-col><button nz-button
                    nzType="text"
                    title="列设置"
                    nz-popover
                    nzPopoverTrigger="click"
                    nzPopoverPlacement="bottomRight"
                    nzPopoverOverlayClassName="ctx-table-setting"
                    [nzPopoverTitle]="userFieldSettingTitleTemplate"
                    [nzPopoverContent]="userFieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></button></div>
        </div>
      </ng-template>
      <nz-table class="ctx-table-fixed"
                #userTable
                nzTableLayout="fixed"
                [nzData]="_userList"
                [nzLoading]="_userLoading"
                [nzLoadingDelay]="500"
                [nzFrontPagination]="false"
                [nzTotal]="_userTotal"
                [nzShowTotal]="tableTotalTemplate"
                [(nzPageIndex)]="_userParams.page"
                (nzPageIndexChange)="_queryUserList()"
                [(nzPageSize)]="_userParams.size"
                (nzPageSizeChange)="_requeryUserList()"
                [nzPageSizeOptions]="[20, 50, 100, 200]">
        <thead>
          <tr>
            <th nzLeft="0px"
                nzShowCheckbox
                [nzChecked]="_userAllChecked"
                [nzIndeterminate]="_userIndeterminate"
                [nzDisabled]="userTable.data.length === 0"
                (nzCheckedChange)="_checkAllUserList($event)"></th>
            <ng-container *ngFor="let field of _userFieldList">
              <th *ngIf="field.visible"
                  [nzShowSort]="!!field.sortKey"
                  [nzSortOrder]="field.sortOrder!"
                  (nzSortOrderChange)="field.sortOrder = $event!; _changeUserFieldSort(field)"
                  nz-resizable
                  nzBounds="window"
                  nzPreview
                  [nzAlign]="field.align!"
                  [nzWidth]="field.width!"
                  (nzResizeEnd)="field.width = $event.width + 'px'">
                <div *ngIf="!field.headTemplate; else field.headTemplate!" nz-typography nzEllipsis>{{ field.name }}</div>
                <nz-resize-handle nzDirection="right"></nz-resize-handle>
              </th>
            </ng-container>
            <th nzRight="0px" nzWidth="100px">操作</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let user of userTable.data">
            <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="_userExtras[user.id].checked" (nzCheckedChange)="_updateUserCheckStatus()"></td>
            <ng-container *ngFor="let field of _userFieldList">
              <td *ngIf="field.visible" [nzAlign]="field.align!">
                <div *ngIf="!field.bodyTemplate; else bodyTemplate"
                     nz-typography
                     [nzEllipsis]="field.ellipsis !== false"
                     [nzEllipsisRows]="field.ellipsisRows! > 0 ? field.ellipsisRows : 1">{{ user | ncProperty:field.key | nzSafeNull:'-' }}</div>
                <ng-template #bodyTemplate>
                  <ng-container *ngTemplateOutlet="field.bodyTemplate!; context: { $implicit: user | ncProperty:field.key, source: user, extra: _userExtras[user.id] }"></ng-container>
                </ng-template>
              </td>
            </ng-container>
            <td nzRight="0px">
              <button class="ctx-btn-link" nz-button nzType="link" (click)="_updateUser(user)">编辑</button>
              <nz-divider nzType="vertical"></nz-divider>
              <button class="ctx-btn-link" nz-button nzType="link" (click)="_deleteUser(user)">删除</button>
            </td>
            <td></td>
          </tr>
        </tbody>
      </nz-table>
    </nz-card>
  </nz-content>

</nz-layout>

<ng-template #userFieldSettingTitleTemplate>
  <div nz-row nzJustify="space-between">
    <div nz-col>列设置</div>
    <div nz-col><a (click)="_resetUserFieldList()">重置</a></div>
  </div>
</ng-template>

<ng-template #userFieldSettingContentTemplate>
  <nz-table #userFieldTable
            [nzData]="_userFieldList"
            [nzBordered]="false"
            [nzFrontPagination]="false"
            [nzShowPagination]="false">
    <tbody cdkDropList (cdkDropListDropped)="_dropUserFieldList($event)">
      <tr *ngFor="let field of userFieldTable.data; let fieldIndex = index;" cdkDrag>
        <td>
          <i nz-icon nzType="fill-plus:drag" nzTheme="outline" title="拖拽调整顺序"></i>
          <label nz-checkbox [(nzChecked)]="field.visible">
            <ng-container *ngIf="!field.headTemplate; else field.headTemplate!">{{ field.name }}</ng-container>
          </label>
        </td>
      </tr>
    </tbody>
  </nz-table>
</ng-template>

<ng-template #timeTemplate let-timeValue>
  <div nz-typography nzEllipsis>{{ timeValue | date:'yyyy-MM-dd HH:mm:ss' | nzSafeNull:'-' }}</div>
</ng-template>

<ng-template #enabledBodyTemplate let-enabled>
  <nz-tag [nzColor]="enabled ? 'success' : 'warning'">{{ enabled ? '有效' : '失效' }}</nz-tag>
</ng-template>

<ng-template #roleListBodyTemplate let-roleList>
  <ng-container *ngIf="roleList.length > 0; else valueEmptyTemplate">
    <nz-tag *ngFor="let role of roleList">{{ role.name }}</nz-tag>
  </ng-container>
</ng-template>

<ng-template #valueEmptyTemplate>-</ng-template>

<ng-template #tableTotalTemplate let-total>共 {{ total }} 条记录</ng-template>

<ng-template #controlErrorTemplate let-control>
  <div *ngFor="let error of control.errors | keyvalue">{{ error.value }}</div>
</ng-template>
