<cdk-virtual-scroll-viewport
  #cvsvOrganization
  itemSize="50"
  perfectScrollbar
  fxFlexFill
>
  <ng-container
    *cdkVirtualFor="let node of dataSource.expandedData$"
  ></ng-container>
  <mat-tree
    #orgranizationTree
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    class="organization-tree"
  >
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node"
      matTreeNodePadding
      matTreeNodePaddingIndent="20"
      class="tree-no-child"
    >
      <div
        class="tree-node-closer-container"
        *ngFor="let i of appendDivArray(node.level)"
      >
        <div
          class="tree-node-closer-top"
          [style.left.px]="20 - 20 * i"
          [attr.last-node]="isLastNode(node, i) ? '' : null"
          [attr.sub-node]="0 < i ? '' : null"
        ></div>
        <div
          class="tree-node-closer-bottom"
          [style.left.px]="20 - 20 * i"
          [attr.last-node]="isLastNode(node, i) ? '' : null"
          [attr.sub-node]="0 < i ? '' : null"
        ></div>
      </div>

      <li (click)="onClickNode(node)" matRipple>
        <div class="tree-node-body">
          {{ node.deptInfo | ucapTranslate: 'name' }}
        </div>
      </li>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node
      *matTreeNodeDef="let node; when: hasChild"
      matTreeNodePadding
      matTreeNodePaddingIndent="20"
      class="tree-has-child"
    >
      <div
        class="tree-node-closer-container"
        *ngFor="let i of appendDivArray(node.level)"
      >
        <div
          class="tree-node-closer-top"
          [style.left.px]="20 - 20 * i"
          [attr.last-node]="isLastNode(node, i) ? '' : null"
          [attr.sub-node]="0 < i ? '' : null"
        ></div>
        <div
          class="tree-node-closer-bottom"
          [style.left.px]="20 - 20 * i"
          [attr.expanded]="treeControl.isExpanded(node) ? '' : null"
          [attr.last-node]="isLastNode(node, i) ? '' : null"
          [attr.sub-node]="0 < i ? '' : null"
        ></div>
      </div>
      <li (click)="onClickNode(node)" matRipple>
        <div class="tree-node-body">
          <span class="horizontal-line"></span>
          <button
            mat-icon-button
            color="accent"
            matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.filename"
          >
            <mat-icon
              class="tree-node-expand-btn"
              [@romvoeAdd]="treeControl.isExpanded(node) ? 'remove' : 'add'"
            >
              {{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
            </mat-icon>
          </button>
          <span class="dept-name">{{
            node.deptInfo | ucapTranslate: 'name'
          }}</span>
        </div>
        <!-- <ul class="tree-node-closer"></ul> -->
      </li>
    </mat-tree-node>
  </mat-tree>
</cdk-virtual-scroll-viewport>
