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

            <div class="section-title mt30">答题信息</div>
            <div class="score-summary">
              <div class="summary-item">
                <span class="label">能力测试：</span>
                <span class="value">10/30</span>
                <el-tag type="success" size="small" effect="dark">通过</el-tag>
              </div>
              <div class="summary-item">
                <span class="label">实操能力：</span>
                <span class="value">20/40</span>
                <el-tag type="warning" size="small" effect="dark">人工评分</el-tag>
              </div>
              <div class="summary-item">
                <span class="label">性格：</span>
                <span class="value">12/34</span>
                <el-tag type="danger" size="small" effect="dark">未通过</el-tag>
              </div>
              <div class="summary-divider"></div>
              <div class="summary-item total">
                <span class="label">总得分：</span>
                <span class="value">42/100</span>
                <el-tag type="danger" size="small" effect="dark">未通过</el-tag>
              </div>
            </div>
          </el-card>

          <el-button class="next-btn" plain @click="handleNext">下一份</el-button>
        </div>
      </el-col>

      <!-- 2. 右侧主内容：详细答题区 -->
      <el-col :span="18">
        <div class="content-wrapper">
          <!-- 题目1：选择题 -->
          <el-card class="box-card mb20" shadow="never">
            <div class="question-header">
              <span class="q-num">第1题</span>
              <div class="q-status">
                <el-tag type="success" effect="dark" size="small">正确</el-tag>
                <div class="score-input-box">
                  <span class="label">得分</span>
                  <el-input value="5" readonly size="small" style="width: 50px" />
                </div>
              </div>
            </div>
            <div class="question-body">
              <div class="q-text">请选择一个选项</div>
              <el-radio-group disabled class="q-options" model-value="A">
                <el-radio label="A">A.选项1 <span class="correct-label">正确答案</span></el-radio>
                <el-radio label="B">B.选项2</el-radio>
                <el-radio label="C">C.选项3</el-radio>
                <el-radio label="D">D.选项4</el-radio>
              </el-radio-group>
            </div>
          </el-card>

          <!-- 题目2：选择题 -->
          <el-card class="box-card mb20" shadow="never">
            <div class="question-header">
              <span class="q-num">第2题</span>
              <div class="q-status">
                <el-tag type="success" effect="dark" size="small">正确</el-tag>
                <div class="score-input-box">
                  <span class="label">得分</span>
                  <el-input value="5" readonly size="small" style="width: 50px" />
                </div>
              </div>
            </div>
            <div class="question-body">
              <div class="q-text">请选择一个选项</div>
              <el-radio-group disabled class="q-options" model-value="A">
                <el-radio label="A">A.选项1 <span class="correct-label">正确答案</span></el-radio>
                <el-radio label="B">B.选项2</el-radio>
                <el-radio label="C">C.选项3</el-radio>
                <el-radio label="D">D.选项4</el-radio>
              </el-radio-group>
            </div>
          </el-card>

          <!-- 题目3：简答题（带人工阅卷功能） -->
          <el-card class="box-card mb20" shadow="never">
            <div class="question-header">
              <span class="q-num">第3题</span>
              <div class="q-status">
                <el-tag type="warning" effect="dark" size="small">人工评分</el-tag>
                <div class="grading-panel">
                   <div class="grading-label">是否正确</div>
                   <div class="grade-btns">
                      <el-button size="small" :class="{ 'active': isCorrect === true }" @click="isCorrect = true">
                        <el-icon><i-ep-check /></el-icon>
                      </el-button>
                      <el-button size="small" type="danger" :class="{ 'active': isCorrect === false }" @click="isCorrect = false">
                        <el-icon><i-ep-close /></el-icon>
                      </el-button>
                   </div>
                   <div class="grading-score">
                     <span class="label">得分</span>
                     <el-tooltip content="请输入0-10以内的数值" placement="top">
                        <el-input v-model="form.manualScore" size="small" style="width: 60px" />
                     </el-tooltip>
                   </div>
                </div>
              </div>
            </div>
            <div class="question-body">
              <div class="q-text">请简述XXXXXXX</div>
              <div class="q-answer-box">
                 123123213213213
              </div>
              <div class="q-analysis mt20">
                <div class="label">答案解析：</div>
                <div class="text">解析解析解析解析解析解析解析解析解析</div>
              </div>
            </div>
          </el-card>
        </div>

        <!-- 页面底部操作 -->
        <div class="form-actions mt30 pb30">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const isCorrect = ref(false);

const form = reactive({
  manualScore: '0'
});

const handleNext = () => {
    // 切换到下一个考生
};

const handleCancel = () => {
    router.back();
};

const handleSave = () => {
    // 保存评分 API
};
</script>

<style scoped lang="scss">
.report-page {
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
  padding: 24px;
}

.box-card {
  border: none;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,0.08);
}

.sidebar-wrapper {
  position: sticky;
  top: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 20px;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    font-size: 14px;
    color: #4e5969;
    margin-bottom: 12px;
    line-height: 1.5;
    .label {
      color: #86909c;
    }
  }
}

.score-summary {
  .summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    .label { font-size: 14px; color: #4e5969; }
    .value { font-size: 14px; color: #1d2129; flex: 1; text-align: right; margin-right: 12px; font-weight: 500;}
    
    &.total {
       .label { font-weight: 600; color: #1d2129; }
       .value { font-size: 18px; color: #f53f3f; font-weight: 700; }
    }
  }
  .summary-divider {
    height: 1px;
    background-color: #e5e6eb;
    margin-bottom: 20px;
  }
}

.next-btn {
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border-radius: 8px;
  color: #409eff;
  border-color: #cfe6ff;
  background-color: #f2f8ff;
}

/* 右侧题目区样式 */
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  .q-num { font-size: 15px; font-weight: 600; color: #1d2129; }
  .q-status {
    display: flex;
    align-items: center;
    gap: 15px;
    .score-input-box {
       display: flex;
       align-items: center;
       gap: 8px;
       font-size: 13px;
       color: #4e5969;
    }
  }
}

.question-body {
  .q-text { font-size: 16px; font-weight: 500; color: #1d2129; margin-bottom: 20px; }
  .q-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    :deep(.el-radio) {
      margin-right: 0;
      .correct-label {
        color: #52c41a;
        font-size: 13px;
        margin-left: 10px;
        font-weight: 500;
      }
    }
  }
  .q-answer-box {
     min-height: 100px;
     background-color: #f7f8fa;
     border: 1px solid #e5e6eb;
     border-radius: 4px;
     padding: 16px;
     font-size: 14px;
     color: #1d2129;
     line-height: 1.6;
  }
}

/* 人工评分控制面板 */
.grading-panel {
  display: flex;
  align-items: center;
  gap: 15px;
  .grading-label { font-size: 13px; color: #4e5969; font-weight: 500; }
  .grade-btns {
    display: flex;
    gap: 5px;
    .el-button {
      background-color: #f7f8fa;
      border: 1px solid #e5e6eb;
      &.active { border-color: transparent; }
    }
  }
  .grading-score {
    display: flex;
    align-items: center;
    gap: 8px;
    .label { font-size: 13px; color: #4e5969; }
  }
}

.q-analysis {
  background-color: #f2f3f5;
  padding: 12px 16px;
  border-radius: 4px;
  .label { font-size: 14px; color: #1d2129; font-weight: 500; margin-bottom: 8px; }
  .text { font-size: 14px; color: #4e5969; line-height: 1.6; }
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mt30 { margin-top: 30px; }
.pb30 { padding-bottom: 30px; }
</style>
