<div class="hazard-card">
  <div class="card-header">
    <div class="mr-2">
      <div class="level-tag" [style.background-color]="hazardLevelColor[data.level]">{{ data.level }}</div>
    </div>
    <div class="title">{{ data.name }}</div>
    <div class="ml-2">
      <div class="time">提交时间：{{ data.reportingTime | date: 'MM/dd HH:mm' }}</div>
    </div>
  </div>
  <div class="card-body">
    <div class="row mt-2">
      <span class="label">风险类别：</span>
      <span class="value mr-6">{{ typeName }}</span>
      <span class="label">风险项：</span>
      <span class="value">{{ categoryName }}</span>
    </div>
    <div class="mb-2 flex justify-between">
      <span class="label">隐患图片：</span>
      <span class="value">
        <div class="inline-flex flex-wrap gap-x-1">
          @for (url of images; track $index) {
            <div class="image-box">
              <img width="46px" height="26px" [src]="url" alt="" />
            </div>
          }
        </div>
      </span>
      <span>
        <span class="text-blue-500 underline text-xs inline-block mx-4 cursor-pointer" (click)="handleViewDetail(data)">
          查看更多
        </span>
      </span>
    </div>
    <div class="row">
      <span class="label">责任部门：</span>
      <span class="value">{{ responsibleDepartmentsName }}</span>
    </div>
    <div class="flex mb-2">
      <span class="label">主要责任人：</span>
      <span class="value flex-1 line-clamp-1">{{ data.responsible }}</span>
      <span class="status-tag mr-2" [style.background-color]="hazardStatusBgColor" [style.color]="hazardStatusColor">{{
        hazardStatusText
      }}</span>
    </div>
  </div>
</div>
