<form nz-form nc-adaptive-form [formGroup]="_menuForm" nz-row [nzGutter]="24">

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label [nzRequired]="_parentMenuRequired">父级</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-tree-select
          formControlName="parentId"
          nzPlaceHolder="请选择父级"
          [nzDropdownStyle]="{ maxHeight: '360px', overflow: 'auto' }"
          [nzNodes]="_menuTreeNodeOptionList"
          nzShowSearch
          nzDefaultExpandAll></nz-tree-select>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>名称</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="name" placeholder="请输入名称">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24">
    <nz-form-item>
      <nz-form-label nzRequired>类型</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-radio-group formControlName="type" nzButtonStyle="solid">
          <label *ngFor="let menuTypeOption of _menuTypeOptionList" nz-radio-button [nzValue]="menuTypeOption.value">{{ menuTypeOption.label }}</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.icon.enabled">
    <nz-form-item>
      <nz-form-label>图标</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="icon" placeholder="请输入图标">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.authorityIdentifier.enabled">
    <nz-form-item>
      <nz-form-label>权限标识</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="authorityIdentifier" placeholder="请输入权限标识">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.url.enabled">
    <nz-form-item>
      <nz-form-label nzRequired>链接</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="url" placeholder="请输入链接">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.src.enabled">
    <nz-form-item>
      <nz-form-label nzRequired>模块地址</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <input nz-input formControlName="src" placeholder="请输入模块地址">
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.visible.enabled">
    <nz-form-item>
      <nz-form-label>是否显示</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-switch formControlName="visible" nzCheckedChildren="显示" nzUnCheckedChildren="隐藏"></nz-switch>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.sequence.enabled">
    <nz-form-item>
      <nz-form-label>排序号</nz-form-label>
      <nz-form-control [nzErrorTip]="controlErrorTemplate">
        <nz-input-number formControlName="sequence" nzPlaceHolder="请输入排序号"></nz-input-number>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div nz-col [nzSpan]="24" *ngIf="_menuForm.controls.extras.enabled">
    <nz-form-item>
      <nz-form-label>额外配置</nz-form-label>
      <nz-form-control [nzValidateStatus]="_menuForm.controls.extras.errors && _menuForm.controls.extras || ''" [nzErrorTip]="controlErrorTemplate">
        <div nz-row [nzGutter]="[0, 4]" *ngIf="_menuControlOfExtras.controls.length > 0">
          <div nz-col nzSpan="24" *ngFor="let extra of _menuControlOfExtras.controls; let extraIndex = index;" formArrayName="extras">
            <div nz-row [nzGutter]="4" [formGroupName]="extraIndex.toString()">
              <div nz-col nzFlex="1">
                <nz-form-item>
                  <nz-form-control [nzErrorTip]="controlErrorTemplate">
                    <input nz-input formControlName="key" placeholder="请输入键">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col nzFlex="1">
                <nz-form-item>
                  <nz-form-control [nzErrorTip]="controlErrorTemplate">
                    <input nz-input formControlName="value" placeholder="请输入值">
                  </nz-form-control>
                </nz-form-item>
              </div>
              <div nz-col>
                <nz-form-item>
                  <nz-form-control>
                    <a title="删除配置" nz-popconfirm nzPopconfirmTitle="确认删除该配置？" (nzOnConfirm)="_removeExtra(extraIndex)">
                      <i nz-icon nzType="minus-circle" nzTheme="outline"></i>
                    </a>
                  </nz-form-control>
                </nz-form-item>
              </div>
            </div>
          </div>
        </div>
        <button nz-button nzType="dashed" (click)="_addExtra()">
          <i nz-icon nzType="plus" nzTheme="outline"></i>
          <span>增加配置</span>
        </button>
      </nz-form-control>
    </nz-form-item>
  </div>

</form>

<ng-template #controlErrorTemplate let-control>
  <div *ngFor="let error of control.errors | keyvalue">{{ error.value }}</div>
</ng-template>
