<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElButton, ElSpace, ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElTabs, ElTabPane, ElInput, ElMessage } from 'element-plus';

import { Page } from '@vben/common-ui';

// 路由实例
const route = useRoute();
const router = useRouter();

// 是否为批改模式
const isCorrectMode = computed(() => route.query.mode === 'correct');

// 问卷详情数据
const examDetail = ref({
  id: 0,
  examPaperName: '',
  createTime: '',
  endTime: '',
  totalNum: 0,
  participateNum: 0,
  markedNum: 0,
  unmarkedNum: 8,
  description: '',
});

// 当前选中的考生
const currentExaminee = ref({
  id: 1,
  examineeName: '张三',
  submitTime: '2025-11-11 10:30:00',
  score: 90,
  status: '已批改',
});

// 题目数据
const questions = ref([
  {
    id: 1,
    title: '题目题目题目题目题目题目题目题目题目题目。',
    type: '单选题',
    options: ['选项A', '选项B', '选项C', '选项D'],
    correctAnswer: ['A'],
    examineeAnswer: ['A'],
    score: 5,
    maxScore: 5,
    isCorrect: true,
  },
  {
    id: 2,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '单选题',
    options: ['选项A', '选项B', '选项C', '选项D'],
    correctAnswer: ['A'],
    examineeAnswer: ['B'],
    score: 0,
    maxScore: 5,
    isCorrect: false,
  },
  {
    id: 3,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '多选题',
    options: ['选项A', '选项B', '选项C', '选项D'],
    correctAnswer: ['A', 'B', 'C'],
    examineeAnswer: ['A', 'B', 'C'],
    score: 3,
    maxScore: 5,
    isCorrect: true,
  },
  {
    id: 4,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '多选题',
    options: ['选项A', '选项B', '选项C', '选项D'],
    correctAnswer: ['A', 'B', 'C'],
    examineeAnswer: ['A', 'B', 'C'],
    score: 5,
    maxScore: 5,
    isCorrect: true,
  },
  {
    id: 5,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '填空题',
    options: [],
    correctAnswer: ['答案'],
    examineeAnswer: ['答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案。'],
    score: 5,
    maxScore: 5,
    isCorrect: true,
  },
  {
    id: 6,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '填空题',
    options: [],
    correctAnswer: ['答案', '答案', '答案'],
    examineeAnswer: ['答案1', '答案2', '答案3'],
    score: 10,
    maxScore: 15,
    isCorrect: false,
  },
  {
    id: 7,
    title: '题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目题目。',
    type: '简答题',
    options: [],
    correctAnswer: ['答案答案答案答案答案答案答案答案...'],
    examineeAnswer: ['答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案答案。'],
    score: 20,
    maxScore: 25,
    isCorrect: true,
  },
]);

// 批改状态切换
const activeTab = ref('已批改');

// 考生列表数据
const examineeList = ref([
  {
    id: 1,
    examineeName: '张三',
    submitTime: '2025-11-11 10:30:00',
    score: 90,
    status: '已批改',
  },
  {
    id: 2,
    examineeName: '张三',
    submitTime: '2025-11-11 10:45:00',
    score: 85,
    status: '已批改',
  },
  {
    id: 3,
    examineeName: '张三',
    submitTime: '2025-11-11 11:00:00',
    score: 0,
    status: '未批改',
  },
  {
    id: 4,
    examineeName: '张三',
    submitTime: '2025-11-11 11:15:00',
    score: 0,
    status: '未批改',
  },
  {
    id: 5,
    examineeName: '张三',
    submitTime: '2025-11-11 11:30:00',
    score: 0,
    status: '未批改',
  },
]);

// 计算总得分
const totalScore = computed(() => {
  return questions.value.reduce((sum, question) => sum + question.score, 0);
});

// 过滤后的考生列表
const filteredExaminees = computed(() => {
  return examineeList.value.filter(examinee => examinee.status === activeTab.value);
});

// 获取问卷详情
const getExamDetail = async () => {
  const id = route.params.id;
  // 模拟API调用，后续替换为实际API
  examDetail.value = {
    id: Number(id),
    examPaperName: `考卷名称${id}`,
    createTime: '2025-11-11',
    endTime: '2025-11-12',
    totalNum: 100,
    participateNum: 98,
    markedNum: 90,
    unmarkedNum: 8,
    description: '这是一份问卷的详细描述信息',
  };
};

