<template>
  <div class="evaluation-setting">
    <selfStepVue
      :activeStep="activeStep"
      @check="check"
      :successList="successList"
      :stepData="stepData"
    >
      <template v-slot:xxx="scoped">
        <el-select v-model="scoped.item.role" size="mini" placeholder="请选择">
          <el-option
            v-for="item in role_options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </template>
    </selfStepVue>
    <div class="floot-box">
      <el-button type="danger" @click="reset" style="margin-right:30px">重置</el-button>
      <el-button type="primary" @click="saveChange">保存</el-button>
    </div>
  </div>
</template>

<script>
import selfStepVue from './components/selfStep.vue'
import { findAllRoleApi } from '@/api/system/role'
import { createEvaluationIndicatorApi, getssEvaluationIndicatorApi } from '@/api/evaluation/index'
export default {
  data () {
    return {
      activeStep: 0,
      successList: [],
      role_options: [],
      stepData: [
        { title: '学员队', key: 1, icon: 'el-icon-orange', role: 2 },
        { title: '教员', key: 2, icon: 'el-icon-user', role: 2 },
        { title: '课程', key: 3, icon: 'el-icon-reading', role: 2 },
        { title: '原单位', key: 4, icon: 'el-icon-school', role: 2 },
        { title: '毕业后', key: 5, icon: 'el-icon-finished', role: 2 }
      ]
    }
  },
  components: {
    selfStepVue
  },
  activated () {
    this.findAllRole()
    this.getInfo()
  },
  methods: {
    check (key) {
      // this.activeStep = key
    },
    async findAllRole () {
      const { data } = await findAllRoleApi()
      const { tree } = data.toTree()
      this.role_options.splice(0, this.role_options.length, ...tree)
    },
    reset () {
      location.reload()
    },
    async saveChange () {
      await createEvaluationIndicatorApi({ evaluationRule: this.stepData })
      this.$message.success('保存成功')
      console.log(this.stepData)
    },
    async getInfo () {
      const { data } = await getssEvaluationIndicatorApi()
      this.stepData = (data.evaluationRule && data.evaluationRule.length > 0)
        ? data.evaluationRule
        : [
            { title: '学员队', key: 1, icon: 'el-icon-orange', role: 2 },
            { title: '教员', key: 2, icon: 'el-icon-user', role: 2 },
            { title: '课程', key: 3, icon: 'el-icon-reading', role: 2 },
            { title: '原单位', key: 4, icon: 'el-icon-school', role: 2 },
            { title: '毕业后', key: 5, icon: 'el-icon-finished', role: 2 }
          ]
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluation-setting {
  flex-direction: column;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: 200px;
}
.floot-box {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
</style>
