<nz-table
  class="precaution-table"
  #table
  [nzData]="list"
  nzShowPagination
  nzPaginationType="small"
  [nzFrontPagination]="false"
  [nzTotal]="pageConfig.total"
  [nzPageIndex]="pageConfig.page + 1"
  (nzPageIndexChange)="onCurrentPageChange($event - 1)"
  [nzScroll]="{ x: '2360px' }"
  [nzLoading]="loading"
>
  <thead>
    <tr>
      <th nzWidth="80px">序号</th>
      <th nzWidth="200px">风险描述</th>
      <th nzWidth="144px">风险项</th>
      <th nzWidth="120px">导致后果</th>
      <th nzWidth="120px">风险等级</th>
      <th nzWidth="200px">涉及场所/作业/设备</th>
      <th nzWidth="224px">责任岗位</th>
      <th nzWidth="200px">判定风险等级的主要事项、近期事故关联</th>
      <th>规章制度</th>
      <th nzWidth="200px">主要作业要求</th>
      <th>其他措施</th>
      <th>责任人</th>
      <th>具体单位</th>
      <th nzWidth="214px" [nzRight]="'0px'">操作</th>
    </tr>
  </thead>
  <tbody>
    @for (row of table.data; track row.id) {
      <tr>
        <td>{{ row.id }}</td>
        <td>
          <span
            class="line-clamp-2"
            nz-tooltip
            nzTooltipColor="var(--manager-gray)"
            nzTooltipOverlayClassName="customTooltip"
            [nzTooltipTitle]="row.title"
          >
            {{ row.title }}
          </span>
        </td>
        <td>
          <div class="title-item font-medium">{{ getTypeName(row.type) }}</div>
          <div class="title-item font-medium">{{ getCategoryName(row.category, row.type) }}</div>
        </td>
        <td>
          @for (item of row.consequences; track $index) {
            <div class="consequence-item">{{ getConsequenceName(item) }}</div>
          }
        </td>
        <td>
          {{ row.level }}
        </td>
        <td>
          <div class="related-item">
            @if (row.involvedOperations.length > 0) {
              <div class="flex">
                <div>作业：</div>
                <div>
                  @for (op of row.involvedOperations; track $index) {
                    <div class="related-item">{{ getOperationName(op) }}</div>
                  }
                </div>
              </div>
            }
            @if (row.involvedPositions.length > 0) {
              <div class="flex">
                <div>场所：</div>
                <div>
                  @for (pos of row.involvedPositions; track $index) {
                    <div class="related-item">{{ getPositionName(pos) }}</div>
                  }
                </div>
              </div>
            }
            @if (row.involvedEquipments.length > 0) {
              <div class="flex">
                <div>设备：</div>
                <div>
                  @for (eq of row.involvedEquipments; track $index) {
                    <div class="related-item">{{ getEquipmentName(eq) }}</div>
                  }
                </div>
              </div>
            }
          </div>
        </td>
        <td>
          @for (job of row.responsiblePositions; track job) {
            <div class="job-item">{{ getJobName(job) }}</div>
          }
        </td>
        <td>
          @for (association of row.associations; track association) {
            <div class="association-item flex">
              <div class="mr-2">{{ $index }}:</div>
              <div>
                <div>事件名称：{{ association.title }}</div>
                <div>事件描述：{{ association.content }}</div>
                <div>造成后果：{{ association.consequence }}</div>
              </div>
            </div>
          }
        </td>
        <td>
          @for (reg of row.regulations; track $index) {
            <div class="rule-item">
              <span
                class="line-clamp-1"
                nz-tooltip
                nzTooltipColor="var(--manager-gray)"
                nzTooltipOverlayClassName="customTooltip"
                [nzTooltipTitle]="docTpl"
              >
                <span class="mr-2">{{ $index }}:</span>
                <span class="">
                  {{ getDocName(reg) }}
                </span>
              </span>
            </div>
            <ng-template #docTpl>
              <span class="hover:underline cursor-pointer" (click)="onView(getDocDto(reg)?.url)">
                {{ getDocName(reg) }}
              </span>
            </ng-template>
          }
        </td>
        <td>
          <span
            class="line-clamp-3 whitespace-pre-line"
            nz-tooltip
            nzTooltipColor="var(--manager-gray)"
            nzTooltipOverlayClassName="customTooltip"
            [nzTooltipTitle]="titleTpl"
          >
            {{ row.requirement }}
          </span>
          <ng-template #titleTpl>
            <span class="whitespace-pre-line">{{ row.requirement }}</span>
          </ng-template>
        </td>
        <td>
          <span
            class="line-clamp-2"
            nz-tooltip
            nzTooltipColor="var(--manager-gray)"
            nzTooltipOverlayClassName="customTooltip"
            [nzTooltipTitle]="row.otherMeasure"
          >
            {{ row.otherMeasure }}
          </span>
        </td>
        <td class="whitespace-pre-line">
          {{ row.responsiblePerson }}
        </td>
        <td class="whitespace-pre-line">
          {{ row.specificUnit }}
        </td>
        <td [nzRight]="'0px'">
          <span class="leading-8">
            <button
              class="precaution-secondary px-2"
              nz-button
              nzSize="small"
              nzType="primary"
              (click)="handleEdit(row)"
            >
              编辑
            </button>
            <button
              class="precaution-secondary px-2 ml-2"
              nz-button
              nzSize="small"
              nzType="primary"
              nzDanger
              (click)="handleRemove(row)"
            >
              删除
            </button>
            <button
              class="precaution-button px-2 ml-2"
              nz-button
              nzSize="small"
              nzType="primary"
              (click)="toRecord(row)"
            >
              更新记录
            </button>
          </span>
        </td>
      </tr>
    }
  </tbody>
</nz-table>
