<template>
  <div class="exam-result-container">
    <div class="result-card card">
      <!-- 成绩展示 -->
      <div class="result-header">
        <div class="score-circle" :class="scoreLevel">
          <div class="score-value">{{ examResult.score }}</div>
          <div class="score-label">分</div>
        </div>
        
        <div class="result-info">
          <h1 class="exam-title">{{ examResult.examTitle }}</h1>
          <div class="result-meta">
            <span class="meta-item">
              <el-icon><Clock /></el-icon>
              用时：{{ formatDuration(examResult.duration) }}
            </span>
            <span class="meta-item">
              <el-icon><Document /></el-icon>
              题数：{{ examResult.totalQuestions }}
            </span>
            <span class="meta-item">
              <el-icon><CircleCheck /></el-icon>
              正确：{{ examResult.correctCount }}
            </span>
            <span class="meta-item">
              <el-icon><CircleClose /></el-icon>
              错误：{{ examResult.wrongCount }}
            </span>
          </div>
          
          <div class="result-status">
            <el-tag :type="examResult.passed ? 'success' : 'danger'" size="large">
              {{ examResult.passed ? '考试通过' : '未通过' }}
            </el-tag>
            <span class="pass-line">及格线：{{ examResult.passScore }}分</span>
          </div>
        </div>
      </div>

      <!-- 统计分析 -->
      <div class="statistics-section">
        <h2 class="section-title">答题统计</h2>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-label">正确率</div>
            <div class="stat-value">{{ examResult.accuracy }}%</div>
            <el-progress :percentage="examResult.accuracy" :color="getProgressColor(examResult.accuracy)" />
          </div>
          <div class="stat-item">
            <div class="stat-label">排名</div>
            <div class="stat-value">{{ examResult.rank }}/{{ examResult.totalParticipants }}</div>
            <div class="stat-desc">超过了{{ examResult.surpassRate }}%的人</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">平均用时</div>
            <div class="stat-value">{{ examResult.avgTimePerQuestion }}秒/题</div>
            <div class="stat-desc">{{ examResult.timeEfficiency }}</div>
          </div>
        </div>
      </div>

      <!-- 各轮次得分 -->
      <div class="round-scores-section">
        <h2 class="section-title">各轮次得分</h2>
        <div class="round-scores">
          <div class="round-item" v-for="round in examResult.roundScores" :key="round.round">
            <div class="round-header">
              <span class="round-label">第{{ round.round }}轮</span>
              <span class="round-score" :class="getScoreClass(round.score)">{{ round.score }}分</span>
            </div>
            <div class="round-details">
              <div class="detail-item">
                <span class="detail-label">题数：</span>
                <span class="detail-value">{{ round.questions }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">正确：</span>
                <span class="detail-value correct">{{ round.correct }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">错误：</span>
                <span class="detail-value wrong">{{ round.wrong }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">正确率：</span>
                <span class="detail-value">{{ Math.round(round.correct / round.questions * 100) }}%</span>
              </div>
            </div>
            <el-progress 
              :percentage="Math.round(round.correct / round.questions * 100)" 
              :color="getProgressColor(Math.round(round.correct / round.questions * 100))"
              :show-text="false"
            />
          </div>
        </div>
      </div>

      <!-- 题型分析 -->
      <div class="type-analysis-section">
        <h2 class="section-title">题型分析</h2>
        <div class="type-stats">
          <div class="type-item" v-for="type in questionTypeStats" :key="type.type">
            <div class="type-header">
              <span class="type-name">{{ type.name }}</span>
              <span class="type-accuracy">正确率：{{ type.accuracy }}%</span>
            </div>
            <el-progress :percentage="type.accuracy" :color="getProgressColor(type.accuracy)" />
            <div class="type-detail">
              <span>共{{ type.total }}题</span>
              <span>正确{{ type.correct }}题</span>
              <span>错误{{ type.wrong }}题</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 错题记录 -->
      <div class="mistakes-section" v-if="mistakes.length > 0">
        <h2 class="section-title">错题记录</h2>
        <div class="mistakes-list">
          <div class="mistake-item" v-for="(mistake, _index) in mistakes" :key="mistake.id">
            <div class="mistake-header">
              <span class="question-number">第{{ mistake.number }}题</span>
              <el-tag :type="getQuestionTypeTag(mistake.type)" size="small">
                {{ getQuestionTypeText(mistake.type) }}
              </el-tag>
            </div>
            
            <div class="mistake-content">
              <h4 class="question-title">{{ mistake.title }}</h4>
              
              <div class="answer-comparison">
                <div class="answer-item your-answer">
                  <span class="answer-label">你的答案：</span>
                  <span class="answer-value wrong">{{ mistake.yourAnswer }}</span>
                </div>
                <div class="answer-item correct-answer">
                  <span class="answer-label">正确答案：</span>
                  <span class="answer-value correct">{{ mistake.correctAnswer }}</span>
                </div>
              </div>
              
              <div class="explanation">
                <div class="explanation-title">
                  <el-icon><InfoFilled /></el-icon>
                  答案解析
                </div>
                <p class="explanation-content">{{ mistake.explanation }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="viewReport">查看详细报告</el-button>
        <el-button @click="retakeExam">重新考试</el-button>
        <el-button v-if="examResult.passed" type="primary" @click="startPractice">
          开始陪练
        </el-button>
        <el-button type="primary" @click="backToCourse">
          返回课程
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 考试结果数据
const examResult = ref({
  examTitle: '销售技巧基础训练 - 期末考试',
  score: 85,
  passScore: 60,
  passed: true,
  totalQuestions: 50,
  correctCount: 42,
  wrongCount: 8,
  duration: 3600,
  accuracy: 84,
  rank: 12,
  totalParticipants: 156,
  surpassRate: 92.3,
  avgTimePerQuestion: 72,
  timeEfficiency: '答题速度适中',
  // 三轮考试得分
  roundScores: [
    { round: 1, score: 75, questions: 50, correct: 38, wrong: 12 },
    { round: 2, score: 82, questions: 12, correct: 10, wrong: 2 },
    { round: 3, score: 100, questions: 2, correct: 2, wrong: 0 }
  ]
})

// 分数等级
const scoreLevel = computed(() => {
  const score = examResult.value.score
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
})

// 题型统计
const questionTypeStats = ref([
  {
    type: 'single',
    name: '单选题',
    total: 20,
    correct: 18,
    wrong: 2,
    accuracy: 90
  },
  {
    type: 'multiple',
    name: '多选题',
    total: 15,
    correct: 12,
    wrong: 3,
    accuracy: 80
  },
  {
    type: 'judge',
    name: '判断题',
    total: 10,
    correct: 8,
    wrong: 2,
    accuracy: 80
  },
  {
    type: 'blank',
    name: '填空题',
    total: 5,
    correct: 4,
    wrong: 1,
    accuracy: 80
  }
])

// 错题列表
const mistakes = ref([
  {
    id: 1,
    number: 12,
    type: 'single',
    title: '以下哪个不是有效的客户沟通技巧？',
    yourAnswer: 'B',
    correctAnswer: 'C',
    explanation: '在客户沟通中，倾听比说话更重要。选项C中的"打断客户发言"违背了有效沟通的基本原则。'
  },
  {
    id: 2,
    number: 25,
    type: 'multiple',
    title: '成功的销售人员应该具备哪些特质？',
    yourAnswer: 'A, B, D',
    correctAnswer: 'A, B, C, D',
    explanation: '成功的销售人员需要具备多方面的特质，包括良好的沟通能力、同理心、专业知识和持续学习的态度。选项C"抗压能力"也是必不可少的。'
  },
  {
    id: 3,
    number: 38,
    type: 'judge',
    title: '销售过程中，价格是决定客户购买的唯一因素。',
    yourAnswer: '正确',
    correctAnswer: '错误',
    explanation: '价格只是影响客户购买决策的因素之一。产品质量、服务、品牌信誉、售后支持等都是重要的考虑因素。'
  }
])

/**
 * 格式化时长
 */
const formatDuration = (seconds: number) => {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = seconds % 60
  
  if (h > 0) {
    return `${h}小时${m}分钟${s}秒`
  }
  return `${m}分钟${s}秒`
}

/**
 * 获取进度条颜色
 */
const getProgressColor = (percentage: number) => {
  if (percentage >= 90) return '#67c23a'
  if (percentage >= 75) return '#409eff'
  if (percentage >= 60) return '#e6a23c'
  return '#f56c6c'
}

/**
 * 获取分数样式类
 */
const getScoreClass = (score: number) => {
  if (score >= 90) return 'excellent'
  if (score >= 80) return 'good'
  if (score >= 60) return 'pass'
  return 'fail'
}

/**
 * 获取题型标签类型
 */
const getQuestionTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    single: '',
    multiple: 'success',
    judge: 'warning',
    blank: 'danger'
  }
  return typeMap[type] || ''
}

/**
 * 获取题型文本
 */
const getQuestionTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    blank: '填空题'
  }
  return typeMap[type] || ''
}

