<hazard-detail-header [data]="data" (onClose)="onClose.emit()"></hazard-detail-header>
<div class="flex mt-4">
  <div class="box-wrapper mr-4 py-4" style="width: 360px">
    <div class="text-xl font-medium mb-3 px-6">治理流程</div>
    <div>
      @for (item of flowList; track item.status) {
        <div class="flex items-center justify-between px-6">
          <div class="flex">
            <div>
              <div>
                <span
                  nz-icon
                  [nzType]="getIcon(item)"
                  [style.color]="getIconColor(item)"
                  style="font-size: 48px"
                ></span>
              </div>
              <div class="text-center pt-2">
                <div
                  class="inline-block w-[3px] h-[40px] rounded-[4px] bg-[#F2F2F2]"
                  [style.background-color]="getIconColor(item)"
                ></div>
              </div>
            </div>
            <div class="ml-4 text-[#333333]">
              <div class="text-xl pb-3">{{ item.title }}</div>
              <div class="text-base text-[#242731]">
                {{ item.creator }}
                <span class="mx-1 text-[#ECECEC]">|</span>
                {{ item.createTime }}
              </div>
            </div>
          </div>
        </div>
      }
    </div>
  </div>
  <div class="box-wrapper flex-1 py-4">
    <div class="text-xl font-medium mb-3 px-6">隐患信息</div>
    <div class="px-6 text-[#333333] text-sm mb-4">
      {{ data.description }}
    </div>
    <div class="text-xl font-medium mb-3 px-6">现场照片</div>
    <!-- <div class="px-6 flex flex-wrap mb-4">
      @for (item of data.images; track item) {
        <div class="inline-block bg-gray-300 rounded-lg overflow-hidden mr-3 last:mr-0">
          <img nz-image [nzSrc]="item" alt="现场照片" width="154" height="88" />
        </div>
      }
    </div> -->
    <div class="px-6 mb-4">
      <scroll-images [data]="data.images" [width]="154" [height]="88"></scroll-images>
    </div>
    <div class="text-xl font-medium mb-3 px-6">治理方案</div>
    <div class="grid grid-cols-2 gap-x-6 px-6">
      <div class="measure-item">
        <div class="title">措施</div>
        <div class="content">
          <data-empty [isEmpty]="true" text="暂无措施..."></data-empty>
        </div>
      </div>
      <div class="target-item">
        <div class="title">治理目标</div>
        <div class="content">
          <data-empty [isEmpty]="true" text="暂无目标..."></data-empty>
        </div>
      </div>
    </div>
    <div class="pt-4 px-6 text-right">
      <span class="label">治理人：</span>
      <span class="value">张丹山</span>
      <span class="label ml-6">治理时间：</span>
      <span class="value">2024-01-01 12:00</span>
    </div>
  </div>
</div>
<hazard-handle-progress></hazard-handle-progress>
<hazard-handle-acceptance></hazard-handle-acceptance>
