<template>
	<div>
		<div class="exersices-content">
			<IconText :text="$t('evaluation.connector') + $t('evaluation.newExercise.stem')" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
			<div>
				<div ref="editor" style="text-align:left"></div>
			</div>
		</div>
		<div class="exersices-option">
			<IconText :text="$t('evaluation.newExercise.answerTitle')" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
			<div style="margin-top:15px;">
				<div ref="answerEditor" style="text-align:left"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import E from 'wangeditor'
	import IconText from '@/components/evaluation/IconText.vue'
	export default {
		components: {
			IconText
		},
		props: ['editInfo'],
		data() {
			return {
				stemContent: '',
				stemEditor: null,
				answerContent: '',
				answerEditor: null

			}
		},
		methods: {
			doRender(){
				this.stemContent = this.editInfo.question
				this.answerContent = this.editInfo.answer
				this.stemEditor.txt.html(this.editInfo.question)
				this.answerEditor.txt.html(this.editInfo.answer[0])
			}
		},
		mounted() {
			let stemEditor = new E(this.$refs.editor)
			stemEditor.config.onchange = (html) => {
				this.stemContent = html
			}
			stemEditor.config.uploadImgShowBase64 = true;
			this.$editorTools.initMyEditor(stemEditor,this)
			
			stemEditor.create()

			let answerEditor = new E(this.$refs.answerEditor)
			answerEditor.config.onchange = (html) => {
				this.answerContent = html
			}
			answerEditor.config.uploadImgShowBase64 = true;
			this.$editorTools.initMyEditor(answerEditor,this)
			
			answerEditor.create()

			this.stemEditor = stemEditor
			this.answerEditor = answerEditor

			if(this.editInfo && this.editInfo.question){
				this.doRender()
			}
		},
		watch:{
			editInfo:{
				handler(n){
					console.log('主观题富文本接收到的数据')
					console.log(n)
					if(n){
						this.doRender()
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	@import"../index/CreateExercises.less";
</style>
