<nz-layout>

  <div class="ctx-search-bar">
    <form nz-form<% if (hiddenFilterFieldList.length > 0) { %> nc-adaptive-form [ncAdaptive]="_showAll<%= getPascalCase(name) %>Filters"<% } %> [formGroup]="_<%= getCamelCase(name) %>SearchForm"><% visibleFilterFieldList.forEach(function(field) { %>
      <nz-form-item>
        <nz-form-label><%= field.description %></nz-form-label>
        <nz-form-control [nzErrorTip]="controlErrorTemplate"><% if (field.controlType === 'select') { %>
          <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>"<% if (field.dictCode) { %> [nzLoading]="_<%= getCamelCase(field.dictCode) %>Loading"<% } %> nzAllowClear nzShowSearch><% if (field.dictCode) { %>
            <nz-option *ngFor="let <%= getCamelCase(field.dictCode) %> of _<%= getCamelCase(field.dictCode) %>List" [nzLabel]="<%= getCamelCase(field.dictCode) %>.label" [nzValue]="<%= getCamelCase(field.dictCode) %>.value"></nz-option><% } %>
          </nz-select><% } else if (field.controlType === 'selectMultiple') { %>
          <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>" nzMode="multiple" nzAllowClear nzShowSearch><% if (field.dictCode) { %>
            <nz-option *ngFor="let <%= getCamelCase(field.dictCode) %> of _<%= getCamelCase(field.dictCode) %>List" [nzLabel]="<%= getCamelCase(field.dictCode) %>.label" [nzValue]="<%= getCamelCase(field.dictCode) %>.value"></nz-option><% } %>
          </nz-select><% } else if (field.controlType === 'switch') { %>
          <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>" nzAllowClear nzShowSearch>
            <nz-option nzLabel="是" [nzValue]="true"></nz-option>
            <nz-option nzLabel="否" [nzValue]="false"></nz-option>
          </nz-select><% } else if (field.controlType === 'datetimePicker') { %>
          <nz-range-picker formControlName="<%= getCamelCase(field.name) %>" [nzPlaceHolder]="['开始时间', '结束时间']"></nz-range-picker><% } else if (field.controlType === 'datePicker') { %>
          <nz-range-picker formControlName="<%= getCamelCase(field.name) %>" [nzPlaceHolder]="['开始日期', '结束日期']"></nz-range-picker><% } else { %>
          <input nz-input formControlName="<%= getCamelCase(field.name) %>" placeholder="全部<%= field.description %>"><% } %>
        </nz-form-control>
      </nz-form-item><% }) %>
      <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><% if (hiddenFilterFieldList.length > 0) { %>
      <ng-container *ngIf="_showAll<%= getPascalCase(name) %>Filters"><% hiddenFilterFieldList.forEach(function(field) { %>
        <nz-form-item>
          <nz-form-label><%= field.description %></nz-form-label>
          <nz-form-control [nzErrorTip]="controlErrorTemplate"><% if (field.controlType === 'select') { %>
            <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>"<% if (field.dictCode) { %> [nzLoading]="_<%= getCamelCase(field.dictCode) %>Loading"<% } %> nzAllowClear nzShowSearch><% if (field.dictCode) { %>
              <nz-option *ngFor="let <%= getCamelCase(field.dictCode) %> of _<%= getCamelCase(field.dictCode) %>List" [nzLabel]="<%= getCamelCase(field.dictCode) %>.label" [nzValue]="<%= getCamelCase(field.dictCode) %>.value"></nz-option><% } %>
            </nz-select><% } else if (field.controlType === 'selectMultiple') { %>
            <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>" nzMode="multiple"<% if (field.dictCode) { %> [nzLoading]="_<%= getCamelCase(field.dictCode) %>Loading"<% } %> nzAllowClear nzShowSearch><% if (field.dictCode) { %>
              <nz-option *ngFor="let <%= getCamelCase(field.dictCode) %> of _<%= getCamelCase(field.dictCode) %>List" [nzLabel]="<%= getCamelCase(field.dictCode) %>.label" [nzValue]="<%= getCamelCase(field.dictCode) %>.value"></nz-option><% } %>
            </nz-select><% } else if (field.controlType === 'switch') { %>
            <nz-select formControlName="<%= getCamelCase(field.name) %>" nzPlaceHolder="全部<%= field.description %>" nzAllowClear nzShowSearch>
              <nz-option nzLabel="是" [nzValue]="true"></nz-option>
              <nz-option nzLabel="否" [nzValue]="false"></nz-option>
            </nz-select><% } else if (field.controlType === 'datetimePicker') { %>
            <nz-range-picker formControlName="<%= getCamelCase(field.name) %>" [nzPlaceHolder]="['开始时间', '结束时间']"></nz-range-picker><% } else if (field.controlType === 'datePicker') { %>
            <nz-range-picker formControlName="<%= getCamelCase(field.name) %>" [nzPlaceHolder]="['开始日期', '结束日期']"></nz-range-picker><% } else { %>
            <input nz-input formControlName="<%= getCamelCase(field.name) %>" placeholder="全部<%= field.description %>"><% } %>
          </nz-form-control>
        </nz-form-item><% }) %>
      </ng-container><% } %>
      <div class="ctx-search-actions">
        <div class="ctx-search-action-item"><button nz-button nzType="primary" (click)="_requery<%= getPascalCase(name) %>List()"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button></div>
        <div class="ctx-search-action-item"><button nz-button (click)="_reset<%= getPascalCase(name) %>SearchForm()"><i nz-icon nzType="rest" nzTheme="outline"></i>重置</button></div><% if (hiddenFilterFieldList.length > 0) { %>
        <div class="ctx-search-action-item">
          <a nz-button nzType="link" (click)="_showAll<%= getPascalCase(name) %>Filters = !_showAll<%= getPascalCase(name) %>Filters">
            更多<i nz-icon nzType="down" nzTheme="outline" [nzRotate]="_showAll<%= getPascalCase(name) %>Filters ? 180 : 0" [style.marginLeft]="'2px'"></i>
          </a>
        </div><% } %>
      </div>
    </form>
  </div>

  <div class="ctx-list-action-bar">
    <div class="ctx-actions">
      <div class="ctx-action-item"><button nz-button nzType="primary" (click)="_create<%= getPascalCase(name) %>()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增</button></div>
    </div>
    <div class="ctx-extra-actions">
      <div class="ctx-action-item"><a nz-button nzType="text" title="刷新" (click)="_query<%= getPascalCase(name) %>List()"><i nz-icon nzType="reload" nzTheme="outline"></i></a></div>
      <div class="ctx-action-item"><a nz-button
          nzType="text"
          title="列设置"
          nz-popover
          nzPopoverTrigger="click"
          nzPopoverPlacement="bottomRight"
          nzPopoverOverlayClassName="ctx-table-setting"
          [nzPopoverTitle]="<%= getCamelCase(name) %>FieldSettingTitleTemplate"
          [nzPopoverContent]="<%= getCamelCase(name) %>FieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></a>
      </div>
    </div>
  </div>

  <nz-content>
    <nz-table #<%= getCamelCase(name) %>Table
      nzTableLayout="fixed"
      [nzData]="_<%= getCamelCase(name) %>List"
      [nzLoading]="_<%= getCamelCase(name) %>Loading"
      [nzLoadingDelay]="500"
      [nzFrontPagination]="false"<% if (pagination) { %>
      [nzTotal]="_<%= getCamelCase(name) %>Total"
      [nzShowTotal]="tableTotalTemplate"
      [(nzPageIndex)]="_<%= getCamelCase(name) %>Params.page"
      (nzPageIndexChange)="_query<%= getPascalCase(name) %>List()"
      [(nzPageSize)]="_<%= getCamelCase(name) %>Params.size"
      (nzPageSizeChange)="_requery<%= getPascalCase(name) %>List()"
      [nzPageSizeOptions]="[20, 50, 100, 200]"><% } else { %>
      [nzShowPagination]="false"><% } %>
      <thead>
        <tr>
          <th nzLeft="0px"
            nzShowCheckbox
            [nzChecked]="_<%= getCamelCase(name) %>AllChecked"
            [nzIndeterminate]="_<%= getCamelCase(name) %>Indeterminate"
            [nzDisabled]="<%= getCamelCase(name) %>Table.data.length === 0"
            (nzCheckedChange)="_checkAll<%= getPascalCase(name) %>List($event)"></th>
          <ng-container *ngFor="let field of _<%= getCamelCase(name) %>FieldList">
            <th *ngIf="field.visible"<% if (pagination) { %>
              [nzShowSort]="!!field.sortKey"
              [nzSortOrder]="field.sortOrder!"
              (nzSortOrderChange)="field.sortOrder = $event; _change<%= getPascalCase(name) %>FieldSort(field)"<% } %>
              nz-resizable
              nzBounds="window"
              nzPreview
              [nzAlign]="field.align!"
              [nzWidth]="field.width!"
              (nzResizeEnd)="field.width = $event.width + 'px'">
              <ng-container *ngIf="!field.titleTemplate; else field.titleTemplate!">{{ field.description }}</ng-container>
              <nz-resize-handle nzDirection="right"></nz-resize-handle>
            </th>
          </ng-container>
          <th nzRight="0px" nzWidth="160px">操作</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let <%= getCamelCase(name) %> of <%= getCamelCase(name) %>Table.data">
          <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="_<%= getCamelCase(name) %>Extras[<%= getCamelCase(name) %>.id].checked" (nzCheckedChange)="_update<%= getPascalCase(name) %>CheckStatus()"></td>
          <ng-container *ngFor="let field of _<%= getCamelCase(name) %>FieldList">
            <td *ngIf="field.visible" [nzAlign]="field.align!">
              <ng-container *ngIf="!field.contentTemplate; else contentTemplate">{{ <%= getCamelCase(name) %>[field.name] || '-' }}</ng-container>
              <ng-template #contentTemplate>
                <ng-container *ngTemplateOutlet="field.contentTemplate!; context: { $implicit: <%= getCamelCase(name) %>[field.name], source: <%= getCamelCase(name) %>, extra: _<%= getCamelCase(name) %>Extras[<%= getCamelCase(name) %>.id] }"></ng-container>
              </ng-template>
            </td>
          </ng-container>
          <td nzRight="0px">
            <a (click)="_update<%= getPascalCase(name) %>(<%= getCamelCase(name) %>)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="_delete<%= getPascalCase(name) %>(<%= getCamelCase(name) %>)">删除</a>
          </td>
          <td></td>
        </tr>
      </tbody>
    </nz-table>
  </nz-content>

