<div class="flex sticky -top-8 z-10 bg-white">
  <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 justify-between">
    <div class="pr-4 max-w-[30%]">
      <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.createUserName }}</div>
      </div>
      <div class="field">
        <div class="label">提交时间：</div>
        <div class="value">{{ data.createdDate | time: 'YYYY/MM/DD HH:mm' }}</div>
      </div>
      <div class="field">
        <div class="label">风险类别：</div>
        <div class="value">{{ riskTypeName }}</div>
      </div>
    </div>
    <div class="pr-4 max-w-[30%] flex flex-col justify-end">
      <div class="field">
        <div class="label">隐患名称：</div>
        <div class="value">{{ data.title }}</div>
      </div>
      <div class="field">
        <div class="label">隐患类型：</div>
        <div class="value">{{ typeName }}</div>
      </div>
      <div class="field">
        <div class="label">问题场所：</div>
        <div class="value">
          <span>{{ positionName }}</span>
          @if (operationName) {
            <span> / {{ operationName }}</span>
          }
          @if (equipmentName) {
            <span> / {{ equipmentName }}</span>
          }
        </div>
      </div>
      <!-- <div class="field">
        <div class="label">具体地点：</div>
        <div class="value">{{ data.troublePosition }}</div>
      </div> -->
      <div class="field">
        <div class="label">风险项：</div>
        <div class="value">{{ categoryName }}</div>
      </div>
    </div>
    <div class="max-w-[40%] flex flex-col justify-end">
      <div class="field">
        <div class="label">风险条目：</div>
        <div class="value">{{ riskItemTitle }}</div>
      </div>
      <div class="field">
        <div class="label">流转部门：</div>
        <div class="value">{{ responsibleDepartmentName }}</div>
      </div>
      <div class="field">
        <div class="label">流转人：</div>
        <div class="value">{{ data.toUserName }}</div>
      </div>
    </div>
    <div></div>
  </div>
  <div class="box-wrapper px-12 ml-4 pt-4 flex flex-col">
    <div class="text-lg font-medium mb-3">隐患评级</div>
    <div class="flex items-center w-full flex-1">
      <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-9 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>
</div>
