<div>
  @for (item of data.resolves; track item.id) {
    @for (handle of item.handles; track handle.id) {
      <div class="handle-item overflow-hidden">
        <div class="info-item-header bg-purple-500" (click)="toggleCollapse(item.id + '-' + handle.id)">
          <div>
            <span class="value">{{ handle.resolveDate | date: 'yyyy-MM-dd' }}</span>
          </div>
          <div>
            <span class="text-[12px] mr-4 leading">{{ handle.status === 1 ? '治理完成' : '治理未完成' }}</span>
            <span
              nz-icon
              nzType="right"
              class="transition-transform"
              [class.rotate-90]="checkedMap[item.id + '-' + handle.id]"
              nzTheme="outline"
            ></span>
          </div>
        </div>
        @if (checkedMap[item.id + '-' + handle.id]) {
          <div @verticalInOutRelative class="pl-4 py-2">
            <div class="info-item">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>现场处理描述</span>
                </div>
                <div class="info-item-value whitespace-pre-line">
                  {{ handle.content }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>照片</span>
                </div>
                <div class="info-item-value">
                  <scroll-images [data]="handle.images" [width]="77" [height]="44"></scroll-images>
                </div>
              </div>
            </div>
            <div class="info-item border-b-0">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>治理人</span>
                </div>
                <div class="info-item-value">{{ handle.userName }}</div>
              </div>
            </div>
          </div>
        }
      </div>
    }
    @if (item.status !== 0) {
      <div class="handle-item">
        <div
          class="info-item-header"
          (click)="toggleCollapse(item.id + '-resolve')"
          [class]="{
            'bg-green-500': item.status === 1,
            'bg-red-500': item.status === 2,
          }"
        >
          <div>
            <span class="value">{{ item.checkDate | date: 'yyyy-MM-dd' }}</span>
          </div>
          <div>
            <span class="text-[12px] mr-4 leading">{{ item.status === 1 ? '合格' : '不合格' }}</span>
            <span
              nz-icon
              nzType="right"
              class="transition-transform"
              [class.rotate-90]="checkedMap[item.id + '-resolve']"
              nzTheme="outline"
            ></span>
          </div>
        </div>
        @if (checkedMap[item.id + '-resolve']) {
          <div class="">
            <div class="info-item">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>验收结论</span>
                </div>
                <div class="info-item-value whitespace-pre-line">
                  {{ item.checkRemark }}
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>照片</span>
                </div>
                <div class="info-item-value">
                  <scroll-images [data]="item.images" [width]="77" [height]="44"></scroll-images>
                </div>
              </div>
            </div>
            <div class="info-item">
              <div class="flex-1">
                <div class="info-item-label mb-1">
                  <span class="dot"></span>
                  <span>验收人</span>
                </div>
                <div class="info-item-value">{{ item.checkUserName }}</div>
              </div>
            </div>
          </div>
        }
      </div>
    }
  }
</div>
