<template>
    <!-- 左侧导航栏 -->
    <div class="left_nav">
      <div class="nav_header">
        {{ store.state.evaluationManageStepData.evaluationManageDetailName }}
      </div>
      
      <div class="back_btn">
        <el-button class="button_refresh" @click="$router.push('/main/reviewManagement')"><img :src="backIcon" alt="">返回</el-button>
      </div>

      <ul class="nav_list">
        <!-- 激活状态的步骤 -->
        <template  v-for="stepItm in stepMsgs" :key="stepItm.stepName">
          <li v-if="stepItm.show"
            :class="['nav_item', {'active_item':store.state.evaluationManageStepData.currentActiveStepName == stepItm.stepName}]"
            @click="HandleChangeStep(stepItm)"
          >
            <div class="step_header_title">
              <i  v-if="stepItm.isFinish" class="hjx-dui iconfont"></i>
              <span v-else class="step_num">{{ stepItm.stepNum }}</span>
              <span class="step_title">{{stepItm.title}}</span>
            </div>

            <div class="step_bottom" >
              <div class="step_guide_line">
                <div class="dashed_line"></div>
              </div>
              <div class="step_content">
                  {{ stepItm.desc }}
              </div>
            </div>
          </li>

        </template>
      </ul>
    </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 {
    width: 160px;
    font-size: 16px;
    background-color: white;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .nav_header {
      padding:8px 12px;
      background-color: #2E64FA;
      color:white;
      font-weight: 600;
    }

    .back_btn {
      padding: 12px;
      .button_refresh{
        width: 100%;
        img{
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }



    .nav_list {
      flex: 1 1;
      display: flex;
      flex-direction: column;
      gap:10px;

      overflow-y: auto;

      .nav_item {
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .step_header_title{
          display: flex;
          align-items: center;
          padding:3px 8px;
          border-radius: 10px 0 0 0;

          .hjx-dui{
            color:#15bc83;
            margin:0 5px;
          }


          .step_num{
            display: flex;
            align-items: center;
            justify-content: center;
            
            margin:0 5px;
            width: 16px;
            height: 16px;
            line-height: 1;
            border-radius: 50%;
            background-color: #B0B2B7;
            color: white;
            font-weight: 600;
            font-size: 12px;
          }
        }

        .step_bottom{
          flex:1 1;
          padding:0 8px;
          position: relative;
          .step_guide_line{
            position: absolute;
            top:-4px;
            left:8px;
            width: 26px;
            height: calc(100% + 18px);

            display: flex;
            flex-direction: column;
            align-items: center;
          
            .dashed_line {
              flex: 1;
              width: 0;
              border-left: 1px dashed #B0B2B7;
              min-height: 30px;
            }
          }
          .step_content {
            padding:5px 10px 5px 30px;
            font-size: 12px;
            color: #999999;
          }
        }

        &.active_item {
          border-radius: 8px 0 0 8px;
          background: rgba(46,100,250,0.1);
          box-shadow: inset 1px -1px 0px 0px #2E64FA;

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

          .step_guide_line{
            top:0px;
            height: calc(100% + 14px);
          }
          .step_num{
            background-color: white;
            color: #2E64FA;
          }
        }
        &:last-child{
          flex:1 1;
        }
      }
    }
  }

  // /* 右侧内容区样式 */
  // .content_right {
  //   background-color: white;
  //   margin:20px 20px  20px 0;

  //   flex: 1;
  //   display: flex;
  //   flex-direction: column;
  //   overflow: hidden;
  // }
// }

</style>