<div class="">
  <div class="card-header" [class.assessed]="data.status === assessed">
    <div
      class="status-block"
      [class]="{
        'unassessed': data.status === unassessed,
        'assessing': data.status === assessing,
        'assessed': data.status === assessed,
      }"
    >
      @if (data.status === assessed) {
        <span nz-icon nzType="icons:check-circle" class="mr-2"></span>
      }
      <span>{{ statusText }}</span>
      @if (data.status === assessed) {
        <span class="ml-2">(A)</span>
      }
    </div>
  </div>
  <div class="card-body">
    <div class="body-top">
      <div class="priority" [class]="{ 'normal': data.priority === normal, 'emergency': data.priority === emergency }">
        {{ priorityText }}
      </div>
    </div>
    <div class="body-center">
      <div class="type row">
        <span nz-icon nzType="icons:leaf" class="icon"></span>
        <span class="label">问题类型：</span>
        <span>{{ problemTypeText }}</span>
      </div>
      <div class="report-time row">
        <span nz-icon nzType="icons:clock" class="icon"></span>
        <span class="label">上报时间：</span>
        <span>{{ data.reportingTime | date: 'yyyy/MM/dd' }}</span>
      </div>
      <div class="department row">
        <span nz-icon nzType="icons:building" class="icon"></span>
        <span class="label">上报部门：</span>
        <span>{{ data.department }}</span>
      </div>
    </div>
    <div class="body-bottom">
      <button
        nz-button
        nzType="primary"
        class="precaution-secondary"
        style="border-radius: 18px; padding-right: 12px"
        (click)="handleViewDetail()"
      >
        <span>查看详情</span>
        <span nz-icon nzType="right" style="font-size: 12px"></span>
      </button>
    </div>
  </div>
</div>
