<div class="box">
  <div class="select-inner" (click)="onClick()">
    @if (label) {
      <span>{{ label }}</span>
    } @else {
      <span class="placeholder">请选择</span>
    }
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      fill="none"
      version="1.1"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      class="ml-2"
    >
      <defs>
        <clipPath id="master_svg0_1_00391"><rect x="24" y="24" width="24" height="24" rx="0" /></clipPath>
      </defs>
      <g>
        <g transform="matrix(-1,0,0,-1,48,48)" clip-path="url(#master_svg0_1_00391)">
          <g><path d="M36,32L42,38L30,38L36,32Z" fill="currentColor" fill-opacity="1" /></g>
        </g>
      </g>
    </svg>
  </div>
</div>
<ng-container *ngTemplateOutlet="dropdown"></ng-container>

<ng-template #dropdown>
  @if (options.length) {
    <div class="dropdown">
      @if (dropdownVisible) {
        <div #dropdown @dropdown class="dropdown-box custom-scroll-bar" [style.min-width.px]="minWidth">
          @for (option of options; track option.value) {
            <div class="dropdown-item" [class.selected]="option.value === value" (click)="handleChange(option.value)">
              {{ option.label }}
            </div>
          }
        </div>
      }
    </div>
  }
</ng-template>
