<nz-tree
  nzBlockNode
  [nzData]="nodes"
  (nzClick)="activeNode($event)"
  (nzDblClick)="openFolder($event)"
  [nzTreeTemplate]="nzTreeTemplate"
  [nzExpandedIcon]="multiExpandedIconTpl"
  [nzExpandedKeys]="expandedKeys"
  (nzExpandChange)="handleExpandChange($event)"
></nz-tree>
<ng-template #nzTreeTemplate let-node let-origin="origin">
  <span class="custom-node">
    @if (!node.isLeaf) {
      <span (contextmenu)="contextMenu($event, menu, node)">
        <span class="folder-name" [class.text-primary]="isFirstLevel(origin)">{{ node.title }}</span>
      </span>
    } @else {
      <span (contextmenu)="contextMenu($event, menu, node)">
        <span class="file-name" [class.text-primary]="isFirstLevel(origin)">{{ node.title }}</span>
      </span>
    }
  </span>
</ng-template>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item (click)="handleAdd()">
      <span nz-icon nzType="plus"></span>
      <span class="ml-2">新增部门</span>
    </li>
    <li nz-menu-item nzDanger (click)="handleDelete()">
      <span nz-icon nzType="delete"></span>
      <span class="ml-2">删除部门</span>
    </li>
  </ul>
</nz-dropdown-menu>

<ng-template #multiExpandedIconTpl let-node let-origin="origin">
  @if (!origin.isLeaf) {
    <span
      class="text-xs"
      nz-icon
      [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
      (click)="openFolder(node)"
    ></span>
  } @else {
    <span class="inline-block w-[12px]"></span>
  }
</ng-template>
