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

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

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

<ng-template #table>
    <ng-content></ng-content>
    <nz-table (nzPageIndexChange)="getData($event)"
              [(nzPageIndex)]="dataList.pageNum"
              [nzData]="dataList.list"
              [nzLoading]="loading"
              [nzPageSize]="dataList.pageSize"
              [nzScroll]="{x:visibleFieldLength*100+'px'}"
              [nzTotal]="dataList.total"
              nzFrontPagination="false"
              nzTableLayout="fixed">
        <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"
                    [nzEllipsisRows]="data.isActionColumns?3:1"
                    [nzTooltipTitle]="data.isActionColumns ? null : data.title+' : '+getValue(index,data.fieldValue)"
                    nz-tooltip
                    nz-typography
                    nzEllipsis
                    nzTooltipPlacement="top">
                    <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 (mouseenter)="action.hover(t)"
                           (mouseout)="null"
                           (nzOnConfirm)="action.click(t)"
                           *ngFor="let action of data.action; let i = index"
                           [ngStyle]="{'color':action.color,'font-size':action.fontSize}"
                           [nzCondition]="!action.needConfirm"
                           [nzPopconfirmTitle]="'是否确认'+action.name+'该数据?'"
                           [title]="action.name"
                           nz-popconfirm>
                            {{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 (nzOnCancel)="cancel()"
          (nzOnOk)="ok()"
          [(nzVisible)]="settingModalVisible"
          [nzClosable]="true"
          nzTitle="表格字段设置(可拖动排序)"
>
    <button (click)="reset()" [disabled]="!changed" nz-button nzType="primary">重置</button>
    <nz-table [nzData]="filedData" nzPageSize="10000" nzShowPagination="false" nzSize="small">
        <tbody (cdkDropListDropped)="drop($event)" cdkDropList>
        <ng-template [ngForOf]="filedData" let-index="index" let-item ngFor>
            <tr (click)="click()" *ngIf="!item.isActionColumns" cdkDrag>
                <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>
