<div class="da-operations">
  <d-search class="da-header-search" [iconPosition]="'left'" [noBorder]="true" (searchFn)="onSearch($event)"></d-search>
  <a href="https://devui.design/admin-page/docs" target="_blank">
    <i class="icon icon-helping"></i>
  </a>
  <div class="da-operations-notice" dDropDown [trigger]="'click'" dDropDownToggle appendToBody [closeScope]="'blank'">
    <d-badge [count]="noticeCount">
      <i class="icon icon-notice"></i>
    </d-badge>
    <div class="da-notice-modal" dDropDownMenu role="menu">
      <da-header-notice (countEvent)="handleNoticeCount($event)"></da-header-notice>
    </div>
  </div>

  <div class="da-operations-user" dDropDown [trigger]="'hover'" appendToBody dDropDownToggle>
    <d-avatar [name]="user.userName" [width]="22" [height]="22"></d-avatar>
    <span class="da-user-name">{{ user.userName }}</span>
    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu" style="min-width: 120px">
      <ng-container *ngIf="haveLoggedIn; else login">
        <li role="menuitem">
          <a class="devui-dropdown-item" [routerLink]="['/pages', 'user', 'center']"
            ><i class="icon icon-mine"></i>{{ 'header.userCenter' | translate }}</a
          >
        </li>
        <li role="menuitem">
          <a class="devui-dropdown-item" [routerLink]="['/pages', 'user', 'settings']"
            ><i class="icon icon-setting"></i>{{ 'header.userSettings' | translate }}</a
          >
        </li>
        <li role="menuitem" (click)="handleUserOps('logout')">
          <a class="devui-dropdown-item logout"><i class="icon icon-exit"></i>{{ 'header.logout' | translate }}</a>
        </li>
      </ng-container>
    </ul>
  </div>
  <div class="da-language-wrapper" dDropDown [trigger]="'hover'" appendToBody dDropDownToggle>
    <!-- TODO: svg替换为图标 -->
    <svg width="16px" height="16px" viewBox="0 0 16 16">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M11.7820977,7.27192786 C11.8678859,7.31004374 11.9399036,7.36693923 11.9928427,7.44081021 L12.0392257,7.52027287 L15.4201718,14.7707352 C15.5368746,15.0210051 15.428597,15.3184954 15.1783271,15.4351982 C14.9558648,15.538934 14.6960928,15.4649076 14.559148,15.2714039 L14.513864,15.1933534 L13.3997231,12.8029624 L9.75372311,12.8029624 L8.64299633,15.1868532 C8.52629351,15.4371232 8.22880329,15.5454008 7.9785333,15.4286979 C7.72826332,15.3119951 7.61998573,15.0145049 7.73668854,14.7642349 L11.1176346,7.51377262 C11.2343374,7.26350264 11.5318277,7.15522505 11.7820977,7.27192786 Z M5.65301592,0.424024048 L6.97781408,2.54414429 L6.967,2.54991671 L10.5,2.5500933 C10.7761424,2.5500933 11,2.77395092 11,3.0500933 C11,3.32623567 10.7761424,3.5500933 10.5,3.5500933 L9.263,3.54991671 L6.323,7.45191671 L8.62118558,9.52160035 C8.80359782,9.68584507 8.83695713,9.95389093 8.71234469,10.1555572 L8.65819269,10.2277381 C8.49394796,10.4101503 8.2259021,10.4435096 8.02423588,10.3188972 L7.95205497,10.2647452 L5.719,8.25291671 L2.4875201,12.5421316 C2.32133347,12.7626687 2.00783194,12.8067285 1.78729484,12.6405419 C1.56675773,12.4743552 1.52269796,12.1608537 1.68888459,11.9403166 L4.973,7.58091671 L2.75004119,5.58083093 C2.56762895,5.4165862 2.53426964,5.14854034 2.65888207,4.94687412 L2.71303408,4.87469321 C2.87727881,4.69228096 3.14532466,4.65892166 3.34699089,4.78353409 L3.4191718,4.8376861 L5.577,6.77991671 L8.011,3.54991671 L1.5,3.5500933 C1.22385763,3.5500933 1,3.32623567 1,3.0500933 C1,2.77395092 1.22385763,2.5500933 1.5,2.5500933 L5.801,2.54991671 L4.80496782,0.953943312 C4.65863466,0.719761297 4.72985022,0.411292796 4.96403224,0.264959632 C5.19821425,0.118626468 5.50668275,0.189842033 5.65301592,0.424024048 Z M11.5767231,8.89396244 L10.2207231,11.8029624 L12.9327231,11.8029624 L11.5767231,8.89396244 Z"
        ></path>
      </g>
    </svg>
    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu" style="min-width: 120px">
      <li
        *ngFor="let item of languages"
        role="menuitem"
        [ngClass]="{ 'da-active-lang': language === item.code }"
        (click)="onLanguageClick(item.code)"
      >
        <a class="devui-dropdown-item">
          <span class="da-language-prefix">{{ item.prefix }}</span>
          {{ item.lang }}
        </a>
      </li>
    </ul>
  </div>
</div>

<ng-template #login>
  <li role="menuitem">
    <a class="devui-dropdown-item"><i class="icon icon-assign"></i>{{ 'header.login' | translate }}</a>
  </li>
  <li role="menuitem">
    <a class="devui-dropdown-item"><i class="icon icon-add-member"></i>{{ 'header.register' | translate }}</a>
  </li>
</ng-template>