<template>
  <div class="self-evaluation">
    <selfStepVue
      :activeStep="activeStep?.key||0"
      @check="check"
      :successList="successList"
      :stepData="stepData"
    >
      <template v-slot:xxx="scoped">
        <el-rate
          :disabled="true"
          :value="evaluationInfo[scoped.item.key]"
        ></el-rate>
      </template>
    </selfStepVue>
  </div>
</template>

<script>
import selfStepVue from '../evaluation-setting/components/selfStep.vue'
import { getSleftEvaluationApi } from '@/api/evaluation/index'
export default {
  data () {
    return {
      activeStep: {},
      successList: [],
      evaluationInfo: [],
      stepData: [
        { title: '学员队', key: 1, icon: 'el-icon-orange' },
        { title: '教员', key: 2, icon: 'el-icon-user' },
        { title: '课程', key: 3, icon: 'el-icon-reading' },
        { title: '原单位', key: 4, icon: 'el-icon-school' },
        { title: '毕业后', key: 5, icon: 'el-icon-finished' }
      ]
    }
  },
  async activated () {
    this.getEvaluationInfo()
  },
  methods: {
    check (item) {
      // if (this.activeStep === item.key) {
      //   this.activeStep = null
      //   return
      // }
      // this.activeStep = item
    },
    async getEvaluationInfo () {
      const { data } = await getSleftEvaluationApi()
      if (data.evaluation) {
        data.evaluation
          ? (data.evaluationArray = data.evaluation.split(','))
          : (data.evaluationArray = [])
        data.evaluationArray.forEach((eva) => {
          const keyValue = eva.split('-')
          data[keyValue[0]] = keyValue[1]
        })
        this.evaluationInfo = data
      }
      console.log(data)
    }
  },
  components: {
    selfStepVue
  }
}
</script>

<style lang="scss" scoped>
.self-evaluation{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-10%);
}
.self-step{
  width: 80%;
}
</style>
