<template>
	<div>
		<div class="exersices-content">
			<IconText :text="$t('evaluation.multiple') + $t('evaluation.newExercise.stem')" :color="'#2d8cf0'" :icon="'ios-create'" style="margin-bottom:15px;"></IconText>
			<div>
				<div ref="singleEditor" style="text-align:left"></div>
			</div>
		</div>
		<div class="exersices-option" ref="optionRefs">
			<IconText :text="$t('evaluation.newExercise.multipleOption')" :color="'#FF871C'" :icon="'md-reorder'"></IconText>
			<div v-for="(item,index) in options" :key="index" :ref="'optionBox' + index" :class="'editor-wrap-'+item" style="margin-top:10px;display:flex">
				<span class="fl-center option-delete" @click="deleteOption(index,item)"><Icon type="md-remove-circle" /></span>
				<span class="fl-center option-order" :ref="'optionOrder' + index" :data-index="index">{{ renderIndex(index) }}</span>
				<div :ref="'singleOption'+index" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
				<span :class="['fl-center', 'option-setting', trueArr.indexOf(index) > -1 ? 'option-true':'']" @click="settingAnswer(index)">{{ trueArr.indexOf(index) > -1  ? $t('evaluation.newExercise.trueAnswer') :$t('evaluation.newExercise.setAnswer') }}</span>

			</div>
			<p class="option-add"><span @click="addOption()">+ {{$t('evaluation.newExercise.addOption')}} </span><span style="color:rgb(60,196,82);margin-left:15px;font-weight:bold">{{$t('evaluation.newExercise.trueAnswer')}}：{{ multipleAnswers.join('') }}</span></p>
		</div>
	</div>
