<nz-layout>

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

  <nz-content>
    <nz-layout>

      <nz-card>
        <form class="ctx-form-implicit" nz-form [formGroup]="_localFileSearchForm">
          <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">
                  <input nz-input formControlName="entityGuid" placeholder="全部实体编码">
                </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)="_requeryLocalFileList()">查询</button></div>
                <div nz-col><button nz-button (click)="_resetLocalFileSearchForm()">重置</button></div>
              </nz-form-item>
            </div>
          </div>
        </form>
      </nz-card>

      <nz-content>
        <nz-card class="ctx-card ctx-card-fixed" [nzTitle]="localFileActionTemplate" [nzExtra]="localFileExtraActionTemplate">
          <ng-template #localFileActionTemplate></ng-template>
          <ng-template #localFileExtraActionTemplate>
            <div nz-row>
              <div nz-col><button nz-button nzType="text" title="刷新" (click)="_queryLocalFileList()"><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]="localFileFieldSettingTitleTemplate"
                        [nzPopoverContent]="localFileFieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></button></div>
            </div>
          </ng-template>
          <nz-table class="ctx-table-fixed"
                    #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'">
                    <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 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!">
                    <div *ngIf="!field.bodyTemplate; else bodyTemplate"
                         nz-typography
                         [nzEllipsis]="field.ellipsis !== false"
                         [nzEllipsisRows]="field.ellipsisRows! > 0 ? field.ellipsisRows : 1">{{ localFile | ncProperty:field.key | nzSafeNull:'-' }}</div>
                    <ng-template #bodyTemplate>
                      <ng-container *ngTemplateOutlet="field.bodyTemplate!; context: { $implicit: localFile | ncProperty:field.key, source: localFile, extra: _localFileExtras[localFile.id] }"></ng-container>
                    </ng-template>
                  </td>
                </ng-container>
                <td nzRight="0px">
                  <a [href]="localFile.id | ncFileUrl" target="_blank">下载</a>
                  <nz-divider nzType="vertical"></nz-divider>
                  <button class="ctx-btn-link" nz-button nzType="link" (click)="_deleteLocalFile(localFile)">删除</button>
                </td>
                <td></td>
              </tr>
            </tbody>
          </nz-table>
        </nz-card>
      </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.headTemplate; else field.headTemplate!">{{ field.name }}</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 #timeTemplate let-timeValue>
  <div nz-typography nzEllipsis>{{ timeValue | date:'yyyy-MM-dd HH:mm:ss' | nzSafeNull:'-' }}</div>
</ng-template>

<ng-template #sizeBodyTemplate let-size>
  <div nz-typography nzEllipsis>{{ size | nzBytes | nzSafeNull:'-' }}</div>
</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>