/**
 * 查看详细报告
 */
const viewReport = () => {
  ElMessage.info('生成详细分析报告中...')
}

/**
 * 重新考试
 */
const retakeExam = () => {
  router.push('/trainee/exam')
}

/**
 * 开始陪练
 */
const startPractice = () => {
  router.push('/trainee/ai-practice')
}

/**
 * 返回课程
 */
const backToCourse = () => {
  router.push('/trainee/course-center')
}
</script>

<style lang="scss" scoped>
.exam-result-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;

  .result-card {
    padding: 32px;

    .result-header {
      display: flex;
      gap: 48px;
      padding-bottom: 32px;
      border-bottom: 1px solid #ebeef5;
      margin-bottom: 32px;

      .score-circle {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #f5f7fa;

        &::before {
          content: '';
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          padding: 4px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
        }

        &.excellent::before {
          background: linear-gradient(135deg, #67c23a 0%, #409eff 100%);
        }

        &.good::before {
          background: linear-gradient(135deg, #409eff 0%, #667eea 100%);
        }

        &.pass::before {
          background: linear-gradient(135deg, #e6a23c 0%, #f56c6c 100%);
        }

        &.fail::before {
          background: linear-gradient(135deg, #f56c6c 0%, #909399 100%);
        }

        .score-value {
          font-size: 48px;
          font-weight: 700;
          color: #333;
        }

        .score-label {
          font-size: 16px;
          color: #666;
        }
      }

      .result-info {
        flex: 1;

        .exam-title {
          font-size: 24px;
          font-weight: 600;
          color: #333;
          margin-bottom: 16px;
        }

        .result-meta {
          display: flex;
          gap: 24px;
          margin-bottom: 20px;

          .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: #666;

            .el-icon {
              color: #909399;
            }
          }
        }

        .result-status {
          display: flex;
          align-items: center;
          gap: 16px;

          .pass-line {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }

    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 20px;
    }

    .statistics-section {
      margin-bottom: 32px;

      .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;

        .stat-item {
          text-align: center;
          padding: 20px;
          background: #f5f7fa;
          border-radius: 12px;

          .stat-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
          }

          .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
          }

          .stat-desc {
            font-size: 13px;
            color: #909399;
            margin-top: 8px;
          }
        }
      }
    }

    .round-scores-section {
      margin-bottom: 32px;

      .round-scores {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;

        .round-item {
          padding: 20px;
          background: #f9fafb;
          border-radius: 12px;
          border: 1px solid #ebeef5;
          transition: all 0.3s;

          &:hover {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          }

          .round-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .round-label {
              font-size: 16px;
              font-weight: 500;
              color: #333;
            }

            .round-score {
              font-size: 24px;
              font-weight: 700;

              &.excellent {
                color: #67c23a;
              }

              &.good {
                color: #409eff;
              }

              &.pass {
                color: #e6a23c;
              }

              &.fail {
                color: #f56c6c;
              }
            }
          }

          .round-details {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;

            .detail-item {
              display: flex;
              align-items: center;
              gap: 4px;
              font-size: 13px;

              .detail-label {
                color: #909399;
              }

              .detail-value {
                color: #606266;
                font-weight: 500;

                &.correct {
                  color: #67c23a;
                }

                &.wrong {
                  color: #f56c6c;
                }
              }
            }
          }

          .el-progress {
            height: 6px;
            
            :deep(.el-progress-bar) {
              border-radius: 3px;
            }
          }
        }
      }
    }

    .type-analysis-section {
      margin-bottom: 32px;

      .type-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        .type-item {
          padding: 16px;
          background: #f9fafb;
          border-radius: 8px;

          .type-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;

            .type-name {
              font-size: 15px;
              font-weight: 500;
              color: #333;
            }

            .type-accuracy {
              font-size: 14px;
              color: #666;
            }
          }

          .type-detail {
            display: flex;
            gap: 16px;
            margin-top: 12px;
            font-size: 13px;
            color: #909399;
          }
        }
      }
    }

    .mistakes-section {
      margin-bottom: 32px;

      .mistakes-list {
        .mistake-item {
          padding: 20px;
          background: #fff;
          border: 1px solid #ebeef5;
          border-radius: 8px;
          margin-bottom: 16px;

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

          .mistake-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .question-number {
              font-size: 14px;
              font-weight: 500;
              color: #666;
            }
          }

          .mistake-content {
            .question-title {
              font-size: 16px;
              font-weight: 500;
              color: #333;
              margin-bottom: 16px;
              line-height: 1.5;
            }

            .answer-comparison {
              display: flex;
              gap: 32px;
              margin-bottom: 20px;
              padding: 16px;
              background: #f5f7fa;
              border-radius: 8px;

              .answer-item {
                display: flex;
                align-items: center;
                gap: 8px;

                .answer-label {
                  font-size: 14px;
                  color: #666;
                }

                .answer-value {
                  font-size: 15px;
                  font-weight: 500;

                  &.wrong {
                    color: #f56c6c;
                  }

                  &.correct {
                    color: #67c23a;
                  }
                }
              }
            }

            .explanation {
              .explanation-title {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 14px;
                font-weight: 500;
                color: #667eea;
                margin-bottom: 8px;
              }

              .explanation-content {
                font-size: 14px;
                color: #666;
                line-height: 1.6;
                padding-left: 22px;
              }
            }
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
      padding-top: 32px;
      border-top: 1px solid #ebeef5;

      .el-button {
        min-width: 120px;

        &--primary {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border: none;
        }
      }
    }
  }
}

// 响应式
@media (max-width: 768px) {
  .exam-result-container {
    .result-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .statistics-section {
      .stats-grid {
        grid-template-columns: 1fr;
      }
    }

    .round-scores-section {
      .round-scores {
        grid-template-columns: 1fr;
      }
    }

    .type-analysis-section {
      .type-stats {
        grid-template-columns: 1fr;
      }
    }

    .mistakes-section {
      .answer-comparison {
        flex-direction: column;
        gap: 12px !important;
      }
    }

    .action-buttons {
      flex-wrap: wrap;

      .el-button {
        flex: 1;
        min-width: 0;
      }
    }
  }
}
</style>
