TEAMModelOS/TEAMModelOS/ClientApp/src/view/evaluation/components/BaseExerciseList.vue

<template>
	<div class="components-el-container">
		<!-- 题目列表部分 -->
		<div v-if="exerciseList.length === 0" class="no-data-text">
			<img src="../../../assets/icon/no_data.svg" width="120" />
			<span style="margin-top:15px;color:#808080">暂无数据</span>
		</div>
		<div class="content-wrap" ref="mathJaxContainer" v-else>
			<Loading :top="200" v-show="dataLoading" type="1"></Loading>
			<div class="list-view" :key="typeIndex" v-for="(typeItem,typeIndex) in listData">
				<p v-show="viewModel === 'type' && typeItem.list.length" class="type-name">{{ numberConvertToUppercase(getLatestTypeIndex(typeItem.type) + 1) }}
					: {{ exersicesType[typeItem.type] }}
					（{{ typeItem.score || 0 }} 分） </p>

				<div v-for="(item,index) of typeItem.list" :key="index" :class='["exercise-item",isError(item.id) ? "exercise-item-error":""]'
				 @mouseenter="exerciseMouseover($event)" @mouseleave="exerciseMouseleave($event)">

					<!-- 工具栏部分 -->
					<div class="item-tools-wrap">
						<!-- <div class="item-tools-t flex-row-center" v-show="isShowTools" @click.stop="handleSetScore(item,exerciseList.indexOf(item),typeItem.list,index)">
							<Icon type="ios-list-box-outline" />配分</div> -->
						<!-- <div class="item-tools-t flex-row-center" v-show="isShowTools" @click.stop="handleToolEdit(typeItem.list,item,index)">
							<Icon type="ios-brush-outline" />编辑</div> -->
						<div class="item-tools-t flex-row-center" v-show="isShowTools && noAnswerList.indexOf(item) > -1"
						 @click.stop="onSetAnswer(item,exerciseList.indexOf(item),typeItem.list,index)">
							<Icon type="ios-brush-outline" />设置正确答案</div>
						<div class="item-tools-t flex-row-center" v-show="isShowTools" @click.stop="handleDelete(typeItem.list,item,index)">
							<Icon type="ios-archive-outline" />删除</div>
						<div class="item-tools-t flex-row-center" v-show="index != 0 && isShowTools" @click.stop="handleMoveUp(typeItem.list,index)">
							<Icon type="md-arrow-up" />上移</div>
						<div class="item-tools-t flex-row-center" v-show="index != (typeItem.list.length - 1)  && isShowTools"
						 @click.stop="handleMoveDown(typeItem.list,index)">
							<Icon type="md-arrow-down" />下移</div>
					</div>

					<div class="item-error-wrap" v-if="errorList.indexOf(item) > -1">
						<span v-if="isNoAnswer(item)">请为当前客观题设置正确答案！</span>
						<span v-else>试题题干或选项信息有误，请删除或者重新导入正确文档！</span>
					</div>

					<div @click="onQuestionToggle(exerciseList.indexOf(item),item.id,$event,typeItem.list)">
						<!-- 题干部分 -->
						<div class="item-question">
							<div v-if="viewModel === 'list'">
								<div class="item-question-order">{{ index + 1 }} : </div>
								<div class="item-question-text" v-html="item.question"></div>
							</div>
							<div v-else>
								<div class="item-question-order">{{ pageSize * (pageNum - 1) + index + 1 }} : </div>
								<div class="item-question-text" v-html="item.question" @click="onRichTextClick($event)"></div>
							</div>
						</div>
						<!-- 选项部分 -->
						<div v-for="(option,optionIndex) in item.option" :key="optionIndex" class="item-options">
							<div class="item-option-content">
								<div class="item-option-order">{{String.fromCharCode(64 + parseInt(optionIndex+1))}} :</div>
								<div class="item-option-text" v-html="option.value" @click="onRichTextClick($event)"></div>
							</div>
						</div>
					</div>
					<div class="item-btn-toggle" @click.stop v-show="isShowTools" >
						<template>
							<InputNumber :max="item.score + surPlusScore" :min="0" v-model="item.score" style="display: inline-block ;width: 60px;margin-right: 10px;height: 30px;"
							 @click.stop></InputNumber>
							<span style="margin-right: 20px;">分</span>
							<!-- <span class="item-score" title="设置题目分数" @click.stop="onSetSingleItem(item,index)" v-else>{{ item.score }} 分</span> -->
						</template>
						<Icon :type="collapseList.indexOf(index) > -1 ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'" />
					</div>
					<!-- 答案以及解析 -->
					<transition name="slide">
						<!-- <div v-show="collapseList.indexOf(exerciseList.indexOf(item)) > -1" class="toggle-area"> -->
						<div v-show="collapseList.indexOf(exerciseList.indexOf(item)) > -1" class="toggle-area">
							<div v-if="item.type !== 'compose'">
								<!-- 答案展示部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【答ㅤ案】</span>
									<div class="item-explain-details" @click="onRichTextClick($event)">
										<!-- 问答题答案 -->
										<div v-if="item.type === 'subjective'">
											<span v-for="(answer,index) in item.answer" :key="index" v-html="item.answer.length ? answer : '未设置答案'"></span>
										</div>
										<!-- 填空题答案 -->
										<div v-else-if="item.type === 'complete'">
											<span :class="[ item.type === 'complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer"
											 :key="index" v-html="answer"></span>
										</div>
										<!-- 其余题型答案 -->
										<div v-else>
											<span :class="[ item.type === 'complete' ? 'item-answer-item':'']" v-for="(answer,index) in item.answer"
											 :key="index">{{answer}}</span>
										</div>
									</div>
								</div>
								<!-- 解析部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【解ㅤ析】</span>
									<div class="item-explain-details">
										<span v-html="item.explain || '暂无解析'" @click="onRichTextClick($event)"></span>
									</div>
								</div>
								<!-- 知识点部分 -->
								<div class="item-explain" v-show="isShowAnswer">
									<span class="explain-title">【知识点】</span>
									<div class="item-explain-details">
										<span v-if="! (_.compact(item.points).length)">暂未绑定知识点</span>
										<div v-else>
											<span v-for="(point,index) in item.points" :key="index" class="item-point-tag">
												{{ point }}
											</span>
										</div>
									</div>
								</div>
							</div>
							<!-- 如果是综合题 则加载子题渲染组件 -->
							<div v-else>
								<BaseChild :children="item.children"></BaseChild>
							</div>

						</div>
					</transition>
				</div>
			</div>
		</div>

		<!-- 单个试题配分弹框 -->
		<Modal v-model="answerModal" title="设置答案" @on-ok="onConfirmAnswer">
			<div v-if="curErrorItem.type === 'single'">
				<RadioGroup v-model="curErrorSingleAnswer" type="button">
					<Radio v-for="(option,index) in curErrorItem.option" :key="index" :label="option.code"></Radio>
				</RadioGroup>
			</div>
			<div v-else>
				<CheckboxGroup v-model="curErrorMulAnswer">
					<Checkbox v-for="(option,index) in curErrorItem.option" :key="index" :label="option.code" border></Checkbox>
				</CheckboxGroup>
			</div>
		</Modal>

		<!-- 题型配分弹窗 -->
		<Modal v-model="typeScoreModel" title="题型配分" footer-hide>
			<span class="type-score-item">试卷总分 ： {{ paperInfo.score }}</span>
			<span class="type-score-item">已分配总分 ： {{ getTotalScore(groupTypeList) }}</span>
			<div v-for="(modalItem,modalIndex) in groupTypeList" :key="modalIndex" class="type-score-item">
				<div v-if="modalItem.list.length">
					<span>{{ exersicesType[modalItem.type] }} </span>
					<span>共 {{ modalItem.list.length }} 道题,总分配：</span>
					<InputNumber :max="paperInfo.score" :min="0" :step="scoreStep" v-model="modalItem.score"></InputNumber>
					<span> 分</span>
					<div v-show="modalItem.type === 'multiple'" style="margin-top: 10px;">
						<div class="rule-item">
							<RadioGroup v-model="multipleRule" vertical>
								<Radio :label="1">
									<Icon type="social-android"></Icon>
									<span>默认全对得满分</span>
								</Radio>
								<Radio :label="2">
									<Icon type="social-windows"></Icon>
									<span>少选得一半分数，错选或者不选不得分</span>
								</Radio>
								<Radio :label="3">
									<Icon type="social-windows"></Icon>
									<span>少选按个数得分，错选或者不选不得分</span>
								</Radio>
								<Radio :label="4">
									<Icon type="social-windows"></Icon>
									<span>依照（选项数 - 2 * 错选数）/ 选项数，负分则不得分</span>
								</Radio>
							</RadioGroup>
						</div>
					</div>
				</div>
			</div>

			<Button class="type-score-btn" @click="onConfirmTypeScore" type="info" :disabled="getTotalScore(groupTypeList) > paperInfo.score">确认</Button>
			<p style="color:red;text-align:center;font-weight:bold;margin-top:10px" v-show="getTotalScore(groupTypeList) > paperInfo.score">配分已超试卷总分，请重新分配！</p>

		</Modal>

		<!-- 编辑试题弹窗 -->
		<!-- 		<Modal v-model="editExerciseModal" class-name="edit-exercise-modal" width="1200px" footer-hide title="编辑习题">
			<BaseEditExercise :exerciseItem="currentExercise" @onEditSuccess="onEditSuccess" refId="paperEdit" ref="paperEdit"></BaseEditExercise>
			<div slot="footer">
				<Button type="success">确认</Button>
			</div>
		</Modal> -->

		<!-- 音频播放弹窗 -->
		<Modal v-model="playAudioModal" width="400" footer-hide @on-visible-change="onAudioModalChange">
			<div class="modal-header" slot="header">音频播放</div>
			<BaseAudioPlayer :audioSrc="curAudioSrc" :audioName="curAudioName" ref="audioPlayer"></BaseAudioPlayer>
		</Modal>

		<!-- 视频播放弹窗 -->
		<Modal v-model="playVideoModal" width="400" footer-hide @on-visible-change="onVideoModalChange">
			<div class="modal-header" slot="header">视频播放</div>
			<BaseVideoPlayer :videoSrc="curVideoSrc" :audioName="curVideoName" ref="videoPlayer"></BaseVideoPlayer>
		</Modal>


	</div>
