<nz-list nzGrid>
  <div nz-row [nzGutter]="16">
      <div nz-col [nzSpan]="12">
        <nz-list-item>
          <nz-card [nzTitle]="'系统菜单'">
            <nz-spin [nzSpinning]="!treeView"></nz-spin>
            <nz-tree
              *ngIf="menuTree.length > 0 && treeView"
              [nzData]="menuTree"
              [nzShowLine]="true"
              [nzExpandAll]="true"
              (nzClick)="clickNode($event)"
              [nzMultiple]="false"
            ></nz-tree>
          </nz-card>
        </nz-list-item>
      </div>
    <div nz-col [nzSpan]="12">
      <nz-list-item>
        <nz-card [nzTitle]="'菜单详情'">
          <nz-descriptions [nzExtra]="extraTemplate" nzBordered>
            <nz-descriptions-item [nzSpan]="3" nzTitle="父级菜单">{{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}}</nz-descriptions-item>
            <nz-descriptions-item [nzSpan]="3" nzTitle="菜单名称">{{menuDetail.menuName?menuDetail.menuName:'无'}}</nz-descriptions-item>
            <nz-descriptions-item [nzSpan]="3" nzTitle="菜单类型">{{menuDetail.menuType == 1 ? '菜单' : '按钮'}}</nz-descriptions-item>
            <nz-descriptions-item [nzSpan]="3" nzTitle="菜单URL">{{menuDetail.menuUrl?menuDetail.menuUrl:'无'}}</nz-descriptions-item>
            <nz-descriptions-item [nzSpan]="3" nzTitle="菜单图标">{{menuDetail.menuUrlImg?menuDetail.menuUrlImg:'无'}}</nz-descriptions-item>
            <nz-descriptions-item [nzSpan]="3" nzTitle="菜单描述">{{menuDetail.menuDesc?menuDetail.menuDesc:'无'}}</nz-descriptions-item>

            <ng-template #extraTemplate>
              <div nz-row [nzGutter]="12">
                <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(true)">添加</button></div>
                <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(false)">修改</button></div>
                <div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="showDelMenu()" nzDanger>删除</button></div>
              </div>
            </ng-template>
          </nz-descriptions>
        </nz-card>
      </nz-list-item>
    </div>
  </div>
</nz-list>

<nz-modal [(nzVisible)]="isVisible" nzTitle="编辑菜单" (nzOnCancel)="isVisible = false" (nzOnOk)="handleOk()">
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24"  nzFor="menuPSid">父级菜单</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-tree-select
            formControlName="menuPSid"
            [nzNodes]="menuTree"
            nzShowSearch
          ></nz-tree-select>
        </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 nz-input formControlName="menuName"/>
        </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="菜单类型选择有误！">
          <nz-select formControlName="menuType" nzShowSearch>
            <nz-option *ngFor="let item of menuTypeArray" nzValue="{{item.codeValue}}" nzLabel="{{item.codeName}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单URL</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单URL填写有误！">
          <input nz-input formControlName="menuUrl"/>
        </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="菜单顺序填写有误！">
          <nz-input-number [nzMin]="1" [nzMax]="999" [nzStep]="1" formControlName="menuSort"></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">图标URL</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="menuUrlImg"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24">菜单描述</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <input nz-input formControlName="menuDesc"/>
        </nz-form-control>
      </nz-form-item>

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