<div class="flex items-center" style="width: var(--sider-width)">
  <img src="/assets/images/logo.png" alt="" />
  <span class="system pl-5">双预防系统</span>
</div>
<div class="flex-1 flex items-center">
  @for (item of menuList; track $index) {
    <a
      [routerLink]="item.path"
      routerLinkActive="active"
      class="nav-box flex flex-col items-center justify-center mr-4 last:mr-0"
    >
      <div>
        <img [src]="item.icon" alt="" class="nav-icon" />
      </div>
      <div class="text-[#333333] text-sm py-1">{{ item.label }}</div>
    </a>
  }
</div>
<div class="flex items-center pr-8">
  <div>
    <button
      nz-button
      nzType="primary"
      class="precaution-button px-2 py-2 !rounded-[10px]"
      (click)="openIssueReportDrawer()"
    >
      <span class="text-white">问题上报</span>
      <span class="ml-2" nz-icon nzType="icons:report" nzTheme="outline"></span>
    </button>
  </div>
</div>
<div class="flex items-center pr-20">
  <span class="ml-2" nz-icon nzType="icons:ring" nzTheme="outline" style="font-size: 24px"></span>
</div>
<div
  class="flex items-center leading-normal cursor-pointer"
  nz-dropdown
  [nzDropdownMenu]="menu"
  [nzOverlayStyle]="{ top: '-20px' }"
  nzOverlayClassName="precaution-dropdown"
>
  <nz-avatar nzSrc="https://loremflickr.com/80/80" [nzSize]="68"></nz-avatar>
  <div class="text-sm ml-3">
    <div>
      <span class="font-medium text-base text-black">{{ user?.name }}</span>
      <span class="ml-3 text-xs text-[#8f8f8f]">{{ roleText }}</span>
    </div>
    <div>
      <span class="text-[#8f8f8f]">责任部门：</span>
      <span class="text-[#333333]">{{ user?.department }}</span>
    </div>
    <div>
      <span class="text-[#8f8f8f]">责任场所：</span>
      <span class="text-[#333333]">{{ user?.line }} - {{ user?.job }}</span>
    </div>
  </div>
</div>

<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu nzSelectable>
    <!-- <li nz-menu-divider></li> -->
    <li nz-menu-item (click)="handleLogout($event)">退出登录</li>
  </ul>
</nz-dropdown-menu>

<custom-drawer [visible]="issueReport.visible" (onClose)="closeIssueReportDrawer()" [width]="740" title="问题上报">
  <issue-report-form #issueReportForm (onClose)="closeIssueReportDrawer()"></issue-report-form>
</custom-drawer>