</template>

<script>
	export default {
		props: {
			paper: {
				type: Object,
				default: null
			},
			isShowTools: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				schoolCode: '',
				dataLoading: false,
				curEditItemId: null,
				exerciseList: [],
				schoolInfo: {},
				isShowUploadList: false,
				multipleRule: 1,
				typeScoreModel: false,
				setPaperInfoModal: false,
				editExerciseModal: false,
				exersicesType: {
					single: '单选题',
					multiple: '多选题',
					judge: '判断题',
					complete: '填空题',
					subjective: '问答题',
					compose: '综合题'
				},
				exersicesDiff: ['容易', '较易', '一般', '较难', '困难'],
				diffColors: ['#32CF74', '#E8BE15', '#F19300', '#EB5E00', '#D30000'],
				totalNum: 0,
				isShowAnswer: true,
				importLoading: false,
				pageSize: 99,
				pageNum: 1,
				currentPage: 1,
				collapseList: [],
				periodList: [],
				gradeList: [],
				subjectList: [],
				basketList: [],
				originData: [],
				groupList: [],
				groupTypeList: [],
				orderList: [],
				typeList: ['single', 'multiple', 'judge', 'complete', 'subjective', 'compose'],
				viewModel: 'type',
				filterParams: {},
				surPlusScore: 0,
				curItemScore: 0,
				curIndex: 0,
				lastScore: 0,
				scoreStep: 0.5,
				curTypeItems: [],
				scoreModal: false,
				currentExercise: {},
				allPointList: [],
				playAudioModal: false,
				playVideoModal: false,
				curAudioSrc: "",
				curAudioName: "",
				curVideoSrc: "",
				curVideoName: "",
				modifyItems: [],
				errorList: [],
				paperInfo: {
					score: 0
				},
				curErrorItem: {
					type:''
				},
				curErrorSingleAnswer: 'A',
				curErrorMulAnswer: [],
				noAnswerList:[],
				answerModal: false
			}
		},

		created() {
			//console.log(this.exerciseList)
		},
		methods: {

			/* 音频弹窗切换事件 */
			onAudioModalChange(val) {
				if (!val) {
					this.$refs.audioPlayer.onCloseAudio()
				}
			},
			
			/* 视频弹窗切换事件 */
			onVideoModalChange(val) {
				if (!val) {
					this.$refs.videoPlayer.onCloseAudio()
				}
			},

			/* 音频点击播放事件 */
			onRichTextClick(e) {
				if (e.srcElement.classList[0] === 'richText-audio') {
					this.playAudioModal = true
					this.curAudioSrc = e.srcElement.dataset.url
					this.curAudioName = e.srcElement.dataset.name
				} else if (e.srcElement.classList[0] === 'richText-video') {
					this.playVideoModal = true
					this.curVideoSrc = e.srcElement.dataset.url
					this.curVideoName = e.srcElement.dataset.name
				}
			},
			/**
			 * 题干展开与收缩
			 * @param index
			 * @param id
			 */
			onQuestionToggle(index, id, e) {
				e.stopPropagation()
				this.curEditItemId = null
				let listIndex = this.collapseList.indexOf(index)
				if (listIndex > -1) {
					this.collapseList.splice(listIndex, 1)
				} else {
					/** 如果是首次展开 则需要获取详细数据 否则直接展开 */
					if (!this.exerciseList[index].answer.length) {
						this.collapseList.push(index)
						this.pageScrollTo(e.target.offsetTop + 420) // 490就是 content-wrap 距离顶部高度
					} else {
						this.collapseList.push(index)
						this.pageScrollTo(e.target.offsetTop + 420) // 490就是 content-wrap 距离顶部高度
					}

				}

				this.$emit('toggleChange', this.collapseList)
			},

			/**
			 * 数字与中文转换
			 * @param num
			 */
			numberConvertToUppercase(num) {
				num = Number(num)
				var upperCaseNumber = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千', '万', '亿']
				var length = String(num).length
				if (length === 1) {
					return upperCaseNumber[num]
				} else if (length === 2) {
					if (num === 10) {
						return upperCaseNumber[num]
					} else if (num > 10 && num < 20) {
						return '十' + upperCaseNumber[String(num).charAt(1)]
					} else {
						return upperCaseNumber[String(num).charAt(0)] + '十' + upperCaseNumber[String(num).charAt(1)].replace('零', '')
					}
				}
			},
			/**
			 * 页面滚动事件
			 * @param scrollDistance 页面滚动距离
			 */
			pageScrollTo(scrollDistance) {
				//let parentVm = this.$parent.$parent.$parent.$parent
				//parentVm.$refs['evScroll'].scrollTo(
				//    {
				//        y: scrollDistance
				//    },
				//    500, 'easeInQuad'
				//)
			},
			// 题目鼠标滑过事件
			exerciseMouseover(e) {
				e.preventDefault()
				e.target.children[0].style.display = 'block'
			},

			// 题目鼠标移出事件
			exerciseMouseleave(e) {
				e.preventDefault()
				e.target.children[0].style.display = 'none'
			},

			// 子题顺序操作
			moveItems(arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0]
				return arr
			},

			// 子题上移操作
			handleMoveUp(arr, index) {
				this.moveItems(arr, index, index - 1)
			},

			// 子题下移操作
			handleMoveDown(arr, index) {
				this.moveItems(arr, index, index + 1)
			},


			/**
			 * 删除试卷中的单个试题
			 * @param index
			 */
			handleDelete(arr, item, index) {
				this.$Modal.confirm({
					title: '提示',
					content: '<p>确认删除该试题吗？</p>',
					okText: '确认',
					cancelText: '取消',
					onOk: () => {
						this.$Message.success('删除成功')
						this.surPlusScore += item.score
						this.$emit('scoreUpdate', this.surPlusScore)
						arr.splice(index, 1)
						this.exerciseList.splice(this.exerciseList.indexOf(item), 1)
						this.$emit('dataUpdate', this.exerciseList)
						this.$EventBus.$emit('onPaperItemChange', this.exerciseList)
						if(this.errorList.indexOf(item) > -1){
							this.errorList.splice(this.errorList.indexOf(item),1)
						}
					}
				})
			},

			/**
			 * 编辑单个试题
			 * @param item
			 */
			handleToolEdit(arr, item, index) {
				console.log('试卷当前编辑的题目')
				console.log(item)
				this.currentExerciseIndex = this.exerciseList.indexOf(item) // 清单列表下的index
				this.curTypeItems = arr
				this.currentExercise = item
				this.editExerciseModal = true
			},


			/**
			 * 给单个试题配分
			 * @param item
			 * @param index
			 */
			onSetAnswer(item, index, arr, groupIndex) {
				this.currentExerciseIndex = index
				this.curIndex = groupIndex
				this.curTypeItems = arr
				this.curErrorItem = item
				this.answerModal = true
			},

			onConfirmAnswer() {
				if(this.curErrorItem.type === 'single'){
					this.curErrorItem.answer = [this.curErrorSingleAnswer]
					let errorIndex = this.errorList.map(i => i.id).indexOf(this.curErrorItem.id)
					if(errorIndex > -1){
						this.errorList.splice(errorIndex,1)
					}
				}else{
					if(this.curErrorMulAnswer.length){
						this.curErrorItem.answer = this.curErrorMulAnswer
						let errorIndex = this.errorList.map(i => i.id).indexOf(this.curErrorItem.id)
						if(errorIndex > -1){
							this.errorList.splice(errorIndex,1)
						}
					}else{
						this.curErrorItem.answer = []
						this.errorList.push(this.curErrorItem)
					}
				}
				
			},


			/**
			 * 给单个试题配分
			 * @param item
			 * @param index
			 */
			handleSetScore(item, index, arr, groupIndex) {
				this.currentExerciseIndex = index
				this.curIndex = groupIndex
				this.curTypeItems = arr
				this.curItemScore = item.score
				this.lastScore = item.score
				this.scoreModal = true
			},

			/**
			 * 配分变化时的剩余分数处理
			 * @param val
			 */
			onScoreChange(val) {
				this.surPlusScore = this.surPlusScore + this.lastScore - val
				this.lastScore = val
				this.$emit('scoreUpdate', this.surPlusScore)

			},

			/** 确认单个试题配分 */
			onConfirmScore() {
				this.$set(this.exerciseList[this.currentExerciseIndex], 'score', this.curItemScore);
				this.$set(this.curTypeItems[this.curIndex], 'score', this.curItemScore);
			},

			/** 按照题型配分 */
			onConfirmTypeScore() {
				/** 重新计算剩余分配分数 */
				this.surPlusScore = this.paperInfo.score - this.groupTypeList.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
				if (this.surPlusScore < 0) {
					this.$Message.warning("当前配分超过试卷总分，请重新分配!")
				} else {
					/* 按照题型配分后平均分配给每个子题 */
					this.groupTypeList.forEach(item => {
						item.list.forEach((exercise, exerciseIndex) => {
							// 先找到原始列表里面的当前题目
							let listItem = this.exerciseList.filter(item => item.id === exercise.id)[0]
							// 先判断是否总分除以题目数量能否除尽
							let remainder = item.score % item.list.length
							// 如果可以整除 则直接计算
							if (remainder === 0) {
								exercise.score = item.score / item.list.length
							} else {
								// 如果不能整除 则前面所有取整 最后一题加上余数 即可完成配分
								let integerScore = parseInt(item.score / item.list.length)
								let lastItem = exerciseIndex === item.list.length - 1
								exercise.score = lastItem ? integerScore + remainder : integerScore
							}
							listItem.score = exercise.score
						})
					})

					/** 回到题型视图 */
					this.groupList = this.groupTypeList
					this.$parent.viewModel = 'type'
					this.$parent.paperInfo.multipleRule = this.multipleRule
					this.typeScoreModel = false
					this.$emit('scoreUpdate', this.surPlusScore)
				}

			},

			/** 编辑成功 */
			onEditSuccess(item) {


				if (item.id) {
					this.$refs.paperEdit.isLoading = false
					this.editExerciseModal = false
					this.$Message.success("修改成功！")
					this.exerciseList.splice(this.currentExerciseIndex, 1, item)
					this.curTypeItems.splice(this.curIndex, 1, item)
					this.$emit('dataUpdate', this.exerciseList)

					let existIndex = this.modifyItems.map(i => i.id).indexOf(item.id)
					if (existIndex < 0) {
						this.modifyItems.push(item)
					} else {
						this.modifyItems[existIndex] = item
					}

				} else {
					this.editExerciseModal = false
					this.exerciseList.splice(this.currentExerciseIndex, 1, item)
					this.curTypeItems.splice(this.curIndex, 1, item)
					let listIndex = this.collapseList.indexOf(this.currentExerciseIndex);
					if (listIndex > -1) {
						this.collapseList.splice(listIndex, 1)
					}
					this.$Message.success("修改成功！")
				}
			},


			/**
			 * 全部展开与全部折叠
			 * @param isAllOpen
			 */
			onHandleToggle(isAllOpen) {
				if (isAllOpen) {
					this.collapseList = []
				} else {
					this.collapseList = [...this.exerciseList.keys()]
				}
			},


			/** 打开题型配分 */
			onSetScoreByType() {
				this.typeScoreModel = true;
			},


			/**
			 * 获取题目列表总分
			 * @param arr
			 */
			getTotalScore(arr) {
				arr.forEach(i => {
					if (i.list.length === 0) {
						i.score = 0
					}
				})
				return arr.reduce((p, e) => p + parseInt(e.score), 0)
			},

			/**
			 * 拿到当前页面所有知识点集合
			 * @param arr
			 */
			getPointIds(arr) {
				let ids = []
				arr.forEach(i => {
					ids = ids.concat(i.points)
				})
				return this._.compact([...new Set(ids)])
			},
			getLatestTypeIndex(type) {
				let arr = []
				this.groupList.forEach(i => {
					if (i.list.length) {
						arr.push(i.type)
					}
				})
				return arr.indexOf(type)
			}


		},
		mounted() {
			this.$EventBus.$off('importFinish')
			this.$EventBus.$on('importFinish', list => {
				this.errorList = list
				this.noAnswerList = list.filter(i => i.answer.length === 0)
				console.log(list)
				console.log(this.noAnswerList)
			})
		},
		computed: {
			listData() {
				return this.viewModel === 'type' ? this.groupList : this.orderList
			},
			isError() {
				return id => {
					return this.errorList.length && this.errorList.map(i => i.id).indexOf(id) > -1
				}
			},
			isNoAnswer() {
				return item => {
					return (item.question.replace(/\s*/g, "")) && item.option.length && !item.answer.length
				}
			}
		},
		watch: {
			paper: {
				handler(newPaper) {
					if (newPaper) {
						console.log('获取的题目信息')
                        console.log(newPaper)
						let that = this
						this.groupList = []
						this.exerciseList = []
						this.orderList = []
						this.paperInfo = newPaper
						if (newPaper.item.length) {
							newPaper.item.forEach(i => {
								if (!i.score) i.score = 0
							})
							this.orderList.push({
								list: newPaper.item
							})
							/* 处理试卷内题目按照题型排序 */
							this.typeList.forEach(item => {
								this._.mapKeys(this._.groupBy(newPaper.item, 'type'), function(value, key) {
									if (key === item) { /* 按照题型排序，并且计算每种题型的总分 */
										that.groupList.push({
											type: key,
											list: value,
											score: value.reduce((p, e) => parseInt(p) + parseInt(e.score), 0)
										})
										that.exerciseList = that.exerciseList.concat(value)
									}
								})
							});
						}
						
						this.originData = this.exerciseList
						this.groupTypeList = this.groupList
						this.totalNum = newPaper.item.length
						this.surPlusScore = newPaper.score - newPaper.item.reduce((p, e) => parseInt(p) + parseInt(e.score), 0);
						this.$emit('scoreUpdate', this.surPlusScore)
						this.pageScrollTo(0)
						this.$nextTick(() => {
							window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.$refs.mathJaxContainer]);
						})
					}
				},
				deep: true
			},
			viewModel: {
				handler(newValue) {
					if (newValue) {
						if (newValue === 'list') {
							this.groupList = [{
								type: 'all',
								score: this.exerciseList.reduce((p, e) => p + e.score, 0),
								list: this.exerciseList
							}]
						} else {
							this.groupList = this.groupTypeList
						}
					}
				},
				immediate: true
			}
		}

	}
