<div class="flex">
  <div class="box-wrapper left-box mr-2">
    <div
      class="flex-center h-full px-3 transition-all cursor-pointer text-gray-600 hover:text-primary hover:bg-blue-100"
      (click)="onClose.emit()"
    >
      <span nz-icon nzType="icons:left" nzTheme="outline" class="text-2xl scale-y-150"></span>
    </div>
  </div>
  <div class="box-wrapper flex flex-1 py-3 pl-6 pr-4" style="height: 155px">
    <div class="mr-8">
      <div class="text-xl font-medium mb-3">隐患详情</div>
      <div class="field">
        <div class="label">隐患工单：</div>
        <div class="value">{{ data.id }}</div>
      </div>
      <div class="field">
        <div class="label">提交人：</div>
        <div class="value">{{ data.creator }}</div>
      </div>
      <div class="field">
        <div class="label">提交时间：</div>
        <div class="value">{{ data.reportingTime | date: 'yyyy/MM/dd HH:mm' }}</div>
      </div>
      <div class="field">
        <div class="label">风险类别：</div>
        <div class="value">{{ typeName }}</div>
      </div>
    </div>
    <div class="pt-5">
      <div class="field">
        <div class="label">隐患名称：</div>
        <div class="value">{{ data.name }}</div>
      </div>
      <div class="field">
        <div class="label">场景/设备：</div>
        <div class="value">{{ data.creator }}</div>
      </div>
      <div class="field">
        <div class="label">提交时间：</div>
        <div class="value">{{ data.reportingTime | date: 'yyyy/MM/dd HH:mm' }}</div>
      </div>
      <div class="field">
        <div class="label">风险类别：</div>
        <div class="value">{{ typeName }}</div>
      </div>
    </div>
  </div>
  <div class="box-wrapper px-12 ml-4 pt-4">
    <div class="text-lg font-medium mb-3">隐患评级</div>
    <div class="flex" [style.--color]="hazardLevelColor">
      <div>
        <span nz-icon nzType="icons:hazard-level" nzTheme="outline" style="font-size: 60px; color: var(--color)"></span>
      </div>
      <div class="w-[240px]">
        <div class="flex justify-between items-end text-[#999999] mb-2" style="font-size: 12px; line-height: 1">
          @for (level of ['C', 'B', 'A', '重']; track $index) {
            <span class="flex-1 text-right" [class.active-level-text]="data.level.indexOf(level) > -1">{{
              level
            }}</span>
          }
        </div>
        <div>
          <div class="relative h-[4px] bg-[#F2F2F2] rounded-[4px]" [style.background-color]="hazardLevelBgColor">
            <div
              class="absolute left-0 top-0 h-[4px] rounded-[4px]"
              [style.background-color]="hazardLevelColor"
              [style.width]="levelProgress"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
