<div class="_layout" nz-row>

  <div nz-col nzXs="24" nzLg="0">
    <ul nz-menu nzMode="horizontal">
      <li *ngFor="let content of _contentList"
        nz-menu-item
        [nzSelected]="_showContent === content"
        (click)="_showContent = content">{{ content }}</li>
    </ul>
  </div>

  <div class="_menu-inline" nz-col nzXs="0" nzLg="4">
    <ul nz-menu nzMode="inline">
      <li *ngFor="let content of _contentList"
        nz-menu-item
        [nzSelected]="_showContent === content"
        (click)="_showContent = content">{{ content }}</li>
    </ul>
  </div>

  <div class="_content" nz-col nzFlex="1">

    <form *ngIf="_showContent === '基本设置'" nz-form [formGroup]="_userForm" nzLayout="vertical">
      <div nz-row [nzGutter]="96">
        <div nz-col>
          <div class="_form-wrapper">

            <nz-form-item>
              <nz-form-label>账号</nz-form-label>
              <nz-form-control [nzErrorTip]="controlErrorTemplate">
                <input nz-input formControlName="account" placeholder="暂无账号">
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label>用户名</nz-form-label>
              <nz-form-control [nzErrorTip]="controlErrorTemplate">
                <input nz-input formControlName="name" placeholder="请输入用户名">
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label>手机号</nz-form-label>
              <nz-form-control [nzErrorTip]="controlErrorTemplate">
                <input nz-input formControlName="mobileNumber" placeholder="请输入手机号">
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-label>邮箱</nz-form-label>
              <nz-form-control [nzErrorTip]="controlErrorTemplate">
                <input nz-input formControlName="email" placeholder="请输入邮箱">
              </nz-form-control>
            </nz-form-item>

          </div>
        </div>
        <div nz-col>

          <nz-form-item>
            <nz-form-label>头像</nz-form-label>
            <nz-form-control>
              <nz-upload
                [nzFileList]="_avatars"
                nzListType="picture-card"
                nzAccept="image/*"
                [nzShowButton]="_avatars.length === 0"
                [nzShowUploadList]="{ showRemoveIcon: true }"
                [nzBeforeUpload]="_addAvatar"
                [nzRemove]="_removeAvatar">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                <div>添加头像</div>
              </nz-upload>
            </nz-form-control>
          </nz-form-item>

        </div>
        <div nz-col nzSpan="24">

          <nz-form-item>
            <nz-form-control>
              <button nz-button nzType="primary" [nzLoading]="_userSubmitLoading" (click)="_submitUser()">保存</button>
            </nz-form-control>
          </nz-form-item>

        </div>
      </div>
    </form>

    <form *ngIf="_showContent === '修改密码'" nz-form [formGroup]="_passwordForm" nzLayout="vertical">
      <div class="_form-wrapper">

        <nz-form-item>
          <nz-form-label>旧密码</nz-form-label>
          <nz-form-control [nzErrorTip]="controlErrorTemplate">
            <input nz-input formControlName="currentPassword" type="password" placeholder="请输入旧密码">
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>新密码</nz-form-label>
          <nz-form-control [nzErrorTip]="controlErrorTemplate">
            <input nz-input formControlName="newPassword" type="password" placeholder="请输入新密码">
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label>确认密码</nz-form-label>
          <nz-form-control [nzErrorTip]="controlErrorTemplate">
            <input nz-input formControlName="confirmPassword" type="password" placeholder="请再一次输入新密码">
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-control>
            <button nz-button nzType="primary" [nzLoading]="_passwordSubmitLoading" (click)="_submitPassword()">保存</button>
          </nz-form-control>
        </nz-form-item>

      </div>
    </form>

  </div>
  
</div>

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