<template>
  <PageShell>
    <div class="evaluation-view-page">
      <div class="left-card">
        <div class="card-title">考生信息</div>
        <div class="info-list">
          <div class="info-item"><span>姓名：</span><span>张三</span></div>
          <div class="info-item"><span>报名岗位：</span><span>审计</span></div>
          <div class="info-item"><span>开始时间：</span><span>2024-06-13 09:49:47</span></div>
          <div class="info-item"><span>结束时间：</span><span>2024-06-13 09:50:26</span></div>
          <div class="info-item"><span>答题时长：</span><span>0分39秒</span></div>
          <div class="info-item"><span>浏览器：</span><span>unknown Browser</span></div>
          <div class="info-item"><span>终端设备：</span><span>iPhone iOS 17.5.1</span></div>
          <div class="info-item"><span>用户IP：</span><span>59.46.39.185</span></div>
        </div>

        <div class="card-title second">答题信息</div>
        <div class="answer-list">
          <div class="answer-item"><span>能力测试：10/30</span><el-tag type="success">通过</el-tag></div>
          <div class="answer-item"><span>实操能力：20/40</span><el-tag type="success">通过</el-tag></div>
          <div class="answer-item"><span>性格：12/34</span><el-tag type="danger">未通过</el-tag></div>
        </div>

        <div class="card-title second">维度分析</div>
        <div class="chart-placeholder">维度图</div>
        <div class="footer-btn">
          <el-button @click="handleBack">返回</el-button>
          <el-button type="primary">下一份</el-button>
        </div>
      </div>

      <div class="right-card">
        <div v-for="item in questionList" :key="item.id" class="question-block">
          <div class="question-head">
            <span>第{{ item.id }}题</span>
            <div class="question-result">
              <el-tag :type="item.correct ? 'success' : 'danger'">{{ item.correct ? '正确' : '错误' }}</el-tag>
              <span>得分</span>
              <el-input :model-value="String(item.score)" class="score-input" readonly />
            </div>
          </div>
          <div class="question-title">请选择一个选项</div>
          <div class="question-options">
            <div v-for="option in item.options" :key="option.label" class="question-option">
              <el-radio :model-value="item.answer" :label="option.label">{{ option.label }}.{{ option.text }}</el-radio>
              <span v-if="option.correct" class="correct-text">正确答案</span>
            </div>
          </div>
          <div v-if="item.analysis" class="question-analysis">
            <div>答案解析：</div>
            <div>{{ item.analysis }}</div>
          </div>
        </div>
      </div>
    </div>
  </PageShell>
</template>

<script setup name="PostManageEvaluationView" lang="ts">
import { getCurrentInstance, type ComponentInternalInstance } from 'vue';
import { useRouter } from 'vue-router';
import PageShell from '@/components/PageShell/index.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();

const questionList = [
  {
    id: 1,
    correct: true,
    score: 5,
    answer: 'A',
    options: [
      { label: 'A', text: '选项1', correct: true },
      { label: 'B', text: '选项2', correct: false },
      { label: 'C', text: '选项3', correct: false },
      { label: 'D', text: '选项4', correct: false }
    ],
    analysis: ''
  },
  {
    id: 2,
    correct: true,
    score: 5,
    answer: 'A',
    options: [
      { label: 'A', text: '选项1', correct: true },
      { label: 'B', text: '选项2', correct: false },
      { label: 'C', text: '选项3', correct: false },
      { label: 'D', text: '选项4', correct: false }
    ],
    analysis: ''
  },
  {
    id: 3,
    correct: false,
    score: 0,
    answer: 'C',
    options: [
      { label: 'A', text: '选项1', correct: true },
      { label: 'B', text: '选项2', correct: false },
      { label: 'C', text: '选项3', correct: false },
      { label: 'D', text: '选项4', correct: false }
    ],
    analysis: '解析解析解析解析解析解析解析解析'
  }
];

const handleBack = () => {
  proxy?.$tab.closePage();
  router.back();
};
</script>

<style scoped>
.evaluation-view-page {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
}

.left-card,
.right-card {
  background: #fff;
  border-radius: 6px;
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.card-title.second {
  margin-top: 20px;
}

.info-list,
.answer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: #606266;
}

.info-item,
.answer-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.chart-placeholder {
  height: 180px;
  border: 1px dashed #dcdfe6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.footer-btn {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.question-block {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px dashed #ebeef5;
}

.question-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.question-result {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-input {
  width: 56px;
}

.question-title {
  margin-bottom: 12px;
}

.question-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.correct-text {
  color: #67c23a;
  font-size: 12px;
}

.question-analysis {
  margin-top: 16px;
  color: #606266;
  font-size: 13px;
}
</style>
