<template>
	<div>
		<div class="exersices-content">
			<IconText :text="$t('evaluation.single') + $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.singleOption')" :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>
				<!-- <span class="fl-center option-order">{{String.fromCharCode(64 + parseInt(index+1))}}</span> -->
				<div :ref="'singleOption'+index" style="text-align:left" class="option-editor" @click="optionClick(item)"></div>
				<span :class="['fl-center', 'option-setting', optionTrueIndex === index ? 'option-true':'']" @click="settingAnswer(index)">{{ optionTrueIndex === index ? $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') }}：{{ renderIndex(trueIndex) }}</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,
				editSingleInfo: {},
				stemEditor: null,
				stemContent: '',
				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'
								}
							}
						}

						this.$editorTools.addAudio(this, editor)
						this.$editorTools.addCanvas(this, editor)
						this.$editorTools.initMyEditor(editor)

						// 选项编辑器内容发生变化时
						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;
				console.log(wraps)
				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.addAudio(this, editor)
						this.$editorTools.initMyEditor(editor)
						this.$editorTools.addCanvas(this, editor)
						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
								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('最多只有10个选项！')
				}
			},


			/* 设置正确答案 */
			settingAnswer(index) {
				this.optionTrueIndex = 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) {
						this.trueIndex = item.innerText.charCodeAt() - 65
						break;
					}
				}
				// wraps.forEach((item, orderIndex) => {
				// 	console.log(item)
				// 	console.log(item.dataset.index)

				// })
			},

			/* 根据页面上的选项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 (index < this.optionTrueIndex) {
					this.trueIndex--
				}
				// 拿到所有选项
				if (this.existOptions.length > 2) {
					// 确保当前存在的options保持同步
					this.existOptions.splice(this.existOptions.indexOf(item), 1)
					this.optionsContent.splice(index, 1)
					// 删除操作 移除选项DOM
					let textWrap = this.$refs['optionBox' + index][0]
					textWrap.remove()
					// 如果删除的是正确答案 则重置正确答案
					if (index === this.optionTrueIndex) {
						this.optionTrueIndex = this.existOptions[0]
						this.trueIndex = 0
					}
					// 刷新选项序号显示
					this.refreshOrder()
				} else {
					this.$Message.warning('至少保留两个选项！')
				}
			},

			/* 保存试题 获取最新选项数据 */
			doSave() {
				// 拿到当前还剩的选项DOM
				let wraps = Array.from(this.$refs.optionRefs.getElementsByClassName('option-editor'))
				let arr = []
				console.log(wraps)
				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)
			}
		},
		mounted() {
			let stemEditor = new E(this.$refs.singleEditor)
			stemEditor.config.onchange = (html) => {
				this.stemContent = html
			} 
			stemEditor.config.uploadImgShowBase64 = true;
			this.$editorTools.addVideoUpload(this, stemEditor)
			this.$editorTools.addAudio(this, stemEditor)
			this.$editorTools.addCanvas(this, stemEditor)
			this.$editorTools.initMyEditor(stemEditor)

			stemEditor.create()
			this.stemEditor = stemEditor
			this.initEditors()

			if (this.editInfo && this.editInfo.question) {
				console.log('进入单选题Mounted编辑')
				this.editSingleInfo = this.editInfo
				this.stemContent = this.editSingleInfo.question
				this.optionsContent = this.editSingleInfo.option
				this.trueIndex = this.editSingleInfo.answer[0].charCodeAt() - 65
				this.optionTrueIndex = this.editSingleInfo.answer[0].charCodeAt() - 65
				this.options = this.editSingleInfo.option.map((item, index) => index)
				this.existOptions = this.editSingleInfo.option.map((item, index) => index)
				this.$nextTick(() => {
					this.initEditors()
					this.stemEditor.txt.html(this.editSingleInfo.question)
				})
			}
		},
		watch: {
			editInfo: {
				handler(newValue, oldValue) {
					if (newValue) {
						console.log('单选接收到的数据')
						console.log(newValue)
						this.editSingleInfo = newValue
						if (Object.keys(newValue).length > 0) {
							this.stemContent = this.editSingleInfo.question
							this.optionsContent = this.editSingleInfo.option
							this.trueIndex = this.editSingleInfo.answer[0].charCodeAt() - 65
							this.optionTrueIndex = this.editSingleInfo.answer[0].charCodeAt() - 65
							this.options = this.editSingleInfo.option.map((item, index) => index)
							this.existOptions = this.editSingleInfo.option.map((item, index) => index)
							this.$nextTick(() => {
								this.initEditors()
								this.stemEditor.txt.html(this.editSingleInfo.question)
							})
						}
					}
				},
				// immediate:true
			},

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