</script>

<style scoped>
	@import "../index/PickExercise.css";
</style>

<style scoped>
	.components-el-container .ivu-page {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 20px 0;
	}

	.components-el-container .exercise-item-error {
		background-color: rgb(255 152 152 / 60%);
	}

	.components-el-container .exercise-item-error:hover {
		border: 2px solid red !important;
	}


	.components-el-container .type-name {
		font-size: 18px;
		font-weight: bold;
		margin-top: 20px;
	}

	.components-el-container /deep/ .ivu-input-number-handler-down-inner,
	.components-el-container /deep/ .ivu-input-number-handler-up-inner {
		right: 8px;
		font-size: 16px;
	}


	.components-el-container .exercise-item:hover {
		border: 2px solid #01b4ef;
	}

	.components-el-container .exercise-item {
		position: relative;
		margin-top: 30px;
		font-size: 14px;
	}

	.components-el-container .exercise-item p {
		width: 92%;
	}

	.components-el-container .exercise-item .item-error-wrap {
		position: absolute;
		right: -2px;
		bottom: 0;
		width: auto;
		height: 30px;
		line-height: 30px;
		padding: 0 10px;
		margin: 0;
		background: #ff5656;
		color: #fff
	}


	.components-el-container .exercise-item .item-tools-wrap {
		position: absolute;
		right: -2px;
		top: -32px;
		width: auto;
		height: 30px;
		margin: 0;
		padding: 0;
		background: #01b4ef;
		display: none;
	}

	.components-el-container .exercise-item .item-tools-t {
		height: 100%;
		padding: 0 15px;
		float: left;
		color: white;
		cursor: pointer;
	}

	.components-el-container .exercise-item .item-tools-t:hover {
		background: #4a5ae6;
	}

	.components-el-container .exercise-item .item-score {
		margin-right: 10px;
		color: #fff;
		background: #01b4ef;
		padding: 4px 10px;
		border-radius: 5px;
	}

	.components-el-container .exercise-item .item-explain-details {
		/* width: 90%; */
	}

	.components-el-container .exercise-item .item-tools-t .ivu-icon {
		color: white;
		font-size: 14px;
		margin: 0 3px;
	}

	.type-score-btn {
		width: 80%;
		margin-left: 10%;
		height: 40px;
		line-height: 40px;
	}

	.type-score-item {
		margin: 20px 10px;
	}


	/*横向垂直水平居中*/
	.flex-row-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.no-data-text {
		width: 100%;
		padding: 30px;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
		font-size: 16px;
	}
</style>

<style>
	.edit-exercise-modal .ivu-modal-body {
		max-height: 700px;
		overflow: auto;
		padding: 0;
	}
</style>