// 切换考生
const switchExaminee = (examinee: any) => {
  currentExaminee.value = examinee;
  // 模拟获取该考生的答题情况
  // getExamineeAnswers(examinee.id);
};

// 上一张/下一张
const prevExaminee = () => {
  const currentIndex = filteredExaminees.value.findIndex(e => e.id === currentExaminee.value.id);
  if (currentIndex > 0) {
    switchExaminee(filteredExaminees.value[currentIndex - 1]);
  }
};

const nextExaminee = () => {
  const currentIndex = filteredExaminees.value.findIndex(e => e.id === currentExaminee.value.id);
  if (currentIndex < filteredExaminees.value.length - 1) {
    switchExaminee(filteredExaminees.value[currentIndex + 1]);
  }
};

// 返回列表页面
const goBack = () => {
  router.push('/examManage/questScoring');
}

// 保存批改结果
const saveCorrectResult = () => {
  // 模拟保存逻辑
  console.log('保存批改结果', questions.value);
  // 可以在这里添加API调用保存批改结果
  ElMessage.success('保存成功');
};

// 页面加载时获取数据
onMounted(() => {
  getExamDetail();
});
</script>

<template>
  <Page>
    <div class="exam-correct-container">
      <!-- 头部信息 -->
      <div class="header-info">
        <div class="header-left">
          <span class="title">问卷查看</span>
          <span class="divider">|</span>
          <span class="exam-info">考卷规则1 | {{ examDetail.examPaperName }} | 发放人数 {{ examDetail.totalNum }} | 参与人数 {{ examDetail.participateNum }} | 已批改人数 {{ examDetail.markedNum }} | 未批改人数 {{ examDetail.unmarkedNum }}</span>
        </div>
        <div class="header-right">
          <ElSpace>
            <ElButton type="success" @click="saveCorrectResult" v-if="isCorrectMode">保存批改结果</ElButton>
            <ElButton type="primary" @click="goBack">返回列表</ElButton>
          </ElSpace>
        </div>
      </div>

      <!-- 主体内容 -->
      <div class="main-content">
        <!-- 左侧考卷信息 -->
        <div class="exam-info-section">
          <!-- 考卷名称和得分 -->
          <div class="exam-title-section">
            <h2 class="exam-name">{{ examDetail.examPaperName }}</h2>
            <div class="score-info">
              <span class="score-label">得分：</span>
              <span class="score-value">{{ currentExaminee.score }}分</span>
            </div>
          </div>

          <!-- 考卷内容和答案 -->
          <div class="exam-content-section">
            <!-- 题目列表 -->
            <div class="questions-list">
              <div v-for="question in questions" :key="question.id" class="question-item">
                <!-- 题目信息 -->
                <div class="question-header">
                  <span class="question-number">{{ question.id }}</span>
                  <span class="question-title">{{ question.title }}</span>
                  <span class="question-type">({{ question.type }})</span>
                </div>

                <!-- 题目选项/答案 -->
                <div class="question-content">
                  <!-- 单选题 -->
                  <div v-if="question.type === '单选题'" class="options-container">
                    <ElRadioGroup v-model="question.examineeAnswer" disabled>
                      <ElRadio
                        v-for="(option, index) in question.options"
                        :key="index"
                        :label="String.fromCharCode(65 + index)"
                        :class="{
                          'correct-option': question.correctAnswer.includes(String.fromCharCode(65 + index)) && question.examineeAnswer.includes(String.fromCharCode(65 + index)),
                          'wrong-option': !question.correctAnswer.includes(String.fromCharCode(65 + index)) && question.examineeAnswer.includes(String.fromCharCode(65 + index))
                        }"
                      >
                        {{ option }}
                      </ElRadio>
                    </ElRadioGroup>
                  </div>

                  <!-- 多选题 -->
                  <div v-else-if="question.type === '多选题'" class="options-container">
                    <ElCheckboxGroup v-model="question.examineeAnswer" disabled>
                      <ElCheckbox
                        v-for="(option, index) in question.options"
                        :key="index"
                        :label="String.fromCharCode(65 + index)"
                        :class="{
                          'correct-option': question.correctAnswer.includes(String.fromCharCode(65 + index)) && question.examineeAnswer.includes(String.fromCharCode(65 + index)),
                          'wrong-option': !question.correctAnswer.includes(String.fromCharCode(65 + index)) && question.examineeAnswer.includes(String.fromCharCode(65 + index))
                        }"
                      >
                        {{ option }}
                      </ElCheckbox>
                    </ElCheckboxGroup>
                  </div>

                  <!-- 填空题 -->
                  <div v-else-if="question.type === '填空题'" class="fill-container">
                    <div class="examinee-answer">
                      {{ question.examineeAnswer.join('、') }}
                    </div>
                  </div>

                  <!-- 简答题 -->
                  <div v-else-if="question.type === '简答题'" class="essay-container">
                    <div class="examinee-answer">
                      {{ question.examineeAnswer[0] }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 答案和得分 -->
            <div class="answers-list">
              <div v-for="question in questions" :key="question.id" class="answer-item">
                <div class="answer-info">
                  <div class="answer-line">
                    <span class="answer-label">答案：</span>
                    <span class="answer-value">{{ question.correctAnswer.join('、') }}</span>
                  </div>
                  <div class="score-line">
                    <span class="score-label">得分：</span>
                    <el-input
                      v-if="isCorrectMode"
                      v-model="question.score"
                      type="number"
                      :min="0"
                      :max="question.maxScore"
                      size="small"
                      class="score-input"
                    />
                    <span v-else class="score-value">{{ question.score }}分</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
        <!-- 右侧批改信息 -->
        <div class="correct-info-section">
          <!-- 搜索框 -->
          <div class="search-container">
            <ElInput placeholder="搜索考卷" class="search-input" />
          </div>

          <!-- 批改状态切换 -->
          <ElTabs v-model="activeTab" class="status-tabs">
            <ElTabPane label="未批改" name="未批改" />
            <ElTabPane label="已批改" name="已批改" />
          </ElTabs>

          <!-- 考生列表 -->
          <div class="examinees-list">
            <div
              v-for="examinee in filteredExaminees"
              :key="examinee.id"
              class="examinee-item"
              :class="{ 'active': examinee.id === currentExaminee.id }"
              @click="switchExaminee(examinee)"
            >
              <div class="examinee-name">{{ examinee.examineeName }}</div>
              <div class="examinee-score">得分: {{ examinee.score }}分</div>
              <div class="examinee-time">完成时间 {{ examinee.submitTime }}</div>
            </div>
          </div>
        </div>
      
      </div>
    </div>
  </Page>
</template>

<style scoped lang="scss">
.exam-correct-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}

