<nz-spin [nzSpinning]="loading">
  <div class="px-6">
    <nz-table
      class="risk-item-detail-table"
      #table
      [nzData]="data"
      [nzShowPagination]="false"
      [nzScroll]="scrollConfig"
    >
      <thead>
        <tr>
          @if (isSelect) {
            <th nzWidth="60px" nzLeft="0"></th>
          }
          <th nzWidth="156px">更新时间</th>
          <th>风险描述</th>
          <th nzWidth="156px">风险项</th>
          <th nzWidth="156px">风险等级</th>
          <th>可能导致的后果</th>
          <th>涉及场所/作业/设备</th>
          <th nzWidth="224px">责任岗位</th>
          <th>判定风险等级的主要事项、近期事故关联</th>
          <th>规章制度</th>
          <th nzWidth="400px">主要作业要求</th>
          <th>其他措施</th>
          <th nzWidth="156px">责任人</th>
          <th nzWidth="156px">具体单位</th>
        </tr>
      </thead>
      <tbody>
        @for (item of table.data; track item.id; let i = $index) {
          <tr (click)="onSelect(item.id)">
            @if (isSelect) {
              <td nzLeft="0">
                <label nz-radio [ngModel]="selected === item.id" (click)="onSelect(item.id)"></label>
              </td>
            }
            <td>{{ getUpdateTime(item) }}</td>
            <td style="width: 200px">
              @if (isDiffTitle(item, i)) {
                <span nz-icon nzType="icons:danger"></span>
              }
              <span
                nz-tooltip
                nzTooltipColor="var(--manager-gray)"
                nzTooltipOverlayClassName="customTooltip"
                [nzTooltipTitle]="item.title"
              >
                {{ item.title }}
              </span>
            </td>
            <td>
              <div class="title-item font-medium">
                @if (isDiffType(item, i)) {
                  <span nz-icon nzType="icons:danger"></span>
                }
                {{ getTypeName(item.type) }}
              </div>
              <div class="title-item font-medium">
                @if (isDiffCategory(item, i)) {
                  <span nz-icon nzType="icons:danger"></span>
                }
                {{ getCategoryName(item.category, item.type) }}
              </div>
            </td>
            <td>
              @if (isDiffLevel(item, i)) {
                <span nz-icon nzType="icons:danger"></span>
              }
              <span class="mx-[5px]">{{ item.level }}</span>
              <span
                class="inline-block px-2 py-[2px] text-white rounded-lg text-xs"
                [ngStyle]="{ background: levelColor(item.level) }"
              >
                {{ levelText(item.level) }}
              </span>
            </td>
            <td>
              @for (c of item.consequences; track $index) {
                <div class="consequence-item">{{ getConsequenceName(c) }}</div>
              }
            </td>
            <td>
              <div class="related-item">
                @if (item.involvedOperations.length > 0) {
                  <div class="flex">
                    <div>作业：</div>
                    <div>
                      @for (op of item.involvedOperations; track $index) {
                        <div class="related-item">{{ getOperationName(op) }}</div>
                      }
                    </div>
                  </div>
                }
                @if (item.involvedPositions.length > 0) {
                  <div class="flex">
                    <div>场所：</div>
                    <div>
                      @for (pos of item.involvedPositions; track $index) {
                        <div class="related-item">{{ getPositionName(pos) }}</div>
                      }
                    </div>
                  </div>
                }
                @if (item.involvedEquipments.length > 0) {
                  <div class="flex">
                    <div>设备：</div>
                    <div>
                      @for (eq of item.involvedEquipments; track $index) {
                        <div class="related-item">{{ getEquipmentName(eq) }}</div>
                      }
                    </div>
                  </div>
                }
              </div>
            </td>
            <td>
              @for (j of item.responsiblePositions; track $index) {
                <div class="job-item">
                  @if (isDiffJobItem(item, i, $index)) {
                    <span nz-icon nzType="icons:danger"></span>
                  }
                  {{ $index + 1 }}. {{ getJobName(j) }}
                </div>
              }
            </td>
            <td>
              @for (assoc of item.associations; track $index) {
                <div class="association-item flex"></div>
                <div class="mr-2">{{ $index }}:</div>
                <div>
                  <div>事件名称：{{ assoc.title }}</div>
                  <div>事件描述：{{ assoc.content }}</div>
                  <div>造成后果：{{ assoc.consequence }}</div>
                </div>
              }
            </td>
            <td>
              @for (doc of item.regulations; track $index) {
                <div class="document-item">
                  @if (isDiffRegulationItem(item, i, $index)) {
                    <span nz-icon nzType="icons:danger"></span>
                  }
                  <span class="mr-2">{{ $index }}:</span>
                  <span>
                    {{ getDocName(doc) }}
                  </span>
                </div>
              }
            </td>

            <td>
              @if (isDiffRequirement(item, i)) {
                <div class="text-center">
                  <span nz-icon nzType="icons:danger"></span>
                </div>
              }
              <div class="whitespace-pre-line">
                {{ item.requirement }}
              </div>
            </td>
            <td class="whitespace-pre-line">
              @if (isDiffOtherMeasure(item, i)) {
                <span nz-icon nzType="icons:danger"></span>
              }
              {{ item.otherMeasure }}
            </td>
            <td class="whitespace-pre-line">
              @if (isDiffResponsiblePerson(item, i)) {
                <span nz-icon nzType="icons:danger"></span>
              }
              {{ item.responsiblePerson }}
            </td>
            <td class="whitespace-pre-line">
              @if (isDiffSpecificUnit(item, i)) {
                <span nz-icon nzType="icons:danger"></span>
              }
              {{ item.specificUnit }}
            </td>
          </tr>
        }
      </tbody>
    </nz-table>
  </div>
</nz-spin>
