<div class="flex gap-4">
  @if (isTaskRelative) {
    <span class="inline-flex items-center">
      <span> 排查计划关联隐患, </span>
      <button nz-button nzType="link" (click)="handleExitTaskRelative()">退出</button>
    </span>
  } @else {
    <span
      class="link-select"
      [class.active]="!!state.finalStatus"
      nz-dropdown
      [nzDropdownMenu]="statusMenu"
      [nzOverlayStyle]="{ top: '-2px' }"
      nzOverlayClassName="precaution-dropdown"
    >
      <span class="mr-2">{{ finalStatusText }}</span>
      <span nz-icon nzType="caret-down" nzTheme="outline" style="font-size: 10px"></span>
    </span>

    <span
      class="link-select"
      [class.active]="state.level !== ''"
      nz-dropdown
      [nzDropdownMenu]="levelMenu"
      [nzOverlayStyle]="{ top: '2px' }"
      nzOverlayClassName="precaution-dropdown"
    >
      <span class="mr-2">{{ levelText }}</span>
      <span nz-icon nzType="caret-down" nzTheme="outline" style="font-size: 10px"></span>
    </span>

    <span>
      <label nz-checkbox [(ngModel)]="state.onlyMine" (ngModelChange)="handleParamsChange()">只看我的</label>
    </span>
  }
</div>

<nz-dropdown-menu #statusMenu="nzDropdownMenu">
  <ul nz-menu nzSelectable>
    @for (item of statusOptions; track $index) {
      <li nz-menu-item (click)="handleStatusChange(item.value)">{{ item.label }}</li>
    }
  </ul>
</nz-dropdown-menu>

<nz-dropdown-menu #levelMenu="nzDropdownMenu">
  <ul nz-menu nzSelectable>
    @for (item of levelOptions; track $index) {
      <li nz-menu-item (click)="handleLevelChange(item.value)">{{ item.label }}</li>
    }
  </ul>
</nz-dropdown-menu>
