<nz-layout>

  <nz-sider>
    <nz-spin [nzSpinning]="_folderLoading" [nzDelay]="500">
      <nz-tree *ngIf="_folderTreeNodeOptionList.length > 0; else emptyTemplate" [nzData]="_folderTreeNodeOptionList" nzShowLine (nzClick)="_changeLocalFileFolder($event)"></nz-tree>
    </nz-spin>
  </nz-sider>

  <nz-content>
    <nz-layout>

      <div class="ctx-search-bar">
        <form nz-form [formGroup]="_localFileSearchForm">
          <nz-form-item>
            <nz-form-label>实体编码</nz-form-label>
            <nz-form-control [nzErrorTip]="controlErrorTemplate">
              <input nz-input formControlName="entityGuid" placeholder="全部实体编码">
            </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>
          <div class="ctx-search-actions">
            <div class="ctx-search-action-item"><button nz-button nzType="primary" (click)="_requeryLocalFileList()"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button></div>
            <div class="ctx-search-action-item"><button nz-button (click)="_resetLocalFileSearchForm()"><i nz-icon nzType="rest" nzTheme="outline"></i>重置</button></div>
          </div>
        </form>
      </div>

      <div class="ctx-list-action-bar">
        <div class="ctx-actions"></div>
        <div class="ctx-extra-actions">
          <div class="ctx-action-item"><a nz-button nzType="text" title="刷新" (click)="_queryLocalFileList()"><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]="localFileFieldSettingTitleTemplate"
              [nzPopoverContent]="localFileFieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></a>
          </div>
        </div>
      </div>

      <nz-content>
        <nz-table #localFileTable
          nzTableLayout="fixed"
          [nzData]="_localFileList"
          [nzLoading]="_localFileLoading"
          [nzLoadingDelay]="500"
          [nzFrontPagination]="false"
          [nzTotal]="_localFileTotal"
          [nzShowTotal]="tableTotalTemplate"
          [(nzPageIndex)]="_localFileParams.page"
          (nzPageIndexChange)="_queryLocalFileList()"
          [(nzPageSize)]="_localFileParams.size"
          (nzPageSizeChange)="_requeryLocalFileList()"
          [nzPageSizeOptions]="[20, 50, 100, 200]">
          <thead>
            <tr>
              <th nzLeft="0px"
                nzShowCheckbox
                [nzChecked]="_localFileAllChecked"
                [nzIndeterminate]="_localFileIndeterminate"
                [nzDisabled]="localFileTable.data.length === 0"
                (nzCheckedChange)="_checkAllLocalFileList($event)"></th>
              <ng-container *ngFor="let field of _localFileFieldList">
                <th *ngIf="field.visible"
                  [nzShowSort]="!!field.sortKey"
                  [nzSortOrder]="field.sortOrder!"
                  (nzSortOrderChange)="field.sortOrder = $event!; _changeLocalFileFieldSort(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 localFile of localFileTable.data">
              <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="_localFileExtras[localFile.id].checked" (nzCheckedChange)="_updateLocalFileCheckStatus()"></td>
              <ng-container *ngFor="let field of _localFileFieldList">
                <td *ngIf="field.visible" [nzAlign]="field.align!">
                  <ng-container *ngIf="!field.contentTemplate; else contentTemplate">{{ localFile[field.name] || '-' }}</ng-container>
                  <ng-template #contentTemplate>
                    <ng-container *ngTemplateOutlet="field.contentTemplate!; context: { $implicit: localFile[field.name], source: localFile, extra: _localFileExtras[localFile.id] }"></ng-container>
                  </ng-template>
                </td>
              </ng-container>
              <td nzRight="0px">
                <a (click)="_downloadLocalFile(localFile)">下载</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="_deleteLocalFile(localFile)">删除</a>
              </td>
              <td></td>
            </tr>
          </tbody>
        </nz-table>
      </nz-content>

    </nz-layout>
  </nz-content>

</nz-layout>

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

<ng-template #localFileFieldSettingContentTemplate>
  <nz-table #localFileFieldTable [nzData]="_localFileFieldList" [nzBordered]="false" [nzFrontPagination]="false" [nzShowPagination]="false">
    <tbody cdkDropList (cdkDropListDropped)="_dropLocalFileFieldList($event)">
      <tr *ngFor="let field of localFileFieldTable.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 #emptyTemplate>
  <nz-empty class="ant-empty-small" nzNotFoundImage="simple"></nz-empty>
</ng-template>

<ng-template #titleTemplate let-title let-localFile="source">
  <a (click)="_downloadLocalFile(localFile)">{{ title }}</a>
</ng-template>

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

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