</template>
<script>
	import E from 'wangeditor'
	import IconText from '@/components/evaluation/IconText.vue'
	export default {
		components: {
			IconText
		},
		props: ['editInfo'],
		data() {
			return {
				options: [...new Array(4).keys()], // 默认四个选项
				existOptions: [...new Array(4).keys()],
				initFlag: true,
				trueIndex: 0,
				optionTrueIndex:0,
				trueArr:[0],
				optionTrueArr:[0],
				multipleAnswers:['A'],
				editSingleInfo: {},
				stemEditor: null,
				stemContent: '',
				transferArr:[],
				optionsContent: [],
				optionEditors: [],
				defaultConfig: {
					uploadImgShowBase64: true,
					menus: this.$tools.wangEditorMenu
				}
			}
		},
		created() {},
		methods: {
			initEditors() {
				// Editor默认配置
				if (this.options.length > 0) {
					this.options.forEach((item, i) => {
						let that = this
						let editor = new E(that.$refs['singleOption' + i][0])
						// 选项编辑器失焦隐藏工具栏
						editor.config.onblur = function() {
							let allToolbars = document.getElementsByClassName('option-editor')
							for (let i = 0; i < allToolbars.length; i++) {
								if (allToolbars[i].children.length) {
									allToolbars[i].children[0].style.visibility = 'hidden'
								}
							}
						}
						
						editor.config.uploadImgShowBase64 = true;
						this.$editorTools.initMyEditor(editor,this,true)

							// 选项编辑器内容发生变化时
							editor.config.onchange = (html) => {
								let key = String.fromCharCode(64 + parseInt(i + 1))
								let codeArr = this.optionsContent.map(item => item.code)
								// 如果已经编辑过则 修改选项内容
								if (codeArr.indexOf(key) !== -1) {
									this.optionsContent[codeArr.indexOf(key)].value = html
								} else { // 否则创建新选项
									let option = {
										code: key,
										value: html
									}
									this.optionsContent.push(option)
								}
							}
						editor.create()
						this.optionEditors.push(editor)
						that.$refs["singleOption" + i][0].dataset.editorId = editor.id

						// 如果是编辑状态 则将选项内容回显
						if (Object.keys(this.editSingleInfo).length > 0) {
							editor.txt.html(this.editSingleInfo.option[i].value)
						}
					})
				}
			},

			/* 添加选项 */
			addOption() {
				let that = this
				let wraps = Array.from(this.$refs.optionRefs.getElementsByClassName('option-order'))
				let optionsLength = wraps.length;
				let newIndex = parseInt(this.options[this.options.length - 1]) + 1
				// let optionsLength = this.options.length
				if (optionsLength < 10) {
					this.options.push(newIndex)
					this.existOptions.push(newIndex)
					this.$nextTick(() => {
						let editor = new E(that.$refs['singleOption' + newIndex][0])
						this.$editorTools.initMyEditor(editor,this,true)
						editor.config.onchange = (html) => {
							let key = String.fromCharCode(64 + parseInt(newIndex + 1))
							let codeArr = this.optionsContent.map(item => item.code)
							// 如果已经编辑过则 修改选项内容
							if (codeArr.indexOf(key) !== -1) {
								this.optionsContent[codeArr.indexOf(key)].value = html
								console.log(this.optionsContent.map(item => item.code))
								console.log(this.optionsContent.map(item => item.value))
							} else { // 否则创建新选项
								let option = {
									code: key,
									value: html
								}
								this.optionsContent.push(option)
							}
						}
						editor.create()
						this.optionEditors.push(editor);
						this.$refs["singleOption" + newIndex][0].dataset.editorId = editor.id
						this.refreshOrder()
					})
				} else {
					this.$Message.warning(this.$t('evaluation.addTip2'))
				}
			},
			
			
			/* 设置正确答案 */
			settingAnswer(index) {
				this.$nextTick(() => {
				    if (this.trueArr.indexOf(index) > -1) {
						if(this.trueArr.length === 1){
							this.$Message.warning(this.$t('evaluation.addTip3'))
						}else{
							this.trueArr.splice(this.trueArr.indexOf(index), 1)
						}
				    } else {
				        this.trueArr.push(index)
				        this.trueArr = this.trueArr.sort() // 选项排序
				    }
					this.getAnswerOrder(this.trueArr)
				})
			},
			
			/* 获取最新答案选项 */
			getAnswerOrder(arr){
				let arr2 = []
				arr.forEach(i => {
					arr2.push(this.getOrderCode(i))
				})
				this.multipleAnswers = arr2.sort()
			},
			
			/* 根据index获取对应选项字母的值 */
			getOrderCode(index){
				let wraps = Array.from(this.$refs.optionRefs.getElementsByClassName('option-order'))
				for(let i=0;i<wraps.length;i++){
					let item = wraps[i]
					if(+index === +item.dataset.index){
						return item.innerText
						break;
					}
				}
			},
			
			/* 根据页面上的选项DOM数量，刷新每个选项的Order显示 */
			refreshOrder() {
				let wraps = Array.from(this.$refs.optionRefs.getElementsByClassName('option-order'))
				wraps.forEach((item, index) => {
					item.innerHTML = this.renderIndex(index)
				})
			},
			
			/* 根据下标渲染对应的字母顺序 */
			renderIndex(index) {
				return String.fromCharCode(64 + parseInt(index + 1))
			},
			
			

			/* 删除选项 */
			deleteOption(index,item) {
				// 拿到所有选项
				if (this.existOptions.length > 2 ) {
					// 如果删除的是正确答案 则重置正确答案
					if(this.trueArr.indexOf(index) > -1){
						if(this.trueArr.length === 1){
							this.$Message.warning(this.$t('evaluation.addTip3'))
						}else{
							this.trueArr.splice(this.trueArr.indexOf(index),1)
							// 确保当前存在的options保持同步
							this.existOptions.splice(this.existOptions.indexOf(item), 1)
							this.optionsContent.splice(index, 1)
							// 删除操作 移除选项DOM
							let textWrap = this.$refs['optionBox' + index][0]
							textWrap.remove()
							// 刷新选项序号显示
							this.refreshOrder()
							this.getAnswerOrder(this.trueArr)
						}
					}else{
						// 确保当前存在的options保持同步
						this.existOptions.splice(this.existOptions.indexOf(item), 1)
						this.optionsContent.splice(index, 1)
						// 删除操作 移除选项DOM
						let textWrap = this.$refs['optionBox' + index][0]
						textWrap.remove()
						// 刷新选项序号显示
						this.refreshOrder()
						this.getAnswerOrder(this.trueArr)
					}
					
				} else {
					this.$Message.warning(this.$t('evaluation.addTip4'))
				}
			},

			/* 保存试题 获取最新选项数据 */
			doSave() {
				// 拿到当前还剩的选项DOM
				let wraps = Array.from(this.$refs.optionRefs.getElementsByClassName('option-editor'))
				let arr = []
				wraps.forEach((item, index) => {
					// 遍历选项 找到对应的 Editor 然后获取编辑器里面的内容
					let id = item.dataset.editorId
					let curEditor = this.optionEditors.filter(i => i.id === id)[0]
					if(curEditor){
						// 生成新的选项对象
						let obj = {
							code: String.fromCharCode(64 + parseInt(index + 1)),
							value: curEditor.txt.html()
						}
						arr.push(obj)
					}
					
				})
				this.optionsContent = arr
			},

			/* 模拟选项聚焦事件 */
			optionClick(index) {
				let allToolbars = document.getElementsByClassName('option-editor')
				let that = this
				for (let i = 0; i < allToolbars.length; i++) {
					allToolbars[i].children[0].style.visibility = 'hidden'
				}
				setTimeout(function() {
					let currentToolBar = that.$refs['singleOption' + index][0].children[0]
					if(currentToolBar.clientHeight > 50){
						currentToolBar.style.top = '-90px'
					}
					currentToolBar.style.visibility = 'visible'
				}, 100)
			},
			/* 渲染多选题 */
			doRender(editInfo){
				this.editSingleInfo = editInfo
				this.stemContent = editInfo.question
				this.optionsContent = editInfo.option
				this.multipleAnswers = editInfo.answer
				this.trueArr = editInfo.answer.map(item => item.charCodeAt() - 65)
				this.options = editInfo.option.map((item, index) => index)
				this.existOptions = editInfo.option.map((item, index) => index)
				this.$nextTick(() => {
					this.initEditors()
					this.stemEditor.txt.html(editInfo.question)
				})
			}
		},
		mounted() {
			let stemEditor = new E(this.$refs.singleEditor)
			stemEditor.config.onchange = (html) => {
				this.stemContent = html
			}
			stemEditor.config.uploadImgShowBase64 = true;
			this.$editorTools.initMyEditor(stemEditor,this)
			stemEditor.create()
			this.stemEditor = stemEditor
			this.initEditors()

			if (this.editInfo && this.editInfo.question) {
				console.log('进入多选题Mounted编辑')
				this.doRender(this.editInfo)
			}
		},
		computed: {
		    // 选项顺序转化成字母
		    showTrueAnswers() {
		        let arr = this.trueArr.map(item => String.fromCharCode(64 + parseInt(item + 1)))
		        this.transferArr = arr
		        return this.transferArr.sort().join('')
		    }
		},
		watch: {
			editInfo: {
				handler(newValue, oldValue) {
					if (newValue) {
						console.log('多选接收到的数据')
						console.log(newValue)
						this.editSingleInfo = newValue
						if (Object.keys(newValue).length > 0) {
							this.doRender(newValue)
						}
					}
				},
				// immediate:true
			},

		}
	}
</script>
<style lang="less" scoped>
	@import"../index/CreateExercises.less";
</style>
