<template>
    <!-- 左侧导航栏 -->
    <div class="left_nav">
      <div class="exam_title">
        <div class="exam_page_title" :title="store.state.evaluationManageStepData.evaluationManageDetailName">
          {{ store.state.evaluationManageStepData.evaluationManageDetailName }}
        </div>
      </div>
      <div class="exam_back">
        <el-button class="back_button" @click="$router.push('/main/reviewManagement')">
          <img :src="backIcon" alt="">返回
        </el-button>
      </div>
      
      <div class="nav_list">
        <!-- 步骤列表 -->
        <template v-for="(stepItm, index) in stepMsgs" :key="stepItm.stepName">
          <div 
            v-if="stepItm.show"
            class="nav_item"
            :class="{
              'active_item': store.state.evaluationManageStepData.currentActiveStepName == stepItm.stepName,
              'success': stepItm.isFinish
            }"
            @click="HandleChangeStep(stepItm)"
          >
            <div class="step_box">
              <div class="step_header_title">
                <div class="num_box">
                  <el-icon v-if="stepItm.isFinish" class="el-icon-success"><SuccessFilled /></el-icon>
                  <span v-else class="step_num">{{ stepItm.stepNum || (index + 1) }}</span>
                </div>
                <span class="step_title" :title="stepItm.title">{{ stepItm.title }}</span>
              </div>

              <div class="step_content">
                <div class="left_line "></div>
                <div>
                  {{ stepItm.desc }}
                </div>
              </div>

            </div>
          </div>
        </template>
      </div>
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import backIcon from '@/assets/icon/left_back_arrow_.png'
import router from '@/router';

const route = useRoute()
const store = useStore()  //store.state.evaluationManageStepData.evaluationType,   // 评价方式  0-线上匿名，1-线下答卷，2-线上导入，3-线上实名

const stepMsgs = computed(()=>[
  {
    stepNum:1,
    stepName:'evaluationData',
    title:'评价数据',
    desc:'评价覆盖的年级、班级、对应科目基础信息',
    route:'evaluationData',
    show:true,
    isFinish:store.state.evaluationManageStepData.isFinishEvaluationData,

  },
  {
    stepNum:2,
    stepName:'teachingRelationship',
    title:'授课关系',
    desc:'年级、班级、科目匹配对应的任课教师',
    route:'teachingRelationship',
    show:true,
    isFinish:store.state.evaluationManageStepData.isFinishTeachingRelationship,

  },

// ==================================
  // 线下答卷的内容 >>>>>  evaluationType === 1
  {
    stepNum:3,
    stepName: 'numberMapping', 
    title: '编号对应',
    desc: '绑定年级、班级与专属编号',
    route: 'numberMapping',
    show:store.state.evaluationManageStepData.evaluationType === 1 ? true : false,
    isFinish:null,
  },
  {
    stepNum:4,
    stepName: 'templateSetting',  
    title: '模板设置',
    desc: '框选问卷各答题区域完成线上模板配置',
    route: 'templateSetting',
    show:store.state.evaluationManageStepData.evaluationType === 1 ? true : false,
    isFinish:null,
  },
  {
      stepNum:5,
      stepName: 'scoreSetting',
      title: '分数设置',
      desc: '设置每道题及各个选项对应得分',
      route: 'scoreSetting',
      show:store.state.evaluationManageStepData.evaluationType === 1 ? true : false,
      isFinish:null,
  },
  {
      stepNum:6,
      stepName: 'scanQuestionnaire',  // 对应“扫描问卷”
      title: '扫描问卷',
      desc: '批量扫描学生纸质问卷，处理异常',
      route: 'scanQuestionnaire',
      show:store.state.evaluationManageStepData.evaluationType === 1 ? true : false,
      isFinish:null,
  },
  // =================================
  
  // ============================
  // 线上匿名 的内容 >>>  evaluationType === 0
  {
    stepNum:3,
    stepName:'questionnaireTemplate',
    title:'问卷模版',
    desc:'为不同科目选定适配的评价问卷模板',
    route:'questionnaireTemplate',
    show:store.state.evaluationManageStepData.evaluationType === 0 ? true : false,
    isFinish:store.state.evaluationManageStepData.isFinishQuestionnaireTemplate,

  },
  {
    stepNum:4,
    stepName:'reviewAccount',
    title:'评价账号',
    desc:'批量生成对应数量的学生评价登录账号',
    route:'reviewAccount',
    show:store.state.evaluationManageStepData.evaluationType === 0 ? true : false,
    childrenRoute:[
      'generateReviewCode',
    ],
    isFinish:store.state.evaluationManageStepData.isFinishReviewAccount,
    isGenerateReviewCode:store.state.evaluationManageStepData.isGenerateReviewCode,  //是否已生成评价码
  },
  // ^^^^^ =========================

  
  {
    stepNum: store.state.evaluationManageStepData.evaluationType === 1  ? 7 : (store.state.evaluationManageStepData.evaluationType === 0 ?  5 : '') ,  // 线上匿名 5   线下答卷 7
    stepName:'parameterSetting',
    title:'参数设置',
    desc:'统一配置本次评价任务的评分分值规则',
    route:'parameterSetting',
    show:true,
    isFinish:store.state.evaluationManageStepData.isFinishParameterSetting,
  },
  {
    // 线上匿名的内容
    stepNum:6,
    stepName:'evaluationProgress',
    title:'评价进度',
    desc:'实时查看学生完成评价的填报进度',
    route:'evaluationProgress',
    show:store.state.evaluationManageStepData.evaluationType === 0 ? true : false,
    isFinish:store.state.evaluationManageStepData.isFinishEvaluationProgress,

  },

  {
    stepNum:store.state.evaluationManageStepData.evaluationType === 1 ? 8 : (store.state.evaluationManageStepData.evaluationType === 0 ? 7 : '' ),   // 线上匿名 7   线下答卷 8
    stepName:'generateAnalysis',
    title:'生成分析',
    desc:'汇总数据并生成、发布评价分析报告',
    route:'generateAnalysis',
    show:true,
    isFinish:store.state.evaluationManageStepData.isFinsihGenerateAnalysis,

  },
])

