<template>
  <div class="aside_container">
    <div class="exam_info">
        <div class="info_title" :title="examStore.currentExam?.examSubjectName">{{examStore.currentExam?.examSubjectName || '未选择考试'}}</div>
        <div class="info_message">考试编号：{{examStore.currentExam?.examSubjectCode || '-'}}</div>
    </div>
    <div class="exam_back">
       <div class="back_button" @click="GoBack()">
          <i class="iconfont icon_return"></i>返回
        </div>
    </div>
    <div class="exam_menu">
        <StepItem></StepItem>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useExamStore } from '@/store/exam'
import { useAnalysisStore } from '@/store/analysis'
import { useRouter } from 'vue-router'
import { onMounted ,ref} from 'vue';
import StepItem from './stepItem.vue'
// 实例化 Store
const examStore = useExamStore()
const analysisStore = useAnalysisStore()
const router = useRouter()


const menulist=ref<any[]>([]);//考试详情导航菜单

const GoBack=()=>{
  examStore.clearExamInfo()//清空考试信息
  analysisStore.removeLocalStorage()//清空分析信息
  router.push('/main/choice')//返回考试列表
}

onMounted(() => {
  
    if (!examStore.currentExam) {
        console.warn('当前没有选中的考试信息')
        // 可选：如果没有数据，可以重定向回列表页或提示用户
    }
    
  
})
</script>
 
<style lang="scss" scoped>
.aside_container
{
    width: 100%;
    height: 100vh;
}

.exam_info
{
    width: 100%;
    min-height: 80px;
    background: #2E64FA;
    color: #fff;
    text-align: center;
    padding:13px 5px;
    box-sizing: border-box;
    .info_title
    {
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 25px;
        display: -webkit-box;       // 将对象作为弹性伸缩盒子模型显示
        -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式
        -webkit-line-clamp: 2;      // 限制在一个块元素显示的文本的行数
        overflow: hidden;           // 超出部分隐藏
        text-overflow: ellipsis;    // 显示省略符号来代表被修剪的文本
        word-break: break-all;      // 允许在单词内换行（防止长英文单词溢出）
    }
    .info_message
    {
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 20px;
        margin-top: 10px;
    }
}

.exam_back
{
    width: 100%;
    height: 60px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    .back_button
    {
        width: 136px;
        height: 38px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #DCDFE6;

        font-weight: 500;
        font-size: 14px;
        color: #666666;
        text-align: center;
        line-height: 34px;

        cursor: pointer;
    }
}
.exam_menu
{
    width: 100%;
    height: calc(100% - 170px);
}
</style>