<nz-card *ngIf="cardTitle" nzSize="small" [nzExtra]="extra" [nzTitle]="cardTitle" [nzLoading]="loading">
    <ng-container *ngTemplateOutlet="table"></ng-container>
</nz-card>

<ng-container [ngTemplateOutlet]="table" *ngIf="!cardTitle"></ng-container>

<ng-template #extra>
    <i nz-icon nzType="setting" nzTheme="outline" title="设置" (click)="showFieldSetting()"
       style="cursor: pointer;margin-right: 10px"></i>
    <i nz-icon nzType="reload" nzTheme="outline" (click)="getData()" title="刷新" style="cursor: pointer"></i>
</ng-template>

<ng-template #table>
    <ng-content></ng-content>
    <nz-table nzTableLayout="fixed"
              [nzData]="dataList.list"
              [nzTotal]="dataList.total"
              [(nzPageIndex)]="dataList.pageNum"
              [nzPageSize]="dataList.pageSize"
              (nzPageIndexChange)="getData()"
              nzFrontPagination="false"
              [nzScroll]="{x:visibleFieldLength*100+'px'}"
              [nzLoading]="loading">
        <thead>
        <tr>
            <ng-container *ngFor="let data of filedData">
                <th *ngIf="data.show" [nzWidth]="data.isActionColumns?data.action.length*80+'px':null">
                    {{data.title}}
                </th>
            </ng-container>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let t of dataList.list;let index = index">
            <ng-container *ngFor="let data of filedData">
                <td *ngIf="data.show"
                    nz-typography
                    nzEllipsis
                    [nzEllipsisRows]="data.isActionColumns?3:1"
                    [nzTooltipTitle]="data.isActionColumns ? null : data.title+' : '+getValue(index,data.fieldValue)"
                    nzTooltipPlacement="top"
                    nz-tooltip>
                    <ng-template [ngIf]="!data.isActionColumns">
                        <ng-template [ngIf]="template[data.fieldValue]">
                            <ng-container
                                    *ngTemplateOutlet="template[data.fieldValue].temp; context:getContext(data.fieldValue,index) ">
                            </ng-container>
                        </ng-template>
                        <ng-template [ngIf]="!template[data.fieldValue]">
                            {{ getValue(index, data.fieldValue) }}
                        </ng-template>
                    </ng-template>
                    <ng-container *ngIf="data.isActionColumns">
                        <a *ngFor="let action of data.action; let i = index"
                           (mouseenter)="action.hover(t)"
                           (mouseout)="null"
                           [ngStyle]="{'color':action.color,'font-size':action.fontSize}"
                           nz-popconfirm
                           [nzPopconfirmTitle]="'是否确认'+action.name+'该数据?'"
                           [nzCondition]="!action.needConfirm"
                           (nzOnConfirm)="action.click(t)"
                           [title]="action.name">
                            {{action.name}}
                            <ng-template [ngIf]="i!=data.action.length-1">
                                <nz-divider nzType="vertical"></nz-divider>
                            </ng-template>
                        </a>
                    </ng-container>
                </td>
            </ng-container>
        </tr>
        </tbody>
    </nz-table>
</ng-template>


<nz-modal [(nzVisible)]="settingModalVisible"
          [nzClosable]="true"
          (nzOnCancel)="cancel()"
          (nzOnOk)="ok()"
          nzTitle="表格字段设置(可拖动排序)"
>
    <button nz-button nzType="primary" (click)="reset()" [disabled]="!changed">重置</button>
    <nz-table [nzData]="filedData" nzSize="small" nzPageSize="10000" nzShowPagination="false">
        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
        <ng-template ngFor [ngForOf]="filedData" let-item let-index="index">
            <tr *ngIf="!item.isActionColumns" cdkDrag (click)="click()">
                <td>{{index + 1}}</td>
                <td style="text-align: center">{{item.title}}</td>
                <td style="text-align: center">{{item.fieldValue}}</td>
                <td style="text-align: right">
                    <nz-switch [(ngModel)]="item.show" nzSize="small"></nz-switch>
                </td>
            </tr>
        </ng-template>
        </tbody>
    </nz-table>
</nz-modal>
