<div class="py-2 px-4 relative flex items-center mb-2 justify-between">
  <div>
    <label
      nz-checkbox
      [(ngModel)]="allChecked"
      [nzIndeterminate]="indeterminate"
      (ngModelChange)="updateAllChecked()"
      [nzDisabled]="isAllCheckboxDisabled"
      class="mr-2"
    >
      全选 ({{ filteredList.length }})
    </label>
  </div>
  @if (searchable) {
    <div class="flex-1">
      <nz-input-group [nzPrefix]="searchPrefixTemplate" class="precaution-input w-full h-[45px]">
        <input
          autofocus
          nz-input
          type="text"
          placeholder="搜索"
          [(ngModel)]="searchText"
          (ngModelChange)="onSearch()"
        />
      </nz-input-group>
    </div>
  }
  @if (randomCheckAble) {
    <div class="flex">
      <nz-input-number
        type="number"
        [nzPlaceHolder]="'1' + '~' + (sourceList.length - 1)"
        nz-input
        [(ngModel)]="randomCount"
        [nzMin]="1"
        [nzMax]="sourceList.length - 1"
      ></nz-input-number>
      <button class="ml-2" [disabled]="!randomCount" nz-button nzType="primary" (click)="onRandomCheck()">
        随机选择
      </button>
    </div>
  }
</div>
<div #content class="px-2 py-2 overflow-y-auto custom-scroll-bar" style="height: calc(100vh - 100px)">
  @if (!hiddenContent) {
    @for (w of list; track w.w) {
      <div class="leading-8 px-2">
        <div [attr.data]="w.w" class="capital-line">{{ w.w }}</div>
        <div>
          @for (item of w.items; track item.value) {
            <div>
              <label nz-checkbox [(ngModel)]="checkedDto[item.value]" (ngModelChange)="updateSingleChecked()"
                >{{ item.label }}
              </label>
            </div>
          }
        </div>
      </div>
    }
  }
</div>
<div class="absolute right-4 top-20">
  @for (w of list; track w.w) {
    <div class="capital-locate" (click)="onLocate(w.w)">{{ w.w }}</div>
  }
</div>
<ng-template #searchPrefixTemplate>
  <span nz-icon nzType="icons:query" class="text-xl text-[#7E84A3]"></span>
</ng-template>