/* 头部信息 */
.header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;

  .header-left {
    display: flex;
    gap: 10px;
    align-items: center;

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

    .divider {
      color: #ccc;
    }

    .exam-info {
      font-size: 14px;
      color: #666;
    }
  }
}

/* 主体内容 */
.main-content {
  display: flex;
  gap: 20px;
}

/* 左侧考卷信息 */
.exam-info-section {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

/* 考卷名称和得分 */
.exam-title-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e8e8e8;

  .exam-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .score-info {
    display: flex;
    gap: 5px;
    align-items: center;

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

    .score-value {
      font-size: 18px;
      font-weight: 600;
      color: #1890ff;
    }
  }
}



.question-item {
  padding-bottom: 20px;
  margin-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
}

.answer-item {
  padding-bottom: 20px;
  margin-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
}

/* 考卷内容区域 */
.exam-content-section {
  display: flex;
  height: 600px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
}

/* 题目列表 */
.questions-list {
  flex: 1;
  padding: 20px;
  border-right: 1px solid #e8e8e8;
}

/* 考生答案 */
.examinee-answer {
  height: 32px;
  overflow: hidden;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 答案列表 */
.answers-list {
  width: 300px;
  padding: 20px;
}

.answer-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-line,
.score-line {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 14px;

  .answer-label,
  .score-label {
    font-weight: 500;
    color: #666;
  }

  .answer-value,
  .score-value {
    flex: 1;
    color: #333;
  }

  .score-input {
    width: 80px;
  }
}

/* 右侧批改信息 */
.correct-info-section {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
}

/* 搜索框 */
.search-container {
  margin-bottom: 20px;

  .search-input {
    width: 100%;
  }
}

/* 状态标签页 */
.status-tabs {
  margin-bottom: 20px;
}

/* 考生列表 */
.examinees-list {
  flex: 1;
  margin-bottom: 20px;
  overflow-y: auto;
}

.examinee-item {
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgb(24 144 255 / 15%);
  }

  &.active {
    background-color: rgb(24 144 255 / 5%);
    border-color: #1890ff;
  }

  .examinee-name {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .examinee-score,
  .examinee-time {
    margin-bottom: 3px;
    font-size: 12px;
    color: #666;
  }
}

/* 翻页按钮 */
.pagination-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>





