<template>
  <div class="question-item">
    <div class="question-item-hd">
      <div class="question-index">{{ question.q_number }}.</div>
      <div class="question-title" v-html="question.content"></div>
    </div>
    <div class="question-item-bd">
      <!-- 单选题 || 判断题 -->
      <template v-if="questionType == 1 || questionType == 6">
        <el-radio-group v-model="question.user_answer[0]" @change="$emit('changeNumber', question.q_number)">
          <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
            <el-radio :label="item.id">{{ item.abc_option }}</el-radio>
          </div>
        </el-radio-group>
      </template>
      <!-- 多选题 -->
      <template v-if="questionType == 2">
        <el-checkbox-group v-model="question.user_answer" @change="$emit('changeNumber', question.q_number)">
          <div class="question-item-option" v-for="item in currentQuestionOptions" :key="item.id">
            <el-checkbox :label="item.id"> {{ item.abc_option }} </el-checkbox>
          </div>
        </el-checkbox-group>
      </template>
      <!-- 问答题 -->
      <template v-if="questionType == 3">
        <el-input type="textarea" placeholder="请输入内容" v-model="question.user_answer[0]" :autosize="{ minRows: 6 }" @input="$emit('changeNumber', question.q_number)" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    question: { type: Object, default: () => ({}) }
  },
  computed: {
    // 试题类型
    questionType() {
      // 1单选，2多选，3简答，5案例题， 6判断， 7实操，8情景
      return this.question.type || this.question.question_item_type
    },
    // 26个英文字母
    A_Z() {
      const result = []
      for (let i = 0; i < 26; i++) {
        result.push(String.fromCharCode(65 + i))
      }
      return result
    },
    // 处理后的options数据
    currentQuestionOptions() {
      let options = this.question.options || []
      try {
        options = JSON.parse(this.question.options)
      } catch (error) {
        console.log(error)
      }
      if (!options.length) {
        return []
      }
      return options.map((item, index) => {
        // 英文字母 + 名称
        const abc = this.A_Z[index]
        const abcOption = `${this.A_Z[index]}. ${item.option}`
        return { ...item, abc, abc_option: abcOption }
      })
    }
  }
}
</script>

<style lang="scss">
.question-item {
  margin-bottom: 30px;
  .el-textarea__inner {
    font-size: 18px;
    color: #222 !important;
  }
  &.is-active {
    .question-item-hd {
      color: #c01540;
    }
  }
}
.question-item-hd {
  display: flex;
  margin-bottom: 20px;
  color: #222;
  .question-index {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
  }
  .question-title {
    margin-top: 8px;
    margin-left: 5px;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    img {
      max-width: 100% !important;
    }
  }
}
.question-item-bd {
  margin-left: 5px;
}
.question-item-option {
  margin-bottom: 20px;
  .el-radio,
  .el-checkbox {
    font-size: 20px;
  }
  .el-radio__inner,
  .el-checkbox__inner {
    width: 18px;
    height: 18px;
  }
  .el-radio__label,
  .el-checkbox__label {
    font-size: 18px;
    color: #222 !important;
    white-space: normal;
  }
  .el-checkbox__inner::after {
    top: 2px;
    width: 5px;
    height: 8px;
    left: 5px;
  }
}
</style>
