<template>
  <el-select v-model="difficultyLevel" placeholder="请选择" style="width:100px" clearable :loading="loading">
    <el-option v-for="item in question_difficulty_level" :key="item.id" :label="item.name" :value="item.id"></el-option>
  </el-select>
</template>

<script>
import { getQuestionDifficultyLevelOptionsApi } from '@/api/assessment-evaluation/questions'
export default {
  data: _ => ({
    difficultyLevel: null,
    question_difficulty_level: [],
    loading: false
  }),
  mounted () {
    if (this.mountedLoad) {
      this.findAllQuestionDifficultyLevel()
    }
  },
  activated () {
    this.findAllQuestionDifficultyLevel()
  },
  props: {
    value: {
      default: null
    },
    mountedLoad: {
      default: false
    }
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler (nv) {
        this.difficultyLevel = nv
      }
    },
    difficultyLevel: {
      immediate: false,
      deep: true,
      handler (nv) {
        this.$emit('input', nv)
      }

    }
  },
  methods: {
    /*
      请求所有试题难易程度选项
    */
    findAllQuestionDifficultyLevel () {
      this.loading = true
      getQuestionDifficultyLevelOptionsApi().then(({ data }) => {
        this.question_difficulty_level = data
      }).finally(_ => {
        this.loading = false
      })
    }
  }
}
</script>
