<template>
  <div class="question">
    <div class="ql-editor" v-html="appendIndex($escapeHTML(`${option.topic}`), $vnode.key)" />
    <template v-if="checkType(option, 'judge')">
      <el-radio-group v-model="answer" @change="onChnage">
        <el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: inline">
          <span>{{ el.content }}</span>
        </el-radio>
      </el-radio-group>
    </template>
    <template v-else-if="checkType(option, 'select')">
      <el-radio-group v-model="answer" @change="onChnage">
        <el-radio v-for="(el,i) in option.optionList" :key="i" :label="$str2number(el.id)" style="display: block">
          <span>{{ $asc2chart(i+65) }}. </span>
          <div class="ql-editor" style="display: inline; padding: 0" v-html="$escapeHTML(el.content)" />
        </el-radio>
      </el-radio-group>
    </template>
  </div>
</template>

<script>

export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        option: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            answer: 0
        };
    },
    watch: {
        value(val) {
            this.changeValue();
        }
    },
    mounted() {
        this.changeValue();
    },
    methods: {
        changeValue() {
            this.answer = parseInt(this.value);
        },
        checkType(option, type) {
            return option.type == type;
        },
        appendIndex(str, index) {
            return `${index + 1}. ${str}`;
        },
        onChnage(e) {
            const answer = `${e}`;
            this.$emit('input', answer);
            this.$emit('save', {userExamQuestionId: this.option.id, answer: answer});
        }
    }
};

</script>
<style lang="scss" scoped>
	.rich-text {
		padding: 0;
		display: inline;
	}

	.question {
		/deep/ {
			.ql-editor {
				line-height: 26px;
				padding: 0;
			}

			.el-radio  {
				color: #000;
			}

			.el-radio__label {
				font-size: 16px;
				line-height: 26px;
			}

		}
	}
</style>
