<div class="header">
  <div class="title">{{ title }}</div>
</div>
<div class="flex w-full">
  <div class="w-2/3 flex flex-col py-2 r-border">
    <div class="b-border pb-2 px-3 flex justify-between">
      <div class="flex flex-1 items-center">
        <label for="type">风险类别：</label>
        <nz-select
          class="precaution-select flex-1"
          nzDropdownClassName="precaution-select-dropdown"
          [(ngModel)]="type"
          nzAllowClear
          nzPlaceHolder="过滤风险类别"
          [nzOptions]="typeOptions"
          (ngModelChange)="onTypeChange($event)"
        >
          <!-- <nz-option *ngFor="let type of types" [nzValue]="type.id"  [nzLabel]="type.value"> </nz-option> -->
        </nz-select>
      </div>
      <div class="flex flex-1 items-center pl-2">
        <label for="category">风险项：</label>
        <nz-select
          class="precaution-select flex-1"
          nzDropdownClassName="precaution-select-dropdown"
          [(ngModel)]="category"
          nzPlaceHolder="过滤风险项"
          nzAllowClear
          [nzOptions]="filteredCategories"
          (ngModelChange)="onCategoryChange($event)"
        >
          <!-- <nz-option *ngFor="let category of filteredCategories" [nzValue]="category.id" [nzLabel]="category.value">
          </nz-option> -->
        </nz-select>
      </div>
      <div class="flex-1 pl-2">
        <input
          nz-input
          class="precaution-input"
          [(ngModel)]="searchText"
          (ngModelChange)="setFilteredItems()"
          placeholder="搜索风险条目"
        />
      </div>
    </div>
    <div class="flex-1 text-sm limit-height relative custom-scroll-bar">
      <div class="px-3 pb-1 shadow-lg sticky top-0 bg-white z-10 py-2">
        <label
          nz-checkbox
          [(ngModel)]="allChecked"
          [nzIndeterminate]="indeterminate"
          (ngModelChange)="updateAllChecked()"
          [nzDisabled]="isAllCheckboxDisabled"
          class="mr-2"
        >
          全选 (当前共有 {{ filteredItems.length }} 条)
        </label>
      </div>
      <div class="pt-2">
        @for (item of filteredItems; track item.id) {
          <div class="px-3 pb-1">
            <label
              nz-checkbox
              [nzValue]="item.id"
              [nzChecked]="selectedItems.includes(item)"
              (nzCheckedChange)="onItemChange(item.id, $event)"
            >
              <span>
                <span>{{ item.title }}</span>
              </span>
            </label>
          </div>
        }
      </div>
    </div>
  </div>
  <div class="w-1/3 flex flex-col py-2">
    <div class="b-border pb-2 px-3 flex justify-between items-center">
      <div class="text-base h-8 leading-8">已选择 ({{ selectedItems.length }})</div>
      <button nz-button nzSize="small" class="precaution-secondary" nzType="primary" (click)="onClear()">清空</button>
    </div>
    <div class="relative flex-1 text-sm limit-height pt-2 custom-scroll-bar">
      <risk-items-visual-classify [data]="selectedItems"></risk-items-visual-classify>
    </div>
  </div>
</div>

<ng-template #stationTpl let-position>
  <span>
    {{ position.name }}
  </span>
  @if (position.stationType) {
    <span class="text-xs text-gray-400"> ({{ position.stationType }}) </span>
  }

  @if (position.stationLines.length) {
    @for (line of position.stationLines; track line) {
      <span class="text-gray-400">
        <!-- {{ getLineName(line) }} -->
      </span>
    }
  }
</ng-template>
