<form nz-form [formGroup]="searchForm" [nzLayout]="'vertical'">
    <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="4">
            <nz-form-item>
                <nz-form-label>角色名称</nz-form-label>
                <nz-form-control>
                    <input  nzSize="large"  nz-input formControlName="roleName" placeholder="请输入" />
                </nz-form-control>
            </nz-form-item>
        </div>
      <div nz-col [nzSpan]="6" class="search-area">
          <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">查询</button>
          <button nz-button (click)="searchFormReset()">重置</button>
          <button nz-button [nzType]="'primary'" (click)="showEditRole(true, null)">创建</button>
      </div>
    </div>
</form>

<nz-table #basicTable
          [nzBordered]="true"
          [nzFrontPagination]="false"
          [nzShowQuickJumper]="true"
          [nzShowTotal]="totalTemplate"
          [(nzPageIndex)]="tablePageNum"
          (nzPageIndexChange)="queryData()"
          [nzTotal]="tableData.total"
          [nzData]="tableData.list" >
    <thead>
    <tr>
        <th nzWidth="80px">角色名称</th>
        <th nzWidth="100px">角色描述</th>
        <th nzWidth="50px">创建时间</th>
        <th nzWidth="50px">更新时间</th>
        <th nzWidth="70px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of basicTable.data">
        <td>{{data.roleName}}</td>
        <td>{{data.roleDesc}}</td>
        <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
        <td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
        <td>
            <a (click)="showEditRole(false, data)">修改</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="showAssignRoleMenu(data.id)">分配菜单</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a (click)="showDelData(data.id)">删除</a>
        </td>
    </tr>
    </tbody>
    <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
</nz-table>


<nz-modal [(nzVisible)]="editRoleVisible" nzTitle="{{editRoleTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditRole()">
    <ng-container *nzModalContent>
        <form nz-form [formGroup]="editRoleForm" (ngSubmit)="submitEditRoleForm()">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色名称填写有误！">
                    <input  nzSize="large"  nz-input formControlName="roleName"/>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>角色描述</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="角色描述填写有误！">
                    <input  nzSize="large"  nz-input formControlName="roleDesc"/>
                </nz-form-control>
            </nz-form-item>

            <div nz-flex [nzJustify]="'center'">
                <button nz-button nzType="primary" class="submit-btn">保存</button>
            </div>

        </form>
    </ng-container>
</nz-modal>


<nz-modal [(nzVisible)]="assignRoleMenuVisible" nzTitle="角色菜单权限" [nzFooter]="null" (nzOnCancel)="closeAssignRoleMenu()">
    <ng-container *nzModalContent>
        <nz-tree
            #nzTreeComponent
            *ngIf="menuTree.length"
            [nzData]="menuTree"
            [nzCheckedKeys]="menuTreeCheckedKeys"
            [nzShowLine]="true"
            [nzExpandAll]="true"
            [nzMultiple]="false"
            [nzCheckable]="true"
            nzVirtualHeight="500px"
        ></nz-tree>
        <nz-divider nzOrientation="right"></nz-divider>
        <div nz-flex [nzJustify]="'center'">
            <button nz-button nzType="primary" class="submit-btn" (click)="submitAssignRoleMenu()">保存</button>
        </div>
    </ng-container>
</nz-modal>
