<nz-layout>
  <nz-header nz-row nzJustify="space-between">
    <div nz-col nz-row [nzGutter]="8">
      <div nz-col>
        <a class="_logo" [routerLink]="_routeForApplicationIndex">
          <img src="/assets/images/logo.svg">
          <h1><%= getPascalCase(name) %></h1>
        </a>
      </div>
      <ng-container *ngIf="_currentApplication">
        <div nz-col>
          <div class="_button _button-icon" [title]="_menuCollapsed ? '展开菜单' : '折叠菜单'" (click)="_menuCollapsed = !_menuCollapsed">
            <i nz-icon [nzType]="_menuCollapsed ? 'menu-unfold' : 'menu-fold'" nzTheme="outline"></i>
          </div>
        </div>
        <div nz-col>
          <div class="_button" [class._button-active]="_appDropdownVisible"
            nz-dropdown
            [(nzVisible)]="_appDropdownVisible"
            [nzDropdownMenu]="appDropdownMenu">
            <i *ngIf="_currentApplication.icon" nz-icon [nzType]="_currentApplication.icon" nzTheme="outline"></i>
            <span>{{ _currentApplication.name }}</span>
            <i nz-icon nzType="down" nzTheme="outline" [style.marginLeft]="'4px'"></i>
          </div>
          <nz-dropdown-menu #appDropdownMenu>
            <ul nz-menu>
              <li *ngFor="let application of _applicationList" nz-menu-item [routerLink]="_routeForApplicationIndex + '/' + application.code">
                <i *ngIf="application.icon" nz-icon [nzType]="application.icon" nzTheme="outline"></i>
                <span>{{ application.name }}</span>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </ng-container>
    </div>
    <div nz-col nz-row [nzGutter]="8">
      <div nz-col>
        <div title="消息" class="_button _button-icon" [class._button-active]="_unreadMessageDropdownVisible"
          nz-dropdown
          [(nzVisible)]="_unreadMessageDropdownVisible"
          (nzVisibleChange)="_changeUnreadMessageDropdownVisible($event)"
          [nzDropdownMenu]="unreadMessageDropdownMenu"
          nzTrigger="click"
          nzPlacement="bottomRight">
          <nz-badge [nzCount]="_unreadMessageTotal" [nzOffset]="[4, -4]">
            <i nz-icon nzType="bell" nzTheme="outline"></i>
          </nz-badge>
          <nz-dropdown-menu #unreadMessageDropdownMenu>
            <div class="ant-dropdown-menu _message-wrapper">
              <div nz-row nzJustify="space-between" nzAlign="middle">
                <div nz-col>未读消息</div>
                <div nz-col><a routerLink="/apps/system-message">全部消息</a></div>
              </div>
              <nz-list [nzLoading]="_unreadMessageLoading" nzSize="small">
                <nz-list-empty *ngIf="_unreadMessageList.length === 0"></nz-list-empty>
                <nz-list-item *ngFor="let message of _unreadMessageList" [class._message-readed]="message.read" (click)="_readUnreadMessage(message)">
                  <nz-list-item-meta>
                    <nz-list-item-meta-title>
                      <div nz-typography nzEllipsis>{{ message.title }}</div>
                    </nz-list-item-meta-title>
                    <nz-list-item-meta-description>{{ message.sendTime | date:'yyyy-MM-dd HH:mm:ss' }}</nz-list-item-meta-description>
                  </nz-list-item-meta>
                </nz-list-item>
              </nz-list>
              <nz-pagination
                [nzTotal]="_unreadMessageTotal"
                [(nzPageIndex)]="_unreadMessageParams.page"
                (nzPageIndexChange)="_queryUnreadMessageList()"
                [nzPageSize]="_unreadMessageParams.size"
                nzSize="small"
                nzHideOnSinglePage></nz-pagination>
            </div>
          </nz-dropdown-menu>
        </div>
      </div>
      <div nz-col>
        <div class="_button" [class._button-active]="_userDropdownVisible"
          nz-dropdown
          [(nzVisible)]="_userDropdownVisible"
          [nzDropdownMenu]="userDropdownMenu"
          nzPlacement="bottomRight">
          <nz-avatar nzIcon="user" [nzText]="_passport?.name?.slice(0, 1)" [nzSrc]="_passport?.avatar" [nzSize]="24"></nz-avatar>
          <span>{{ _passport?.name }}</span>
        </div>
        <nz-dropdown-menu #userDropdownMenu>
          <ul nz-menu>
            <li nz-menu-item [routerLink]="_routeForApplicationIndex + '/passport'" [queryParams]="{ showContent: '基本设置' }">
              <i nz-icon nzType="user" nzTheme="outline"></i>
              <span>个人中心</span>
            </li>
            <li nz-menu-item [routerLink]="_routeForApplicationIndex + '/passport'" [queryParams]="{ showContent: '修改密码' }">
              <i nz-icon nzType="key" nzTheme="outline"></i>
              <span>修改密码</span>
            </li>
            <li nz-menu-divider></li>
            <li nz-menu-item (click)="_logout()">
              <i nz-icon nzType="logout" nzTheme="outline"></i>
              <span>退出登录</span>
            </li>
          </ul>
        </nz-dropdown-menu>
      </div>
    </div>
  </nz-header>

  <nz-layout>
    <nz-sider nzTheme="dark" nzCollapsible [(nzCollapsed)]="_menuCollapsed" nzBreakpoint="md" [nzTrigger]="null" [style.display]="_currentApplication ? '' : 'none'">
      <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="_menuCollapsed">
        <ng-container *ngTemplateOutlet="menuTemplate; context: { menuList: _menuList }"></ng-container>
        <ng-template #menuTemplate let-menuList="menuList">
          <ng-container *ngFor="let menu of menuList">
            <ng-container *ngIf="menu.type === '文件夹'">
              <li nz-submenu [nzPaddingLeft]="_menuCollapsed ? null: menu.level * 24">
                <div title>
                  <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                  <span>{{ menu.name }}</span>
                </div>
                <ul>
                  <ng-container *ngTemplateOutlet="menuTemplate; context: { menuList: menu.children }"></ng-container>
                </ul>
              </li>
            </ng-container>
            <ng-container *ngIf="menu.type === '菜单'">
              <li nz-menu-item [nzPaddingLeft]="_menuCollapsed ? undefined: menu.level * 24" nzMatchRouter>
                <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                <a [routerLink]="menu.url" nzMatchRouter [title]="menu.name">{{ menu.name }}</a>
              </li>
            </ng-container>
            <ng-container *ngIf="menu.type === '链接'">
              <li nz-menu-item [nzPaddingLeft]="_menuCollapsed ? undefined: menu.level * 24">
                <i *ngIf="menu.icon" nz-icon [nzType]="menu.icon" nzTheme="outline"></i>
                <a [href]="menu.url" [title]="menu.name">{{ menu.name }}</a>
              </li>
            </ng-container>
          </ng-container>
        </ng-template>
      </ul>
    </nz-sider>

    <nz-layout>
      <nz-tabset [nzSelectedIndex]="_currentRouteRecordIndex" nzType="editable-card" nzHideAdd (nzClose)="_closeRoute($event.index)" [style.borderBottom]="_routeRecordList.length > 0 ? '2px solid #fff': ''">
        <nz-tab *ngFor="let routeRecord of _routeRecordList" [nzTitle]="tabTitleTemplate" nzClosable (nzClick)="_navigateTo(routeRecord.route)" (nzContextmenu)="_openTabDropdownMenu($event, tabDropdownMenu)">
          <ng-template #tabTitleTemplate>
            <i nz-icon nzType="loading" nzTheme="outline" *ngIf="routeRecord.loading"></i>
            <span [title]="routeRecord.component?.title || routeRecord.data?.name || '新标签页'">{{ routeRecord.component?.title || routeRecord.data?.name || '新标签页' }}</span>
          </ng-template>
          <nz-dropdown-menu #tabDropdownMenu>
            <ul nz-menu>
              <li nz-menu-item (click)="_closeRoute(routeRecord.route)">关闭当前</li>
              <li nz-menu-item (click)="_closeOtherRoutes(routeRecord.route)">关闭其它</li>
              <li nz-menu-item (click)="_closeRightRoutes(routeRecord.route)">关闭右侧</li>
              <li nz-menu-item (click)="_closeAllRoutes()">关闭全部</li>
            </ul>
          </nz-dropdown-menu>
        </nz-tab>
      </nz-tabset>

      <nz-content>
        <router-outlet></router-outlet>
        <nz-back-top nzTarget="nz-content"></nz-back-top>
      </nz-content>

    </nz-layout>
  </nz-layout>
</nz-layout>
