<nz-layout>

  <div class="ctx-search-bar">
    <form nz-form [formGroup]="_menuSearchForm">
      <nz-form-item>
        <nz-form-label nzRequired>应用</nz-form-label>
        <nz-form-control [nzErrorTip]="controlErrorTemplate">
          <nz-select formControlName="applicationCode"
            nzPlaceHolder="请选择应用"
            [nzLoading]="_applicationLoading"
            nzAllowClear
            nzShowSearch>
            <nz-option *ngFor="let application of _applicationList" [nzLabel]="application.name" [nzValue]="application.code"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <div class="ctx-search-actions">
        <div class="ctx-search-action-item"><button nz-button nzType="primary" (click)="_requeryMenuList()"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button></div>
        <div class="ctx-search-action-item"><button nz-button (click)="_resetMenuSearchForm()"><i nz-icon nzType="rest" nzTheme="outline"></i>重置</button></div>
      </div>
    </form>
  </div>

  <div class="ctx-list-action-bar">
    <div class="ctx-actions">
      <div class="ctx-action-item">
        <button nz-button
          nzType="primary"
          [disabled]="!!_createMenuHint"
          [title]="_createMenuHint || ''"
          (click)="_createMenu()"><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)="_expandMenuList()"><i nz-icon nzType="double-right" nzTheme="outline" [nzRotate]="90"></i></a></div>
      <div class="ctx-action-item"><a nz-button nzType="text" title="折叠" (click)="_collapseMenuList()"><i nz-icon nzType="double-left" nzTheme="outline" [nzRotate]="90"></i></a></div>
      <div class="ctx-action-item"><a nz-button nzType="text" title="刷新" (click)="_queryMenuList()"><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]="menuFieldSettingTitleTemplate"
          [nzPopoverContent]="menuFieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></a>
      </div>
    </div>
  </div>

  <nz-content>
    <nz-table #menuTable
      nzTableLayout="fixed"
      [nzData]="_menuTreeNodeList"
      [nzLoading]="_menuLoading"
      [nzLoadingDelay]="500"
      [nzFrontPagination]="false"
      [nzShowPagination]="false">
      <thead>
        <tr>
          <th nzLeft="0px"
            nzShowCheckbox
            [nzChecked]="_menuAllChecked"
            [nzIndeterminate]="_menuIndeterminate"
            [nzDisabled]="menuTable.data.length === 0"
            (nzCheckedChange)="_checkAllMenuList($event)"></th>
          <ng-container *ngFor="let field of _menuFieldList">
            <th *ngIf="field.visible"
              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>
        <ng-container *ngTemplateOutlet="menuTreeNodeListTemplate; context: { menuTreeNodeList: menuTable.data }"></ng-container>
        <ng-template #menuTreeNodeListTemplate let-menuTreeNodeList="menuTreeNodeList">
          <ng-container *ngFor="let menuTreeNode of menuTreeNodeList">
            <tr>
              <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="_menuExtras[menuTreeNode.source.id].checked" (nzCheckedChange)="_updateMenuCheckStatus()"></td>
              <ng-container *ngFor="let field of _menuFieldList">
                <td *ngIf="field.visible" [nzAlign]="field.align!">
                  <ng-container *ngIf="!field.contentTemplate; else contentTemplate">{{ menuTreeNode.source[field.name] || '-' }}</ng-container>
                  <ng-template #contentTemplate>
                    <ng-container *ngTemplateOutlet="field.contentTemplate!; context: { $implicit: menuTreeNode.source[field.name], source: menuTreeNode, extra: _menuExtras[menuTreeNode.source.id] }"></ng-container>
                  </ng-template>
                </td>
              </ng-container>
              <td nzRight="0px">
                <a (click)="_updateMenu(menuTreeNode.source)">编辑</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="_deleteMenu(menuTreeNode.source)">删除</a>
              </td>
              <td></td>
            </tr>
            <ng-container *ngIf="menuTreeNode.children && menuTreeNode.expand">
              <ng-container *ngTemplateOutlet="menuTreeNodeListTemplate; context: { menuTreeNodeList: menuTreeNode.children }"></ng-container>
            </ng-container>
          </ng-container>
        </ng-template>
      </tbody>
    </nz-table>
  </nz-content>

</nz-layout>

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

<ng-template #menuFieldSettingContentTemplate>
  <nz-table #menuFieldTable [nzData]="_menuFieldList" [nzBordered]="false" [nzFrontPagination]="false" [nzShowPagination]="false">
    <tbody cdkDropList (cdkDropListDropped)="_dropMenuFieldList($event)">
      <tr *ngFor="let field of menuFieldTable.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 #titleTemplate let-title let-menuTreeNode="source">
  <div class="ctx-table-tree-switcher" [style.paddingLeft]="menuTreeNode.level * 20 + 'px'">
    <a *ngIf="menuTreeNode.children; else childContentTemplate" (click)="menuTreeNode.expand = !menuTreeNode.expand">
      <i nz-icon nzType="caret-right" nzTheme="outline" [nzRotate]="menuTreeNode.expand ? 90 : 0"></i>
      <i *ngIf="menuTreeNode.source.icon" nz-icon [nzType]="menuTreeNode.source.icon"></i>{{ title }}
    </a>
    <ng-template #childContentTemplate>
      <i nz-icon nzType="caret-right" nzTheme="outline" [style.visibility]="'hidden'"></i>
      <i *ngIf="menuTreeNode.source.icon" nz-icon [nzType]="menuTreeNode.source.icon"></i>{{ title }}
    </ng-template>
  </div>
</ng-template>

<ng-template #numberContentTemplate let-numberValue>{{ (numberValue | number:'1.0-3') || '-' }}</ng-template>

<ng-template #visibleTemplate let-visible>
  <nz-tag [nzColor]="visible ? 'success' : 'warning'">{{ visible ? '显示' : '隐藏' }}</nz-tag>
</ng-template>

<ng-template #timeTemplate let-time>{{ (time | date:'yyyy-MM-dd HH:mm:ss') || '-' }}</ng-template>

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