const HandleChangeStep=(currentStep)=>{
  store.commit('updateEvaluationManageStepData',
                {currentActiveStepName:currentStep.stepName})
  if(currentStep.stepName  == 'reviewAccount'){
    if(currentStep.isGenerateReviewCode){
      // 已经生成评价码，跳转到评价码生成页面
      router.push(`generateReviewCode?id=${route.query.id}`)
    }else{
      router.push(`${currentStep.route}?id=${route.query.id}`)
    }
  }else{
    router.push(`${currentStep.route}?id=${route.query.id}`)
  }
}


onMounted(()=>{
  let stepRoute = route.params.stepRoute
  let matchRes = stepMsgs.value.find(item=>{
    return item.route === stepRoute || item.childrenRoute?.includes(stepRoute)
  })
  if(matchRes){
    store.commit('updateEvaluationManageStepData',
                {currentActiveStepName: matchRes.stepName})
  }
})
</script>


<style lang="scss" scoped>
/* 左侧导航样式 */
.left_nav {
  min-width: 160px;
  width: 160px;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;

  > *{
    flex-shrink: 0;
  }

  .exam_title {
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    background-color: #2e64fa;
    padding: 5px 5px;

    .exam_page_title {
      font-size: 16px;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
      text-align: center;
      cursor: pointer;
    }
  }

  .exam_back {
    width: 100%;
    height: 56px;
    display: flex;
    justify-content: center;

    .back_button {
      width: calc(100% - 24px);
      margin: auto;
      height: 36px;
      line-height: 36px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      text-align: center;
      cursor: pointer;
      font-weight: 500;
      font-size: 14px;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }

  .nav_list {
    margin-bottom: 15px;
    flex:1 1;
    position: relative;
    width: 100%;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    > *{
      flex-shrink: 0;
    }

    /* 菜单节点样式 (完全还原第一段 step_item) */
    .nav_item {
      width: 100%;
      position: relative;
      z-index: 7;

      .step_box{
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      
      cursor: pointer;

     

      /* 标题区域 */
      .step_header_title {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 34px;
        font-size: 16px;
        color: #333333;
        line-height: 34px;
        font-weight: 600;
        border-top-left-radius: 10px;

        .step_title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* 图标/序号容器 */
        .num_box {
          width: 30px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;

          /* 完成状态打勾图标 (兼顾 iconfont / element-ui 两种类名) */
          .hjx-dui,
          .el-icon-success {
            font-size: 19px;

            &::before {
              font-size: 19px;
            }
          }
        }

        /* 序号圆圈 */
        .step_num {
          display: block;
          width: 17px;
          height: 17px;
          font-size: 12px;
          text-align: center;
          font-weight: 500;
          line-height: 17px;
          border-radius: 50%;
          background-color: #B0B2B7;
          color: #ffffff;
        }
      }

      /* 描述文字区域 */
      .step_content {
        padding: 0px 5px 6px 20px;
        font-size: 12px;
        line-height: 16px;
        color: #999999;
      }

      .left_line {
        position: absolute;
        top: 28px;
        left: 15.55px;
        z-index: 6;
        height: 100%;
        width: 0;
        border-left: 1px dashed #C0C4CC;
      }

       &:last-child{
        flex:1 1;
        margin-bottom: 0;

        .left_line {
          height: calc(100% - 28px);
        }
      }

      /* 完成状态 (success) */
      &.success {
        border-color: #ffffff;

        .num_box > i,
        .num_box > span {
          color: #15BC83;
        }
      }

      /* 激活高亮状态 (active_item) - 完美还原原蓝色阴影与卡片样式 */
      &.active_item {
        .step_box{
          border-color: #2E64FA;
          background-color: rgba(46, 100, 250, 0.1);
          box-shadow: inset 1px -1px 0px 1.5px #2E64FA;
        }

        .step_header_title {
          background-color: #2E64FA;
          color: #ffffff;
        }

        .step_num {
          background-color: #ffffff;
          color: #2E64FA;
        }

        .step_content {
          background-color: rgba(46, 100, 250, 0.1);
        }
      }
    }

    /* ------------------- 响应式适配 (100% 还原第一段媒体查询) ------------------- */

    /* 小屏幕笔记本：常见分辨率 1366x768 及以下 */
    @media (max-height: 768px) {
      .nav_item {
        margin-bottom: 0px;

        .step_header_title {
          font-size: 14px;
          line-height: 30px;
          font-weight: 700;
        }

        .step_content {
          padding: 0px 5px 6px 20px;
          font-size: 10px;
          line-height: 15px;
        }
      }
    }

    /* 中等屏幕笔记本：1600x900, 1920x1080 */
    @media (min-height: 769px) and (max-height: 1080px) {
      .nav_item {
        margin-bottom: 15px;

        .step_header_title {
          font-size: 16px;
          line-height: 30px;
        }

        .step_content {
          padding: 0px 5px 6px 20px;
          font-size: 12px;
          line-height: 15px;
        }
      }
    }

    /* 大屏幕/高分辨率设备：2560x1440 及以上 */
    @media screen and (min-height: 1081px) {
      .nav_item {
        margin-bottom: 25px;

        .step_header_title {
          font-size: 17px;
          line-height: 30px;
        }

        .step_content {
          padding: 10px 5px 10px 20px;
          font-size: 14px;
          line-height: 15px;
        }
      }
    }
  }
}
</style>