<template>
  <div class="app-container exam-report-container">
    <el-row :gutter="20" class="full-height-row">
      <!-- 左侧信息栏 -->
      <el-col :lg="6" :md="8" :sm="24" :xs="24" class="info-sidebar-col">
        <el-card shadow="never" class="info-sidebar">
          <div class="sidebar-section">
            <h3 class="section-title">考生信息</h3>
            <ul class="info-list">
              <li><span class="label">姓名：</span><span class="value">张三</span></li>
              <li><span class="label">报名岗位：</span><span class="value">审计</span></li>
              <li><span class="label">来源：</span><span class="value">-</span></li>
              <li><span class="label">开始时间：</span><span class="value">2024-06-13 09:49:47</span></li>
              <li><span class="label">结束时间：</span><span class="value">2024-06-13 09:50:26</span></li>
              <li><span class="label">答题时长：</span><span class="value">0分39秒</span></li>
              <li><span class="label">浏览器：</span><span class="value">Unknown Browser</span></li>
              <li><span class="label">操作系统：</span><span class="value">iPhone iOS 17.5.1</span></li>
              <li><span class="label">用户IP：</span><span class="value">59.46.39.185</span></li>
            </ul>
          </div>

          <div class="sidebar-section mt30">
            <h3 class="section-title">能力分析</h3>
            <div class="radar-chart-box">
              <svg viewBox="0 0 200 200" class="radar-svg">
                <!-- 背景网格线 -->
                <polygon points="100,20 176,75 147,165 53,165 24,75" fill="none" stroke="#eee" stroke-width="1" />
                <polygon points="100,50 148,85 130,140 70,140 52,85" fill="none" stroke="#eee" stroke-width="1" />
                <polygon points="100,80 119,94 112,115 88,115 81,94" fill="none" stroke="#eee" stroke-width="1" />
                <!-- 轴线 -->
                <line x1="100" y1="100" x2="100" y2="20" stroke="#eee" stroke-width="1" />
                <line x1="100" y1="100" x2="176" y2="75" stroke="#eee" stroke-width="1" />
                <line x1="100" y1="100" x2="147" y2="165" stroke="#eee" stroke-width="1" />
                <line x1="100" y1="100" x2="53" y2="165" stroke="#eee" stroke-width="1" />
                <line x1="100" y1="100" x2="24" y2="75" stroke="#eee" stroke-width="1" />
                <!-- 数据填充 -->
                <polygon points="100,40 160,85 130,150 60,145 40,80" fill="rgba(64, 158, 255, 0.3)" stroke="#409eff" stroke-width="2" />
                <!-- 数据点 -->
                <circle cx="100" cy="40" r="3" fill="#409eff" />
                <circle cx="160" cy="85" r="3" fill="#409eff" />
                <circle cx="130" cy="150" r="3" fill="#409eff" />
                <circle cx="60" cy="145" r="3" fill="#409eff" />
                <circle cx="40" cy="80" r="3" fill="#409eff" />
                <!-- 文字标签 -->
                <text x="100" y="15" text-anchor="middle" font-size="10" fill="#666">综合素质</text>
                <text x="185" y="75" text-anchor="start" font-size="10" fill="#666">沟通</text>
                <text x="155" y="175" text-anchor="middle" font-size="10" fill="#666">抗压</text>
                <text x="45" y="175" text-anchor="middle" font-size="10" fill="#666">应变</text>
                <text x="15" y="75" text-anchor="end" font-size="10" fill="#666">执行力</text>
              </svg>
              <div class="radar-legend">
                <span class="dot"></span> 审计 A
              </div>
            </div>
          </div>

          <div class="sidebar-footer">
            <el-button type="primary" plain class="w100">下一份</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧答题区 -->
      <el-col :lg="18" :md="16" :sm="24" :xs="24" class="content-main-col">
        <el-card shadow="never" class="content-main">
          <div class="questions-list">
            <!-- 题目1 -->
            <div class="question-item">
              <div class="q-header">
                <span class="q-index">第1题</span>
                <div class="q-result">
                  <el-tag type="success" size="small" effect="dark">正确</el-tag>
                  <span class="q-score">得分 <el-input size="small" value="5" readonly style="width: 50px" /></span>
                </div>
              </div>
              <div class="q-body">
                <p class="q-text">请选择一个选项</p>
                <el-radio-group disabled class="vertical-radio-group">
                  <el-radio :label="1" class="is-selected">A. 选项1 <span class="correct-hint">正确答案</span></el-radio>
                  <el-radio :label="2">B. 选项2</el-radio>
                  <el-radio :label="3">C. 选项3</el-radio>
                  <el-radio :label="4">D. 选项4</el-radio>
                </el-radio-group>
              </div>
            </div>

            <el-divider border-style="dashed" />

            <!-- 题目2 -->
            <div class="question-item">
              <div class="q-header">
                <span class="q-index">第2题</span>
                <div class="q-result">
                  <el-tag type="success" size="small" effect="dark">正确</el-tag>
                  <span class="q-score">得分 <el-input size="small" value="5" readonly style="width: 50px" /></span>
                </div>
              </div>
              <div class="q-body">
                <p class="q-text">请选择一个选项</p>
                <el-radio-group disabled class="vertical-radio-group">
                  <el-radio :label="1" class="is-selected">A. 选项1 <span class="correct-hint">正确答案</span></el-radio>
                  <el-radio :label="2">B. 选项2</el-radio>
                  <el-radio :label="3">C. 选项3</el-radio>
                  <el-radio :label="4">D. 选项4</el-radio>
                </el-radio-group>
              </div>
            </div>

            <el-divider border-style="dashed" />

            <!-- 题目3：简答题 -->
            <div class="question-item">
              <div class="q-header">
                <span class="q-index">第3题</span>
                <div class="q-result">
                  <el-tag type="warning" size="small" effect="dark">人工评分</el-tag>
                  <span class="q-score">得分 <el-input size="small" value="0" style="width: 50px" /></span>
                </div>
              </div>
              <div class="q-body">
                <p class="q-text">请简述XXXXXXXX</p>
                <div class="user-answer-box">
                  123123213213213
                </div>

                <!-- 浮动点评框 -->
                <div class="comment-bubble">
                  <div class="bubble-header">
                    <span class="badge">2</span>
                    <span class="title">公司端可进行人工评分</span>
                  </div>
                  <div class="bubble-desc">链接访问、用人单位不可进行人工评分。</div>
                  <div class="bubble-footer">微信用户1646818187 2025.09.23</div>
                  <div class="bubble-pointer"></div>
                </div>

                <div class="answer-analysis mt30">
                  <p class="analysis-title">答案解析：</p>
                  <p class="analysis-content">解析解析解析解析解析解析解析解析解析解析解析</p>
                </div>
              </div>
            </div>
          </div>

          <div class="content-footer">
            <el-button @click="goBack">返回列表</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="ExamReport">
