<template>
  <div id="bmti" style="padding:0px 20%;" ref="careerMbti">
    <el-row style="color:#1A74D3;text-align:center;margin:48px 0px 32px 0px">职业性格测评（MBTI）</el-row>
    <el-row style="margin-bottom:60px;" id="steps">
      <el-steps :active="active" >
        <el-step :class="{'lastStep':active>1}" :status="active>1?'success':''"></el-step>
        <el-step :class="{'lastStep':active>2}" :status="active>2?'success':''"></el-step>
        <el-step :class="{'lastStep':active>3}" :status="active>3?'success':''"></el-step>
        <el-step :class="{'lastStep':active>4}" :status="active>4?'success':''"></el-step>
        <el-step :class="{'lastStep':active===5}">20</el-step>
        <!--<el-step status="success"></el-step>-->
      </el-steps>
    </el-row>
    <!--  -->
    <div v-if="active<5" id="content" style="min-height: 400px;">
      <el-row v-if="stepDatas.length">
        <h2 style="margin:0px;">{{stepTitle('header',active)}}</h2>
        <h3 style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC;color:#333333">{{stepTitle('title',active)}}</h3>
      </el-row>
      <div v-if="questions.length" style="margin-left: 35px;margin-top: 10px;font-weight: 400;font-family: PingFang SC; color:#333333;margin-bottom:50px;">
        <template>
          <h3 style="margin: 0px;font-weight: 400;font-family: PingFang SC; color:#333333">{{questions[questionsKeys].title}}</h3>
          <el-row>
            <!--选项-->
            <el-radio-group v-model="questionsAnswers" @change="nextOption">
              <div style="margin:30px 0 40px 0;font-size: 20px;">
                <el-radio :label="questions[questionsKeys].valueA">A {{questions[questionsKeys].optionA}}</el-radio>
              </div>
             <div>
               <el-radio :label="questions[questionsKeys].valueB">B {{questions[questionsKeys].optionB}}</el-radio>
             </div>
            </el-radio-group>
          </el-row>
        </template>
      </div>
    </div>
    <!--测试完成-->
    <div v-else style="height: 300px;text-align: center;margin-top:80px;">
      <div>
        <el-image :src="require('@/assets/images/career/icon_data.png')"></el-image>
      </div>
      <div style="margin-top:20px;">
        <el-button type="primary" @click="goReportPage">查看报告</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import {selectMbtiEvalueSteps,selectMbtiQuestions,saveMbtiQuestions} from '@/api/webApi/career-evalua'
  import {mapState} from 'vuex';
  export default {
    name:'CareerMbti',
    data(){
      return {
        active:1,  //步骤
        stepDatas:[],  //步骤信息(大问题)
        questions:[],  //问题以及选项
        questionsKeys:0, //问题的编码
        answers:[],//存放所有问题答案
        questionsAnswers:'', //存放单个问题的答案
        details:[],
        reportId:'' //测试后的报告ID
      }
    },
    computed:{
      ...mapState({theme: state => state.settings.theme}),
      stepTitle(){
        return function (type,step){
          if(type==='header'){
            let titleStr=''
            if(this.stepDatas[step-1].title.indexOf(' ')!==-1){
              titleStr =this.stepDatas[step-1].title.substr(0,this.stepDatas[step-1].title.indexOf(' '))
            }else{
              titleStr=this.stepDatas[step-1].title
            }
            return titleStr
          }else if(type==='title'){
            let titleStr=''
            if(step===4){
              titleStr='你可以针对自己在每一个方面的能力，先与同龄人比较，经斟酌以后再在下表中对自己的能力逐一评价。评分请选择适当的数字。4 分代表中等水平，数字越大表示你该项的能力越强，数字越小表示你该项的能力越弱。 注意，请勿全部选择同样的数字，因为你的每项能力不可能完全一样。';
              return titleStr
            }
            if(this.stepDatas[step-1].title.indexOf(' ')!==-1){
              titleStr =this.stepDatas[step-1].title.substr(this.stepDatas[step-1].title.indexOf(' '))
            }else{
              titleStr=''
            }
            return titleStr
          }
        }
      }
    },
    watch:{
      theme:{
        immediate:true,
        handler(val){
          this.$nextTick(()=>{
            this.$refs.careerMbti.style.setProperty('--themeColor', val)
          })
        }
      }
    },
    created(){
      this.getEvalueSteps();
      this.getQuestions(this.active)
    },
    methods:{
      nextOption(){
        const obj={
          questionId:this.questions[this.questionsKeys].id,
          answer:this.questionsAnswers
        }
        if(obj.answer===''){
          this.msgInfo('必须选择一项')
          return
        }
        if(this.questionsKeys<this.questions.length-1){
          this.answers.push(obj)
          this.questionsAnswers=''
          this.questionsKeys+=1
        }else{
          if(this.active>=this.stepDatas.length){
            const params={
              details:this.answers
            }
            saveMbtiQuestions(params).then(res=>{
              this.active=5;
              this.reportId=res.data
            })
          }else{ //进入到了下一个大问题
            this.active+=1;
            this.questions=[];
            this.getQuestions(this.active);
            this.questionsAnswers='';
            this.questionsKeys=0
          }
        }
      },
      getEvalueSteps(){
        selectMbtiEvalueSteps().then(res=>{
          this.stepDatas=res.data
        })
      },
      getQuestions(id){
        const params={
          stepId:id
        };
        selectMbtiQuestions(params).then(res=>{
          this.questions=res.rows
        })
      },
      goReportPage() {
      this.$router.push({
        path: "/career/assistant?id=" + 2
      })
    }
    }
  }
</script>

<style lang="scss">
  #steps{
    .el-steps{
      .el-step__head.is-finish {
        .el-step__line{
          background-color:  var(--themeColor);
        }
        .el-step__icon.is-text{
          color:#ffffff;
          background-color: var(--themeColor);;
        }
      }
      .el-step__head.is-wait,.el-step__head.is-process{
        .el-step__line{
          background-color:  var(--themeColor);
        }
        .el-step__icon.is-text{
          color:var(--themeColor);
          border-color:var(--themeColor);
        }
      }
    }
    .lastStep{
      .is-success{
        .el-step__icon.is-text{
          background-color: var(--themeColor);
          color: #ffffff;
        }
      }
    }
  }
  #bmti {
    #content {
      .el-radio {
        .el-radio__label {
          font-size: 17px !important;
        }
      }
    }
  }
</style>

