<div class="detail-container">
  <div class="detail-header">
    <div class="detail-close" (click)="handleClose()">
      <i nz-icon nzType="left" class="detail-close-icon"></i>
    </div>
    <div class="detail-title">需研判问题详情</div>
  </div>
  <div class="detail-content">
    <!-- left panel -->
    <div class="detail-section px-6 py-8 custom-scroll-bar">
      <div class="info-title">问题详情描述</div>
      <div class="info-content flex justify-between">
        <div class="">
          @for (item of infoItems; track item.key) {
            <div class="info-content-item">
              <span class="item-label">{{ item.label }}：</span>
              <span class="item-value">{{ values[item.key] }}</span>
            </div>
          }
        </div>
        <div>
          <div class="info-content-item">
            <span class="item-label">风险项：</span>
            <span class="item-value">{{ values['risk'] }}</span>
          </div>
        </div>
      </div>
      <div class="info-title">问题详情描述</div>
      <div class="py-4 whitespace-pre-line">
        {{ values['description'] }}
      </div>
      <div class="info-title">现场照片</div>
      <div class="flex flex-wrap gap-4 py-4">
        @for (url of images; track $index) {
          <div class="image-box">
            <img nz-image width="130px" height="75px" [nzSrc]="url" alt="" />
          </div>
        }
      </div>
    </div>
    <!-- right panel -->
    <div class="detail-section py-8 px-4 custom-scroll-bar">
      <div class="info-title">研判区域</div>

      @if (formVisible) {
        <assessment-form />
      } @else {
        @switch (data.status) {
          @case (unassessed) {
            <div class="text-center" style="padding-top: calc(50% - 100px)">
              <button nz-button nzType="primary" class="precaution-button start-button" (click)="startToAssess()">
                <span>开始研判</span>
              </button>
            </div>
          }
          @case (assessing) {
            <div class="text-center" style="padding-top: calc(50% - 100px)">
              <button [nzLoading]="true" nz-button nzType="primary" class="precaution-button start-button">
                <span>研判中</span>
              </button>
            </div>
          }
          @case (assessed) {
            <div class="text-center" style="padding-top: calc(50% - 100px)">
              <button nz-button nzType="primary" class="precaution-button start-button" [disabled]="true">
                <span>研判完成</span>
              </button>
            </div>
          }
        }
      }
    </div>
  </div>
</div>
