<div class="box-wrapper pb-4 mt-4">
  <div class="flex items-center justify-between px-6 py-4" style="background: rgba(149, 96, 231, 0.06)">
    <div class="text-xl font-medium text-[#9560E7]">
      <span nz-icon nzType="icons:hazard/i-tool" class="mr-2"></span>
      <span>治理进度</span>
    </div>
    @if (hazard.resolveStatus !== 1) {
      <button nz-button nzType="primary" class="precaution-button !rounded-xl" (click)="openFillModal()">
        <span nz-icon nzType="plus"></span>
        <span>新增治理进度</span>
      </button>
    }
  </div>
  @if (!empty) {
    @for (item of data!.handles; track item.id) {
      <div class="handle-item">
        <div class="text-base font-medium text-3">现场处理描述</div>
        <div class="text-6 text-sm py-4 whitespace-pre-line">
          {{ item.content }}
        </div>
        <div class="text-base font-medium text-3">照片</div>
        <div class="py-4">
          <scroll-images [data]="item.images"></scroll-images>
        </div>

        <div class="px-6 text-right">
          <span class="label">治理人：</span>
          <span class="value">{{ item.userName }}</span>
          <span class="label ml-6">治理时间：</span>
          <span class="value">{{ item.resolveDate | date: 'yyyy-MM-dd' }}</span>
        </div>
      </div>
    }
  }
</div>
@if (data) {
  <hazard-handle-acceptance [data]="data" [hazard]="hazard" (update)="update.emit($event)" />
}

<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="现场处理描述"
          formControlName="description"
          maxlength="1000"
          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" nzErrorTip="请输入治理时间">
        <nz-date-picker
          class="precaution-input"
          formControlName="handleTime"
          nzPlaceHolder="请选择治理时间"
          [nzDisabledDate]="disabledDate"
          nzMode="date"
        ></nz-date-picker>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="4" nzRequired>治理人</nz-form-label>
      <nz-form-control nzSpan="18" nzErrorTip="请输入治理人">
        <input nz-input class="precaution-input" formControlName="handleUser" placeholder="治理人" />
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label
        nzSpan="4"
        nzRequired
        nzTooltipTitle="选择完成，当前治理结束，进入验收阶段。"
        nzTooltipOverlayClassName="customTooltip"
        nzTooltipColor="var(--manager-gray)"
        >是否完成</nz-form-label
      >
      <nz-form-control nzSpan="18">
        <nz-switch
          class="precaution-switch ml-1 pb-1"
          nzCheckedChildren="完成"
          nzUnCheckedChildren="未完成"
          nzSize="default"
          formControlName="complete"
        ></nz-switch>
      </nz-form-control>
    </nz-form-item>
  </form>
</ng-template>
