<div *ngIf="showTitle">
  <div class="current-head">
    <h3>조직도</h3>
  </div>
  <ucap-organization-tenant-search
    [companyList]="companyList$ | async"
    [companyCode]="companyCode"
    (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
    (cancel)="onClickCancel()"
  >
  </ucap-organization-tenant-search>
</div>
<div class="oraganization-tab">
  <div class="oraganization-tab-tree">
    <ucap-organization-tree
      [oraganizationList]="departmentInfoList$ | async"
      [loginRes]="loginRes"
      (selected)="onSelectedOrganization($event)"
      class="tab-tree-frame"
    ></ucap-organization-tree>
  </div>
  <div class="select-list">
    <dl class="select-dept text-accent-color">
      <dt>
        <ng-container *ngIf="!isShowSearch">
          {{ getSelectedDepartmentName() }}
        </ng-container>
        <ng-container *ngIf="isShowSearch">
          검색결과<span class="text-accent-color"
            >({{ searchUserInfos.length }}명)</span
          >
        </ng-container>
      </dt>
      <dd>
        <mat-checkbox
          #checkbox
          [checked]="getCheckedAllUser()"
          (change)="onCheckAllUser(checkbox.checked)"
          (click)="$event.stopPropagation()"
        >
        </mat-checkbox>
      </dd>
    </dl>
    <div style="position: relative;">
      <div
        *ngIf="selectedDepartmentProcessing"
        style="position: absolute; width: 100%;"
      >
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
    </div>
    <div *ngIf="!isShowSearch" class="search-list">
      <cdk-virtual-scroll-viewport
        itemSize="80"
        #cvsvDeptUser
        perfectScrollbar
        fxFlexFill
      >
        <ucap-profile-user-list-item
          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
          [userInfo]="userInfo"
          [checkable]="true"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (openProfile)="onClickOpenProfile($event)"
          (click)="onToggleUser(userInfo)"
        >
        </ucap-profile-user-list-item>
      </cdk-virtual-scroll-viewport>
    </div>
    <div *ngIf="isShowSearch" class="search-result">
      <cdk-virtual-scroll-viewport
        #cvsvDeptSearchUser
        itemSize="20"
        perfectScrollbar
        fxFlexFill
      >
        <ucap-profile-user-list-item
          *cdkVirtualFor="let userInfo of searchUserInfos"
          [userInfo]="userInfo"
          [checkable]="true"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (openProfile)="onClickOpenProfile($event)"
          (click)="onToggleUser(userInfo)"
        >
        </ucap-profile-user-list-item>
      </cdk-virtual-scroll-viewport>
    </div>
  </div>
  <div *ngIf="!isUserSelect" class="btn-box">
    <button
      mat-stroked-button
      [disabled]="selectedUserList.length > 0 ? 'false' : 'true'"
      class="mat-primary"
      (click)="onClickShowSelectedUserList()"
    >
      선택<span *ngIf="selectedUserList.length > 0"
        >({{ selectedUserList.length }})</span
      >
    </button>
    <ul>
      <li>
        <button
          mat-flat-button
          [disabled]="selectedUserList.length > 0 ? 'false' : 'true'"
          (click)="onClickAddGroup()"
          class="mat-primary"
        >
          그룹에 추가
        </button>
      </li>
      <li>
        <button
          mat-flat-button
          [disabled]="selectedUserList.length > 0 ? 'false' : 'true'"
          (click)="onClickChatOpen()"
          class="mat-primary"
        >
          대화
        </button>
      </li>
      <li>
        <button
          mat-flat-button
          [disabled]="selectedUserList.length > 0 ? 'false' : 'true'"
          (click)="onClickConference()"
          class="mat-primary"
        >
          화상회의
        </button>
      </li>
    </ul>
  </div>
</div>