</nz-layout>

<ng-template #<%= getCamelCase(name) %>FieldSettingTitleTemplate>
  <div nz-row nzJustify="space-between">
    <div nz-col>列设置</div>
    <div nz-col><a (click)="_reset<%= getPascalCase(name) %>FieldList()">重置</a></div>
  </div>
</ng-template>

<ng-template #<%= getCamelCase(name) %>FieldSettingContentTemplate>
  <nz-table #<%= getCamelCase(name) %>FieldTable [nzData]="_<%= getCamelCase(name) %>FieldList" [nzBordered]="false" [nzFrontPagination]="false" [nzShowPagination]="false">
    <tbody cdkDropList (cdkDropListDropped)="_drop<%= getPascalCase(name) %>FieldList($event)">
      <tr *ngFor="let field of <%= getCamelCase(name) %>FieldTable.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.titleTemplate; else field.titleTemplate!">{{ field.description }}</ng-container>
          </label>
        </td>
      </tr>
    </tbody>
  </nz-table>
</ng-template>

<ng-template #titleContentTemplate let-title let-<%= getCamelCase(name) %>="source">
  <a [routerLink]="<%= getCamelCase(name) %>.id">{{ title }}</a>
</ng-template><% if (inputNumberFieldList.length > 0) { %>

<ng-template #numberContentTemplate let-numberValue>{{ (numberValue | number:'1.0-3') || '-' }}</ng-template><% } %><% if (switchFieldList.length > 0) { %>

<ng-template #booleanContentTemplate let-booleanValue>{{ booleanValue === true ? '是' : booleanValue === false ? '否' : '-' }}</ng-template><% } %><% if (datetimePickerFieldList.length > 0) { %>

<ng-template #timeContentTemplate let-timeValue>{{ (timeValue | date:'yyyy-MM-dd HH:mm:ss') || '-' }}</ng-template><% } %><% if (pagination) { %>

<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>
