<template>
  <!-- 常规视图 -->
  <div class="task-progress">
    <div class="progress-title">
      <!-- 正在排查的机构 - 仅运行中的任务显示 -->
      <span v-if="isCurrentTaskRunning" class="current-institution">
        正在排查【{{ currentInstitutionName }}】
      </span>

      <!-- 已排查的机构数量和列表 - 仅运行中的任务显示 -->
      <span v-if="isCurrentTaskRunning" class="inspected-count">
        已经排查{{ inspectedCount }}家机构
      </span>

      <!-- 机构列表 -->
      <span class="institutions-list">
        <span
          v-for="(institution, index) in institutionsList"
          :key="index"
          class="institution-item"
          :style="{ color: getInstitutionColor(institution) }"
        >
          【{{ institution.name }}】{{ index < institutionsList.length - 1 ? '、' : '' }}
        </span>
      </span>
    </div>
  </div>

  <!-- 检测事项表格 -->
  <div class="detection-table">
    <div
      class="detection-item"
      v-for="(item, index) in selectedTaskData.detectionItems || []"
      :key="index"
    >
      <h4 class="detection-title">{{ item.title }}</h4>
      <table class="result-table">
        <colgroup>
          <col style="width: 25%" />
          <col style="width: 20%" />
          <col style="width: 35%" />
          <col style="width: 20%" />
        </colgroup>
        <thead>
          <tr>
            <th>具体检测事项</th>
            <th>AI检查结果</th>
            <th>问题详情（如有）</th>
            <th>证据溯源（点击查看截图）</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in item.tableData" :key="rowIndex">
            <td>{{ row.item }}</td>
            <td
              :class="{
                checking: isChecking(index, rowIndex),
              }"
            >
              <span
                v-if="
                  isChecked(index, rowIndex) ||
                  !isCurrentTaskRunning ||
                  index < 1 ||
                  (index === 1 && rowIndex < 1)
                "
              >
                <span v-if="row.result === '正常'">
                  <el-icon class="check-icon"><Check /></el-icon>
                  {{ row.result }}
                </span>
                <span v-else-if="row.result === '低风险'">
                  <el-icon class="warning-icon"><Warning /></el-icon>
                  {{ row.result }}
                </span>
                <span v-else-if="row.result === '高风险'">
                  <el-icon class="danger-icon"><Close /></el-icon>
                  {{ row.result }}
                </span>
                <span v-else-if="row.result === '异常'">
                  <el-icon class="danger-icon"><Close /></el-icon>
                  {{ row.result }}
                </span>
                <span v-else>{{ row.result }}</span>
              </span>
              <span v-else-if="isChecking(index, rowIndex)">正在检测中...</span>
              <span v-else>-</span>
            </td>
            <td>
              {{
                isChecked(index, rowIndex) ||
                !isCurrentTaskRunning ||
                index < 1 ||
                (index === 1 && rowIndex < 1)
                  ? row.details
                  : '-'
              }}
            </td>
            <td>
              {{
                isChecked(index, rowIndex) ||
                !isCurrentTaskRunning ||
                index < 1 ||
                (index === 1 && rowIndex < 1)
                  ? row.evidence
                  : '-'
              }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Check, Warning, Close } from '@element-plus/icons-vue'

interface Institution {
  name: string
  problemCount?: number
}

interface TableRow {
  item: string
  result: string
  details: string
  evidence: string
}

interface DetectionItem {
  title: string
  tableData: TableRow[]
}

interface TaskData {
  detectionItems?: DetectionItem[]
  institutionsList?: Institution[]
}

interface Props {
  selectedTaskData: TaskData
  isCurrentTaskRunning: boolean
  currentInstitutionName: string
  inspectedCount: number
  institutionsList: Institution[]
  isChecked: (detectionIndex: number, itemIndex: number) => boolean
  isChecking: (detectionIndex: number, itemIndex: number) => boolean
  getInstitutionColor: (institution: Institution) => string
}

defineProps<Props>()
</script>

<style lang="scss" scoped>
$neon-green: #00d6c0;
$neon-blue: #00fff4;
$neon-cyan: #00ffe6;

.task-progress {
  flex-shrink: 0;
  padding: 0 20px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 255, 230, 0.1) 100%
  );
  overflow: hidden;

  .progress-title {
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 500;
    color: $neon-cyan;
    line-height: 72px;
    letter-spacing: 1px;
    gap: 15px;

    .current-institution {
      font-weight: 500;
      font-size: 40px;
      line-height: 72px;
      letter-spacing: 2px;
      white-space: nowrap;
    }

    .inspected-count {
      white-space: nowrap;
    }

    .institutions-list {
      flex: 1;
      min-width: 0;
      overflow-x: auto;
      white-space: nowrap;

      &::-webkit-scrollbar {
        display: none;
      }

      .institution-item {
        margin-right: 10px;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}

.detection-table {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 20px;
  overflow-y: auto;

  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 255, 230, 0.1);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #00ffe6, #00d6c0);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 255, 230, 0.5);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #00d6c0, #00b3a0);
  }

  .detection-item {
    .detection-title {
      font-weight: 400;
      font-size: 40px;
      color: rgba(0, 255, 230, 0.7);
      line-height: 72px;
      letter-spacing: 2px;
      margin-bottom: 15px;
    }

    .result-table {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      th,
      td {
        padding: 15px;
        text-align: center;
        border: 1px solid rgba(0, 255, 230, 0.2);
        color: $neon-green;
        font-size: 32px;
      }

      th {
        background: rgba(0, 255, 230, 0.02);
        font-weight: bold;
        color: $neon-cyan;
      }

      tr:hover {
        background: rgba(0, 255, 230, 0.05);
      }
    }
  }
}
</style>
