<template>
  <div class="q-item">
    <div class="q-item-hd">
      <div class="q-item-num">{{currentIndex}}.</div>
      <div class="q-item-title" v-html="data.question_content"></div>
      <div class="q-item-aside">({{currentTypeText}})</div>
    </div>
    <div class="q-item-bd">
      <!-- 单选 -->
      <el-radio-group v-model="radioValue" @change="onRadioChange" v-if="currentType === 1">
        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
          <el-radio :class="genClass(item)" :label="item.id">{{item.abc_option}}</el-radio>
        </div>
      </el-radio-group>
      <!-- 多选 -->
      <el-checkbox-group
        v-model="checkboxValue"
        @change="onCheckboxChange"
        v-if="currentType === 2"
      >
        <div class="q-option-item" v-for="item in currentOptions" :key="item.id">
          <el-checkbox :class="genClass(item)" :label="item.id">{{item.abc_option}}</el-checkbox>
        </div>
      </el-checkbox-group>
    </div>
    <div class="q-item-ft" v-if="disabled">
      <p>
        <span>学生答案：</span>
        <span :class="isCorrect ? 'is-success' : 'is-error'">{{submitAnswerText}}</span>
      </p>
      <p>
        <span>正确答案：</span>
        <span>{{correctAnswerText}}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChapterExamItem',
  props: {
    // 索引
    index: { type: Number },
    // 单条数据
    data: { type: Object, default: () => {} },
    // 提交的答案
    value: { type: Array, default: () => [] },
    // 是否禁用，提交过的是禁用状态
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      radioValue: '',
      checkboxValue: []
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        if (this.currentType === 1) {
          this.radioValue = value[0] || ''
        } else {
          this.checkboxValue = value
        }
      }
    }
  },
  computed: {
    // 26个英文字母
    A_Z() {
      const result = []
      for (let i = 0; i < 26; i++) {
        result.push(String.fromCharCode(65 + i))
      }
      return result
    },
    // 序号
    currentIndex() {
      return this.index + 1
    },
    // 当前类型
    currentType() {
      return this.data.question_type
    },
    // 选项类型
    currentTypeText() {
      const map = { 1: '单选题', 2: '多选题' }
      return map[this.currentType]
    },
    // 接口返回的options数据
    options() {
      return this.data.question_options
        ? JSON.parse(this.data.question_options)
        : []
    },
    // 处理后的options数据
    currentOptions() {
      return this.options.map((item, index) => {
        // 英文字母 + 名称
        item.abc = this.A_Z[index]
        item.abc_option = `${this.A_Z[index]}. ${item.option}`
        // 提交时的选中状态
        item.selected = this.value.includes(item.id)
        return item
      })
    },
    // 正确答案显示的英文字母
    correctAnswerText() {
      const result = this.currentOptions.reduce((result, item) => {
        item.checked && result.push(item.abc)
        return result
      }, [])
      return result.join('、')
    },
    // 提交答案显示的英文字母
    submitAnswerText() {
      const result = this.currentOptions.reduce((result, item) => {
        item.selected && result.push(item.abc)
        return result
      }, [])
      return result.join('、')
    },
    // 是否回答正确
    isCorrect() {
      const options = this.currentOptions
      for (let i = 0; i < options.length; i++) {
        if (options[i].checked !== !!options[i].selected) {
          return false
        }
      }
      return true
    }
  },
  methods: {
    // 生成class
    genClass(item) {
      if (!this.disabled) {
        return null
      }
      return {
        'is-error': item.selected !== item.checked,
        'is-success': item.checked
      }
    },
    // 单选
    onRadioChange(value) {
      this.$emit('change', [value])
    },
    // 多选
    onCheckboxChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.q-item {
  font-size: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #c9c9c97a;
}
.q-item-hd {
  display: flex;
  padding: 10px 0 20px;

  ::v-deep p {
    margin: 0;
    padding: 0;
  }
}
.q-item-num {
  width: 20px;
  text-align: center;
}
.q-item-title {
  flex: 1;
  padding: 0 10px;
}
.q-item-aside {
  padding-left: 20px;
  // align-self: flex-end;
}
.q-option-item {
  padding-left: 30px;
  margin-bottom: 14px;
}
.is-success {
  color: #090;
}
.is-error {
  color: #d80000;
}
::v-deep .el-radio {
  &.is-disabled .el-radio__label {
    color: #3c3c3c;
  }
  &.is-error .el-radio__label {
    color: #d80000;
  }
  &.is-success .el-radio__label {
    color: #090;
  }
}
::v-deep .el-checkbox {
  &.is-disabled .el-checkbox__label {
    color: #3c3c3c;
  }
  &.is-error .el-checkbox__label {
    color: #d80000;
  }
  &.is-success .el-checkbox__label {
    color: #090;
  }
}
.q-item-ft {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
  p {
    font-size: 14px;
    margin: 0;
    padding-left: 20px;
  }
}
</style>
