@if (visible) {
  <div @horizontalInOut class="info-panel">
    <div class="nested-bg">
      <div class="info-panel-header">
        <div class="h-full flex-center" style="width: 46px">
          @if (isHazardActive) {
            <span nz-icon nzType="icons:datav/hazard-tip" style="position: relative; top: 2px; font-size: 46px"></span>
          } @else {
            <span nz-icon nzType="icons:datav/risk-tip" style="position: relative; top: 2px; font-size: 46px"></span>
          }
        </div>
        <div class="station-name flex-1">
          <span class="line-clamp-1">{{ currentStation?.name }}</span>
        </div>
        <div class="h-full flex items-center">
          <div class="direct-action mr-2">
            <span
              nz-icon
              nzType="left"
              nzTheme="outline"
              (click)="prev()"
              [ngClass]="{
                'text-gray-500 cursor-not-allowed': prevDisabled,
                'cursor-pointer text-white': !prevDisabled,
              }"
            ></span>
          </div>
          <div class="direct-action">
            <span
              nz-icon
              nzType="right"
              nzTheme="outline"
              (click)="next()"
              [ngClass]="{
                'text-gray-500 cursor-not-allowed': nextDisabled,
                'cursor-pointer text-white': !nextDisabled,
              }"
            ></span>
          </div>
          <div class="pl-3 h-full flex-center">
            <span
              nz-icon
              nzType="close"
              class="cursor-pointer text-[#737F8F] hover:text-white hover:rotate-180 transition"
              nzTheme="outline"
              (click)="onClose()"
            ></span>
          </div>
        </div>
      </div>
    </div>
    <div class="info-section custom-scroll-bar">
      @for (item of fields; track item.label) {
        <div class="info-item" [class.separator]="item.separator">
          <div class="pr-1">
            <div class="dot"></div>
          </div>
          <div class="flex-1">
            <div class="info-item-label mb-1">{{ item.label }}</div>
            <div class="info-item-value">
              @if (item.template) {
                <ng-container *ngTemplateOutlet="item.template"></ng-container>
              } @else {
                {{ item.value }}
              }
            </div>
          </div>
        </div>
      }
    </div>
  </div>
}

@if (detail.visible) {
  <div @horizontalInOut class="info-detail" [style.width.px]="detail.width">
    <div class="nested-bg">
      <div class="info-detail-header">
        <div class="station-name flex-1">
          <span class="line-clamp-1">{{ detail.title }}</span>
        </div>
        <div class="pr-3 h-full flex-center">
          <span
            nz-icon
            nzType="close"
            class="cursor-pointer text-[#737F8F] hover:text-white hover:rotate-180 transition"
            nzTheme="outline"
            (click)="closeDetail()"
          ></span>
        </div>
      </div>
    </div>
    <div
      class="info-section custom-scroll-bar"
      [style.height]="!detail.template && !detail.fields.length ? '0' : undefined"
    >
      @if (detail.template) {
        <ng-container *ngTemplateOutlet="detail.template"></ng-container>
      } @else {
        @for (item of detail.fields; track item.label) {
          <div class="info-item">
            <div class="pr-1">
              <div class="dot"></div>
            </div>
            <div class="flex-1">
              <div class="info-item-label mb-1">{{ item.label }}</div>
              <div class="info-item-value">
                {{ item.value }}
              </div>
            </div>
          </div>
        }
      }
    </div>
  </div>
}
<ng-template #riskMeasureTemplate>
  @if (currRiskItem) {
    <div>
      <span
        class="text-blue-300 underline cursor-pointer hover:text-blue-400 transition"
        (click)="showMeasureDetail('requirement')"
        >主要作业要求</span
      >
    </div>
    <div>
      <span
        class="text-blue-300 underline cursor-pointer hover:text-blue-400 transition"
        (click)="showMeasureDetail('otherMeasure')"
        >其他措施</span
      >
    </div>
  }
</ng-template>

<ng-template #resolveTemplate>
  @if (currHazardItem) {
    <div>
      <span class="text-blue-300 underline cursor-pointer hover:text-blue-400 transition" (click)="showResolveDetail()"
        >查看记录</span
      >
    </div>
  }
</ng-template>

<ng-template #planTemplate>
  @if (currHazardItem) {
    <div>
      <span class="text-blue-300 underline cursor-pointer hover:text-blue-400 transition" (click)="showPlanDetail()"
        >方案通过</span
      >
    </div>
  }
</ng-template>

<ng-template #hazardProgressTemplate>
  @if (currHazardItem) {
    <panel-hazard-progress [data]="currHazardItem"></panel-hazard-progress>
  }
</ng-template>
