<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar left_nav" nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo">
      <img nzTooltipTitle="{{userInfo.secRole.roleName}}" nzTooltipPlacement="topCenter" nz-tooltip src="../../../assets/admin/navigation/icon.png" alt="">
      <span *ngIf="!isCollapsed">{{userInfo.secRole.roleName}}</span>
    </div>
    <ul  nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item nz-tooltip nzPlacement="right" (click)="activeLi('index')" [nzSelected]="routeName == 'index' ? true : false" routerLink="/admin/index" [nzTitle]="isCollapsed ? '首页' : ''" >
        <i nz-icon nzType="home" nzTheme="outline"></i>
        <span>首页</span>
      </li>
      <li nz-submenu *ngFor="let item of menuList;" (click)="activeLi(item.menuUrl)" [nzOpen]="routeName == item.menuUrl ? true : false"   [nzTitle]="titleTpl">
        <ng-template #titleTpl><i nz-icon [nzIconfont]="item.menuUrlImg"></i><span>{{item.menuName}}</span></ng-template>
        <ul *ngFor="let child of item.children">
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/admin/{{item.menuUrl}}/{{child.menuUrl}}" (click)="getRouteName(item.menuName , child.menuName)">{{child.menuName}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
        <span *ngIf="userInfo['secUser'].id == 3">系统开关： <nz-switch [ngModel]="switchValue" (click)="clickSwitch()" nzCheckedChildren="开" nzUnCheckedChildren="关"></nz-switch></span>
        <a  style="float: right; margin-right:30px;" nz-dropdown [nzDropdownMenu]="menu">
          {{userInfo.secUser.userName}}
          <i nz-icon nzType="down"></i>
        </a>
        <nz-dropdown-menu #menu="nzDropdownMenu">
          <ul nz-menu nzSelectable>
            <li nz-menu-item>
              <a (click)="openUpdatePwd()">修改密码</a>
            </li>
            <li nz-menu-item>
              <a (click)="loginOut()">退出</a>
            </li>
          </ul>
        </nz-dropdown-menu>
      </div>
    </nz-header>
    <nz-content style="margin: 24px;">
      <router-outlet></router-outlet>
    </nz-content>
  </nz-layout>
</nz-layout>

<nz-drawer
        [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom': '53px' }"
        [nzWidth]="500"
        [nzVisible]="visibleUpdatePwd"
        nzTitle="修改密码"
        [nzMaskClosable] = "true"
        (nzOnClose)="closeUser()"
>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm(validateForm.value)">

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>旧密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input type="password"  formControlName="oldPassword"  placeholder="请输入您的旧密码" />
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>
        <span> 新密码 </span>
      </nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-input-group [nzSuffix]="suffixTemplate">
          <input nz-input [type]="passwordVisible ? 'text' : 'password'"  formControlName="newPassword"  placeholder="请输入您的新密码" />
        </nz-input-group>
        <ng-template #suffixTemplate>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
        </ng-template>
      </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]="errorTpl">
        <input nz-input type="password"  formControlName="checkNewPassword"  placeholder="请再次输入您的新密码" />
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="control.hasError('confirm')">
            您输入的两个密码不一致!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-control [nzSpan]="8" >
      <button nz-button nzType="primary" style="margin-left: 130px;width: 200px;">提交</button>
    </nz-form-control>

  </form>

</nz-drawer>

