<div nz-row class="breadcrumbs">
    <div nz-col nzSpan="16">
        <nz-breadcrumb class="padding-8-0">
            <nz-breadcrumb-item>
                首页
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a>菜单栏编辑</a>
            </nz-breadcrumb-item>
        </nz-breadcrumb>
    </div>
    <div nz-col nzSpan="8" class="text-right">
        <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
        <smart-full-screen></smart-full-screen>
    </div>
</div>

<div nz-row class="search-form">
    <div nz-col nzSpan="16">
        <button (click)="add()" nz-button nzType="default">新增菜单栏</button>
    </div>
    <div nz-col nzSpan="8" class="text-right">
    </div>
</div>
<nz-table #basicTable [nzData]="dataSet" [nzFrontPagination]="true">
    <thead>
    <tr>
        <th nzWidth="25%">id</th>
        <th>名称</th>
        <th>父级ID</th>
        <th>code</th>
        <th>路径URL</th>
        <th>图标</th>
        <th>排序</th>
        <th nzWidth="10%" class="text-center">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
        <td nzWidth="25%">
            {{data.id}}
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.name}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.name">
            </ng-container>
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.parentId}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.parentId">
            </ng-container>
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.code}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.code">
            </ng-container>
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.url}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.url">
            </ng-container>
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.imageUrl}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.imageUrl">
            </ng-container>
        </td>
        <td>
            <ng-container *ngIf="!editCache[data.key].edit">
                {{data.showOrder}}
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.showOrder">
            </ng-container>
        </td>
        <td class="handle main-color">
            <ng-container *ngIf="!editCache[data.key].edit">
                <a (click)="startEdit(data.key)">编辑</a>
                <nz-popconfirm [nzTitle]="'确定删除？'" (nzOnConfirm)="deleteItem(data.id)">
                    <a nz-popconfirm>删除</a>
                </nz-popconfirm>
            </ng-container>
            <ng-container *ngIf="editCache[data.key].edit">
                <a (click)="saveEdit(data.key)">保存</a>
                <nz-popconfirm [nzTitle]="'确定取消？'" (nzOnConfirm)="cancelEdit(data.key)">
                    <a nz-popconfirm>取消</a>
                </nz-popconfirm>
            </ng-container>
        </td>
    </tr>
    </tbody>
</nz-table>
