<div class="box-wrapper pb-4 mt-4 relative">
  <div class="text-xl font-medium mb-3 px-6 py-4" [style.background]="headerBgColor">
    <span nz-icon nzType="icons:hazard/i-check" class="headline mr-2" [ngClass]="info.result"></span>
    <span class="headline" [ngClass]="info.result">治理验收</span>
  </div>
  @if (isStepProgressEnd) {
    @if (info.status === 'pending') {
      <div class="flex items-center justify-center py-8">
        <button nz-button nzType="primary" class="precaution-secondary !rounded-xl" (click)="openFillModal()">
          验收
        </button>
      </div>
    } @else if (info.status === 'completed') {
      <div class="handle-data">
        <div class="text-base font-medium text-3">验收结论</div>
        <div class="text-6 text-sm py-4">
          {{ info.description }}
        </div>
        <div class="text-base font-medium text-3">照片</div>
        <div class="py-4">
          <scroll-images [data]="info.images"></scroll-images>
        </div>

        <div class="px-6 text-right">
          <span class="label">验收人：</span>
          <span class="value">{{ info.creator }}</span>
        </div>
      </div>

      <div class="part">
        <div class="outer-box">
          <div class="inner-box" [ngClass]="info.result">
            <span>{{ resultText }}</span>
          </div>
        </div>
      </div>
    }
  } @else {
    <div class="flex items-center justify-center py-8">
      <span class="text-6">治理中...</span>
    </div>
  }
</div>

<ng-template #fillTemplate>
  <form nz-form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>验收结论</nz-form-label>
      <nz-form-control nzSpan="18" nzErrorTip="请输入验收结论">
        <textarea
          nz-input
          class="precaution-input"
          placeholder="验收结论"
          maxlength="1000"
          formControlName="description"
          rows="3"
        ></textarea>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="4">照片</nz-form-label>
      <nz-form-control [nzSpan]="18">
        <image-upload-group #imageUploadGroup [fileList]="fileList"></image-upload-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>是否合格</nz-form-label>
      <nz-form-control nzSpan="18">
        <nz-switch
          class="precaution-switch ml-1 pb-1"
          nzCheckedChildren="合格"
          nzUnCheckedChildren="不合格"
          nzSize="default"
          formControlName="result"
        ></nz-switch>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>
