<nz-layout>

  <nz-card>
    <form class="ctx-form-implicit" nz-form<% if (hiddenFilterFieldList.length > 0) { %> nc-adaptive-form [ncAdaptive]="_showAll<%= getPascalCase(name) %>Filters"<% } %> [formGroup]="_<%= getCamelCase(name) %>SearchForm">
      <div nz-row [nzGutter]="[16, 16]" [style.max-width]="'calc(100% + 16px)'"><% visibleFilterFieldList.forEach(function(field) { %>
        <div nz-col>
          <nz-form-item>
            <nz-form-label><%= field.name %></nz-form-label>
            <nz-form-control [nzErrorTip]="controlErrorTemplate"><% if (field.controlType === 'select') { %>
              <nz-select <% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %> #<%= getCamelCase(field.key) %>Select
                         <% } %>formControlName="<%= getCamelCase(field.key) %>"
                         nzPlaceHolder="全部<%= field.name %>"<% if (field.optionName) { %>
                         [nzLoading]="_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading"<% } %><% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %>
                         [nzDropdownStyle]="{ display: <%= getCamelCase(field.key) %>Select['searchValue'] && !_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading ? '': 'none' }"<% } %>
                         nzAllowClear
                         nzShowSearch
                         [nzServerSearch]="!!_<%= getCamelCase(field.optionName) %>OptionResource.search"
                         (nzOnSearch)="_<%= getCamelCase(field.optionName) %>OptionResource.search && _<%= getCamelCase(field.optionName) %>OptionResource.search($event)"><% if (field.optionName) { %>
                <nz-option *ngFor="let <%= getCamelCase(field.optionName) %> of _<%= getCamelCase(field.optionName) %>OptionResource.optionList"
                           [nzLabel]="<%= getCamelCase(field.optionName) %>.label || <%= getCamelCase(field.optionName) %>.value"
                           [nzValue]="<%= getCamelCase(field.optionName) %>.value"></nz-option><% } %>
              </nz-select><% } else if (field.controlType === 'selectMultiple') { %>
              <nz-select <% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %> #<%= getCamelCase(field.key) %>Select
                         <% } %>formControlName="<%= getCamelCase(field.key) %>"
                         nzPlaceHolder="全部<%= field.name %>"
                         nzMode="multiple"<% if (field.optionName) { %>
                         [nzLoading]="_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading"<% } %><% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %>
                         [nzDropdownStyle]="{ display: <%= getCamelCase(field.key) %>Select['searchValue'] && !_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading ? '': 'none' }"<% } %>
                         nzAllowClear
                         nzShowArrow
                         nzShowSearch
                         [nzServerSearch]="!!_<%= getCamelCase(field.optionName) %>OptionResource.search"
                         (nzOnSearch)="_<%= getCamelCase(field.optionName) %>OptionResource.search && _<%= getCamelCase(field.optionName) %>OptionResource.search($event)"><% if (field.optionName) { %>
                <nz-option *ngFor="let <%= getCamelCase(field.optionName) %> of _<%= getCamelCase(field.optionName) %>OptionResource.optionList"
                           [nzLabel]="<%= getCamelCase(field.optionName) %>.label || <%= getCamelCase(field.optionName) %>.value"
                           [nzValue]="<%= getCamelCase(field.optionName) %>.value"></nz-option><% } %>
              </nz-select><% } else if (field.controlType === 'switch') { %>
              <nz-select formControlName="<%= getCamelCase(field.key) %>" nzPlaceHolder="全部<%= field.name %>" 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.key) %>" [nzPlaceHolder]="['开始时间', '结束时间']"></nz-range-picker><% } else if (field.controlType === 'datePicker') { %>
              <nz-range-picker formControlName="<%= getCamelCase(field.key) %>" [nzPlaceHolder]="['开始日期', '结束日期']"></nz-range-picker><% } else { %>
              <input nz-input formControlName="<%= getCamelCase(field.key) %>" placeholder="全部<%= field.name %>"><% } %>
            </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 #keywordMultipleInput
                         formControlName="keywords"
                         nzPlaceHolder="输入任意查询条件"
                         nzMode="tags"
                         [nzDropdownStyle]="{ display: keywordMultipleInput['searchValue'] ? '': 'none' }"
                         nzAllowClear></nz-select>
            </nz-form-control>
          </nz-form-item>
        </div><% if (hiddenFilterFieldList.length > 0) { %>
        <ng-container *ngIf="_showAll<%= getPascalCase(name) %>Filters"><% hiddenFilterFieldList.forEach(function(field) { %>
          <div nz-col>
            <nz-form-item>
              <nz-form-label><%= field.name %></nz-form-label>
              <nz-form-control [nzErrorTip]="controlErrorTemplate"><% if (field.controlType === 'select') { %>
                <nz-select <% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %> #<%= getCamelCase(field.key) %>Select
                           <% } %>formControlName="<%= getCamelCase(field.key) %>"
                           nzPlaceHolder="全部<%= field.name %>"<% if (field.optionName) { %>
                           [nzLoading]="_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading"<% } %><% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %>
                           [nzDropdownStyle]="{ display: <%= getCamelCase(field.key) %>Select['searchValue'] && !_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading ? '': 'none' }"<% } %>
                           nzAllowClear
                           nzShowSearch
                           [nzServerSearch]="!!_<%= getCamelCase(field.optionName) %>OptionResource.search"
                           (nzOnSearch)="_<%= getCamelCase(field.optionName) %>OptionResource.search && _<%= getCamelCase(field.optionName) %>OptionResource.search($event)"><% if (field.optionName) { %>
                  <nz-option *ngFor="let <%= getCamelCase(field.optionName) %> of _<%= getCamelCase(field.optionName) %>OptionResource.optionList"
                             [nzLabel]="<%= getCamelCase(field.optionName) %>.label || <%= getCamelCase(field.optionName) %>.value"
                             [nzValue]="<%= getCamelCase(field.optionName) %>.value"></nz-option><% } %>
                </nz-select><% } else if (field.controlType === 'selectMultiple') { %>
                <nz-select <% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %> #<%= getCamelCase(field.key) %>Select
                           <% } %>formControlName="<%= getCamelCase(field.key) %>"
                           nzPlaceHolder="全部<%= field.name %>"
                           nzMode="multiple"<% if (field.optionName) { %>
                           [nzLoading]="_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading"<% } %><% if (field.optionUrl && field.optionUrl.slice(0, 6) === 'search') { %>
                           [nzDropdownStyle]="{ display: <%= getCamelCase(field.key) %>Select['searchValue'] && !_<%= getCamelCase(field.optionName) %>OptionResource.optionLoading ? '': 'none' }"<% } %>
                           nzAllowClear
                           nzShowArrow
                           nzShowSearch
                           [nzServerSearch]="!!_<%= getCamelCase(field.optionName) %>OptionResource.search"
                           (nzOnSearch)="_<%= getCamelCase(field.optionName) %>OptionResource.search && _<%= getCamelCase(field.optionName) %>OptionResource.search($event)"><% if (field.optionName) { %>
                  <nz-option *ngFor="let <%= getCamelCase(field.optionName) %> of _<%= getCamelCase(field.optionName) %>OptionResource.optionList"
                             [nzLabel]="<%= getCamelCase(field.optionName) %>.label || <%= getCamelCase(field.optionName) %>.value"
                             [nzValue]="<%= getCamelCase(field.optionName) %>.value"></nz-option><% } %>
                </nz-select><% } else if (field.controlType === 'switch') { %>
                <nz-select formControlName="<%= getCamelCase(field.key) %>" nzPlaceHolder="全部<%= field.name %>" 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.key) %>" [nzPlaceHolder]="['开始时间', '结束时间']"></nz-range-picker><% } else if (field.controlType === 'datePicker') { %>
                <nz-range-picker formControlName="<%= getCamelCase(field.key) %>" [nzPlaceHolder]="['开始日期', '结束日期']"></nz-range-picker><% } else { %>
                <input nz-input formControlName="<%= getCamelCase(field.key) %>" placeholder="全部<%= field.name %>"><% } %>
              </nz-form-control>
            </nz-form-item>
          </div><% }) %>
        </ng-container><% } %>
        <div nz-col [nzFlex]="1">
          <nz-form-item [nzGutter]="[8, 8]" nzJustify="end">
            <div nz-col><button nz-button nzType="primary" (click)="_requery<%= getPascalCase(name) %>List()">查询</button></div>
            <div nz-col><button nz-button (click)="_reset<%= getPascalCase(name) %>SearchForm()">重置</button></div><% if (hiddenFilterFieldList.length > 0) { %>
            <div nz-col>
              <button 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>
              </button>
            </div><% } %>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-card>

  <nz-content>
    <nz-card class="ctx-card ctx-card-fixed" [nzTitle]="<%= getCamelCase(name) %>ActionTemplate" [nzExtra]="<%= getCamelCase(name) %>ExtraActionTemplate">
      <ng-template #<%= getCamelCase(name) %>ActionTemplate>
        <div nz-row [nzGutter]="[8, 8]">
          <div nz-col><button nz-button nzType="primary" (click)="_create<%= getPascalCase(name) %>()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增</button></div>
        </div>
      </ng-template>
      <ng-template #<%= getCamelCase(name) %>ExtraActionTemplate>
        <div nz-row>
          <div nz-col><button nz-button nzType="text" title="刷新" (click)="_query<%= getPascalCase(name) %>List()"><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]="<%= getCamelCase(name) %>FieldSettingTitleTemplate"
                    [nzPopoverContent]="<%= getCamelCase(name) %>FieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></button></div>
        </div>
      </ng-template>
      <nz-table class="ctx-table-fixed"
                #<%= 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'">
                <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 <%= 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!">
                <div *ngIf="!field.bodyTemplate; else bodyTemplate"
                     nz-typography
                     [nzEllipsis]="field.ellipsis !== false"
                     [nzEllipsisRows]="field.ellipsisRows! > 0 ? field.ellipsisRows : 1">{{ <%= getCamelCase(name) %> | ncProperty:field.key | nzSafeNull:'-' }}</div>
                <ng-template #bodyTemplate>
                  <ng-container *ngTemplateOutlet="field.bodyTemplate!; context: { $implicit: <%= getCamelCase(name) %> | ncProperty:field.key, source: <%= getCamelCase(name) %>, extra: _<%= getCamelCase(name) %>Extras[<%= getCamelCase(name) %>.id] }"></ng-container>
                </ng-template>
              </td>
            </ng-container>
            <td nzRight="0px">
              <button class="ctx-btn-link" nz-button nzType="link" (click)="_update<%= getPascalCase(name) %>(<%= getCamelCase(name) %>)">编辑</button>
              <nz-divider nzType="vertical"></nz-divider>
              <button class="ctx-btn-link" nz-button nzType="link" (click)="_delete<%= getPascalCase(name) %>(<%= getCamelCase(name) %>)">删除</button>
            </td>
            <td></td>
          </tr>
        </tbody>
      </nz-table>
    </nz-card>
  </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.headTemplate; else field.headTemplate!">{{ field.name }}</ng-container>
          </label>
        </td>
      </tr>
    </tbody>
  </nz-table>
</ng-template>

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

<ng-template #numberTemplate let-numberValue>
  <div nz-typography nzEllipsis>{{ numberValue | number:'1.0-3' | nzSafeNull:'-' }}</div>
</ng-template><% } %><% if (switchFieldList.length > 0) { %>

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

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