import { useRouter } from 'vue-router';

const router = useRouter();

const goBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.exam-report-container {
  padding: 20px;
  background-color: #f7f8fa;
  min-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}

.full-height-row {
  flex: 1;
}

.info-sidebar, .content-main {
  height: 100%;
  border-radius: 8px;
}

// 左侧栏样式
.info-sidebar {
  display: flex;
  flex-direction: column;
  padding: 10px;

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

  .info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    li {
      margin-bottom: 12px;
      font-size: 13px;
      display: flex;
      .label { color: #666; width: 80px; flex-shrink: 0; }
      .value { color: #333; }
    }
  }

  .score-item, .total-score-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .label { font-size: 14px; color: #333; font-weight: 600; }
  }

  .mt30 { margin-top: 30px; }

  .sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
  }
}

// 右侧主区域样式
.content-main {
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .questions-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 15px;
  }

  .question-item {
    margin-bottom: 30px;
    position: relative;
  }

  .q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .q-index { font-weight: 700; color: #999; }
    .q-score { margin-left: 10px; font-size: 13px; color: #666; }
  }

  .q-text { font-size: 15px; font-weight: 600; margin-bottom: 15px; color: #333; }

  .vertical-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    :deep(.el-radio) {
      margin-right: 0;
      &.is-selected {
        .el-radio__label { color: #303133; font-weight: 600; }
        .el-radio__inner { background-color: #007bff; border-color: #007bff; }
      }
    }
    .correct-hint { color: #67C23A; font-weight: 600; margin-left: 10px; }
  }

  .user-answer-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  // 点评框样式
  .comment-bubble {
    width: 320px;
    background-color: #fff;
    border: 2px solid #FFD964;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    margin-left: auto;
    margin-right: 100px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

    .bubble-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      .badge { background: #FFD964; color: #333; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
      .title { font-weight: 700; font-size: 14px; }
    }
    .bubble-desc { font-size: 13px; color: #333; margin-bottom: 15px; line-height: 1.5; }
    .bubble-footer { font-size: 12px; color: #999; text-align: left; }
    
    .bubble-pointer {
      position: absolute;
      left: -22px;
      top: 50px;
      width: 20px;
      height: 2px;
      background-color: #FFD964;
      &:after {
        content: '';
        position: absolute;
        left: -8px;
        top: -3px;
        width: 8px;
        height: 8px;
        background: #FFD964;
        border-radius: 50%;
      }
    }
  }

  .answer-analysis {
    .analysis-title { font-weight: 700; margin-bottom: 10px; }
    .analysis-content { color: #999; font-size: 13px; }
  }

  .content-footer {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    margin-top: 20px;
    border-top: 1px solid #efefef;
  }
}

.w100 { width: 100%; }

// 响应式微调
@media screen and (max-width: 992px) {
  .full-height-row { flex-direction: column; }
  .info-sidebar-col { margin-bottom: 20px; }
  .comment-bubble { margin-right: 0; width: 100%; }
}
</style>
