<page-header-wrapper title="Alain案例">
</page-header-wrapper>
<nz-card>
    <div nz-row nzGutter="8">
        <div nz-col [nzSpan]="_$expand ? 24 : 18">
            <sf #sf [schema]="searchSchema" [ui]="ui" [compact]="true" [button]="'none'"></sf>
        </div>
        <div nz-col [nzSpan]="_$expand ? 24 : 6" [class.text-right]="_$expand">
            <button nz-button nzType="primary" (click)="add()"> 新建</button>
            <button nz-button nzType="primary" [nzLoading]="service.http.loading" (click)="st?.load(1)">查询</button>
            <button nz-button (click)="resetSF()">重置</button>
            <button nz-button nzType="link" (click)="expandToggle()">
                {{ !_$expand ? '展开' : '收起' }}
                <i nz-icon [nzType]="!_$expand ? 'down' : 'up'"></i>
            </button>
        </div>
    </div>
    <ng-container *ngIf="selectedRows.length > 0">
        <button nz-button>批量操作</button>
        <button nz-button nz-dropdown [nzDropdownMenu]="batchMenu" nzPlacement="bottomLeft">
            更多操作
            <i nz-icon nzType="down"></i>
        </button>
        <nz-dropdown-menu #batchMenu="nzDropdownMenu">
            <ul nz-menu>
                <li nz-menu-item (click)="remove()">删除</li>
                <li nz-menu-item (click)="approval()">批量审批</li>
            </ul>
        </nz-dropdown-menu>
    </ng-container>
    <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
            <ng-template #message>
                已选择
                <strong class="text-primary">{{ selectedRows.length }}</strong> 项&nbsp;&nbsp; 服务调用总计 <strong>{{
                    totalCallNo }}</strong> 万
                <a *ngIf="totalCallNo > 0" (click)="st.clearCheck()" class="ml-lg">清空</a>
            </ng-template>
        </nz-alert>
    </div>

    <st #st [data]="url" [columns]="columns" [req]="{method:'POST'}" [res]="{reName:{ list: 'data.records', total: 'data.total' }}"
        (change)="stChange($event)"></st>
</nz-card>