@if (visible) {
  <div @horizontalInOutReverse>
    <div class="grid grid-cols-2 nested-bg">
      <div class="item-btn" [ngClass]="{ 'active gradient-text': isRiskActive }" (click)="setActiveType('risk')">
        <span
          nz-icon
          class="icon"
          [nzType]="isRiskActive ? 'icons:datav/risk-active' : 'icons:datav/risk'"
          nzTheme="outline"
        ></span>
        <span>风险</span>
        <span>{{ riskTotal }}</span>
      </div>
      <div class="item-btn" [ngClass]="{ 'active gradient-text': isHazardActive }" (click)="setActiveType('hazard')">
        <span
          nz-icon
          class="icon"
          [nzType]="isHazardActive ? 'icons:datav/hazard-active' : 'icons:datav/hazard'"
          nzTheme="outline"
        ></span>
        <span>隐患</span>
        <span>{{ hazardTotal }}</span>
      </div>
    </div>
    <div class="option-panel">
      <radio-item
        [checked]="allChecked"
        [label]="'全部'"
        [value]="0"
        color="transparent"
        [showValue]="false"
        (click)="onAllClick()"
      />
      @for (item of currentOptions; track item.key) {
        <radio-item
          [checked]="item.checked"
          [label]="item.label"
          [value]="item.value"
          [color]="item.color"
          (click)="onOptionClick(item)"
        ></radio-item>
      }
    </div>
  </div>
}
