<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="category">类型：</label>
        <nz-select
          class="precaution-select flex-1"
          nzDropdownClassName="precaution-select-dropdown"
          [(ngModel)]="category"
          nzPlaceHolder="过滤场所类型"
          (ngModelChange)="onCategoryChange($event)"
        >
          <nz-option *ngFor="let category of categories" [nzValue]="category.id" [nzLabel]="category.name"> </nz-option>
        </nz-select>
      </div>
      <div class="flex-1 pl-2">
        <input nz-input class="precaution-input" [(ngModel)]="searchText" placeholder="搜索场所" />
      </div>
    </div>
    <div class="flex-1 text-sm limit-height pt-2 custom-scroll-bar">
      @for (position of filteredPositions; track position.id) {
        <div class="px-3 pb-1">
          <label
            nz-checkbox
            [nzValue]="position.id"
            [nzChecked]="selectedPositions.includes(position)"
            (nzCheckedChange)="onPositionChange(position.id, $event)"
          >
            <span>
              @if (categoryTypeIsStation) {
                <ng-template
                  [ngTemplateOutlet]="stationTpl"
                  [ngTemplateOutletContext]="{ $implicit: position }"
                ></ng-template>
              } @else {
                <span>{{ position.name }}</span>
              }
            </span>
          </label>
        </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">已选择</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">
      @for (position of selectedPositions; track position.id) {
        <div @horizontalInOut class="px-3 pb-2 flex justify-between">
          <position-visual [position]="position"></position-visual>
          <span
            nz-icon
            nzType="close"
            class="text-gray-500 cursor-pointer hover:text-red-500"
            (click)="onRemove(position.id)"
          ></span>
        </div>
      }
    </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>
