<nz-layout>

  <div class="ctx-search-bar">
    <form nz-form [formGroup]="_systemMessageSearchForm">
      <nz-form-item>
        <nz-form-label>已读状态</nz-form-label>
        <nz-form-control [nzErrorTip]="controlErrorTemplate">
          <nz-select formControlName="read" nzPlaceHolder="全部已读状态" nzAllowClear nzShowSearch>
            <nz-option nzLabel="已读" [nzValue]="true"></nz-option>
            <nz-option nzLabel="未读" [nzValue]="false"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label>发送时间</nz-form-label>
        <nz-form-control [nzErrorTip]="controlErrorTemplate">
          <nz-range-picker formControlName="sendTime" [nzPlaceHolder]="['开始时间', '结束时间']"></nz-range-picker>
        </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)="_requerySystemMessageList()"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button></div>
        <div class="ctx-search-action-item"><button nz-button (click)="_resetSystemMessageSearchForm()"><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
          [title]="_markSystemMessageAsReadHint || ''"
          [disabled]="!!_markSystemMessageAsReadHint"
          [nzLoading]="_markSystemMessageAsReadLoading"
          (click)="_markSystemMessageAsRead()"><i nz-icon nzType="read" nzTheme="outline"></i>标记已读</button></div>
    </div>
    <div class="ctx-extra-actions">
      <div class="ctx-action-item"><a nz-button nzType="text" title="刷新" (click)="_querySystemMessageList()"><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]="systemMessageFieldSettingTitleTemplate"
          [nzPopoverContent]="systemMessageFieldSettingContentTemplate"><i nz-icon nzType="setting" nzTheme="outline"></i></a>
      </div>
    </div>
  </div>

  <nz-content>
    <nz-table #systemMessageTable
      nzTableLayout="fixed"
      [nzData]="_systemMessageList"
      [nzLoading]="_systemMessageLoading"
      [nzLoadingDelay]="500"
      [nzFrontPagination]="false"
      [nzTotal]="_systemMessageTotal"
      [nzShowTotal]="tableTotalTemplate"
      [(nzPageIndex)]="_systemMessageParams.page"
      (nzPageIndexChange)="_querySystemMessageList()"
      [(nzPageSize)]="_systemMessageParams.size"
      (nzPageSizeChange)="_requerySystemMessageList()"
      [nzPageSizeOptions]="[20, 50, 100, 200]">
      <thead>
        <tr>
          <th nzLeft="0px"
            nzShowCheckbox
            [nzChecked]="_systemMessageAllChecked"
            [nzIndeterminate]="_systemMessageIndeterminate"
            [nzDisabled]="systemMessageTable.data.length === 0"
            (nzCheckedChange)="_checkAllSystemMessageList($event)"></th>
          <ng-container *ngFor="let field of _systemMessageFieldList">
            <th *ngIf="field.visible"
              [nzShowSort]="!!field.sortKey"
              [nzSortOrder]="field.sortOrder!"
              (nzSortOrderChange)="field.sortOrder = $event!; _changeSystemMessageFieldSort(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></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let systemMessage of systemMessageTable.data">
          <td nzLeft="0px" nzShowCheckbox [(nzChecked)]="_systemMessageExtras[systemMessage.id].checked" (nzCheckedChange)="_updateSystemMessageCheckStatus()"></td>
          <ng-container *ngFor="let field of _systemMessageFieldList">
            <td *ngIf="field.visible" [nzAlign]="field.align!">
              <ng-container *ngIf="!field.contentTemplate; else contentTemplate">{{ systemMessage[field.name] || '-' }}</ng-container>
              <ng-template #contentTemplate>
                <ng-container *ngTemplateOutlet="field.contentTemplate!; context: { $implicit: systemMessage[field.name], source: systemMessage, extra: _systemMessageExtras[systemMessage.id] }"></ng-container>
              </ng-template>
            </td>
          </ng-container>
          <td></td>
        </tr>
      </tbody>
    </nz-table>
  </nz-content>

</nz-layout>

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

<ng-template #systemMessageFieldSettingContentTemplate>
  <nz-table #systemMessageFieldTable [nzData]="_systemMessageFieldList" [nzBordered]="false" [nzFrontPagination]="false" [nzShowPagination]="false">
    <tbody cdkDropList (cdkDropListDropped)="_dropSystemMessageFieldList($event)">
      <tr *ngFor="let field of systemMessageFieldTable.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 #readTitleTemplate>
  <span nz-typography nzType="secondary">
    <i nz-icon nzType="mail"></i>
  </span>
</ng-template>

<ng-template #readContentTemplate let-read>
  <span nz-typography [nzType]="read ? 'secondary' : 'warning'">
    <i nz-icon [nzType]="read ? 'fill-plus:mail-open' : 'mail'"></i>
  </span>
</ng-template>

<ng-template #titleContentTemplate let-title let-systemMessage="source">
  <div nz-typography nzEllipsis>
    <a [routerLink]="_systemMessageDetailRoute" [queryParams]="{ systemMessageId: systemMessage.id }">{{ title }}</a>
  </div>
</ng-template>

<ng-template #contentContentTemplate let-content>
  <div nz-typography nzEllipsis>{{ content }}</div>
</ng-template>

<ng-template #senderContentTemplate let-systemMessageExtra="extra">{{ systemMessageExtra.sender }}</ng-template>

<ng-template #timeContentTemplate 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>
