<template>
	<view>
		<view class="ext-bg">
			<!-- <view class="extin-bg">
				<cu-custom bgColor="bg-gradual-no" :isBack="true" :isRingt="true" :backUrl="backUrl">
					<block slot="backText">返回</block>
					<block slot="content">习题练习</block>
				</cu-custom>
			</view> -->
			<view class="extin-bg">
				<view class="cu-bar fixed bg-gradual-no">
					<view class="action" @tap="BackPage">
						<text class="cuIcon-back"></text>
						<slot name="backText">返回</slot>
					</view>
					<view class="content" :style="[{top:StatusBar + 'px'}]">
						<slot name="content">习题练习</slot>
					</view>
					<view class="right">
						<slot name="right"></slot>
					</view>
					<!-- <slot name="right"></slot> -->
				</view>
			</view>
			<view class="ext-box">
				<view class="ext-topic">
					<view class="ext-title">
						第{{sindex+1}}题
					</view>
					<view class="ext-content">
						<view class="ext-text">
							<text v-if="form.QUESTIONTYPE[sindex] === '1'" class="mark">(单选题)</text>
							<text v-if="form.QUESTIONTYPE[sindex] === '2'" class="mark">(多选题)</text>
							<text v-if="form.QUESTIONTYPE[sindex] === '3'" class="mark">(判断题)</text>
							{{ form.QUESTIONLIST[sindex].QUESTIONDRY }}
						</view>
						<view class="ext-select">
							<radio-group v-if="form.QUESTIONTYPE[sindex] == '1'" class="ext-group" v-model="form.ANSWER[sindex]" @change="radioQuestionChange($event,sindex)">
								<label class="answer-lable">
									<radio class="blue" :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
										   value="A"></radio>
									<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
								</label>
								<label class="answer-lable">
									<radio class="blue" :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
										   value="B"></radio>
									<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
								</label>
								<label class="answer-lable">
									<radio class="blue" :class="(form.ANSWER[sindex]=='C'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='C'?true:false" :disabled="isDisabled"
										   value="C"></radio>
									<text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
								</label>
								<label class="answer-lable">
									<radio class="blue" :class="(form.ANSWER[sindex]=='D'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='D'?true:false" :disabled="isDisabled"
										   value="D"></radio>
									<text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
								</label>
							</radio-group>
							<checkbox-group v-if="form.QUESTIONTYPE[sindex] == '2'" class="ext-group checkbox" @change="checkQuestionChange($event,sindex)">
								<label class="answer-lable">
									<checkbox :disabled="isDisabled" value="A" :class="form.ANSWER[sindex].includes('A')?'checked':''" :checked="(form.ANSWER[sindex].includes('A') ? true : false)"></checkbox>
									<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
								</label>
								<label class="answer-lable">
									<checkbox :disabled="isDisabled" value="B" :class="form.ANSWER[sindex].includes('B')?'checked':''" :checked="(form.ANSWER[sindex].includes('B') ? true : false)"></checkbox>
									<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
								</label>
								<label class="answer-lable">
									<checkbox :disabled="isDisabled" value="C" :class="form.ANSWER[sindex].includes('C')?'checked':''" :checked="(form.ANSWER[sindex].includes('C') ? true : false)"></checkbox>
									<text class="title">C.{{ form.QUESTIONLIST[sindex].OPTIONC }}</text>
								</label>
								<label class="answer-lable">
									<checkbox :disabled="isDisabled" value="D" :class="form.ANSWER[sindex].includes('D')?'checked':''" :checked="(form.ANSWER[sindex].includes('D') ? true : false)"></checkbox>
									<text class="title">D.{{ form.QUESTIONLIST[sindex].OPTIOND }}</text>
								</label>
							</checkbox-group>
							<radio-group v-if="form.QUESTIONTYPE[sindex] == '3'" class="ext-group" v-model="form.ANSWER[sindex]" @change="radioQuestionChange($event,sindex)">
								<label class="answer-lable">
									<radio :class="(form.ANSWER[sindex]=='A'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='A'?true:false" :disabled="isDisabled"
										   value="A"></radio>
									<text class="title">A.{{ form.QUESTIONLIST[sindex].OPTIONA }}</text>
								</label>
								<label class="answer-lable">
									<radio :class="(form.ANSWER[sindex]=='B'?'checked':'')+' '+((isShowAnswer && form.ANSWER[sindex] == form.ANSWERRIGHT[sindex])?'blue':'red')" :checked="form.ANSWER[sindex]=='B'?true:false" :disabled="isDisabled"
										   value="B"></radio>
									<text class="title">B.{{ form.QUESTIONLIST[sindex].OPTIONB }}</text>
								</label>
							</radio-group>

						</view>
					</view>
				</view>
				<view v-if="isShowAnswer" class="ext-answer">
					<view class="title">
						正确答案
					</view>
					<view class="content">
						<view class="mb12">
							正确答案：{{ form.ANSWERRIGHT[sindex] }}
						</view>
						<!-- <view class="">
							题目解析：A
						</view> -->
					</view>
				</view>
				<view class="ext-btns" :class="(sindex!=-1 && sindex!=0 && sindex != (form.QUESTIONLIST.length-1)) ? 'ext-between' : 'ext-center'">
					<button v-if="sindex!=-1 && sindex!=0" :disabled="isCheckDisabled" class="cu-btn bg-yellow" @click="questionPrevious" >上一题</button>
					<button v-if="form.QUESTIONTYPE[sindex] == '2' && form.ANSWER[sindex]" class="cu-btn bg-green" @click="$noMultipleClicks(confirmCheck)" >查看结果</button>
					<button v-if="sindex != (form.QUESTIONLIST.length-1)" :disabled="isCheckDisabled" class="cu-btn bg-yellow" @click="questionNext" >下一题</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		basePath,
		corpinfoId,
		deptId,
		loginSession,
		formatDate,
		loginUser
	} from '@/common/tool.js';
	export default {
		components: {},
		data() {
			return {
				backUrl: '/pages/application/onlinexxks/my-study',
				showRight: false,
				dataFlag: 'noData',
				isDisabled: false,
				isShowAnswer: false,
				isAnswered: false,
				isCheckDisabled: false,
				form: {
					STUDYTASK_ID: '',
					CURRICULUMID: '', // 课程ID
					COURSEWAREID: '', //课件ID
					COURSEWARETYPE: '', //课件分类
					STAGESTUDENTRELATION_ID: '', //课程学员关系ID
					CURRICULUMNAME: '', // 课程名称
					CURRICULUMINTRODUCE: '', // 课程介绍
					CURRICULUMAIM: '', // 课程目的
					STARTTIME: '', // 开始时间
					ENDTIME: '', // 结束时间
					CURRICULUMUSERS: '', // 适用人员
					QUESTION_ID: [], // 试题ID数组
					QUESTIONTYPE: [], // 试题类型数组
					ANSWER: [], // 学员答案
					ANSWERRIGHT: [], // 正确答案
					QUESTIONLIST: [{
						QUESTIONTYPE: '', // 试题类型（单选题、多选题、判断题）
						QUESTIONDRY: '', // 题干
						OPTIONA: '', // 选项A
						OPTIONB: '', // 选项B
						OPTIONC: '', // 选项C
						OPTIOND: '', // 选项D
						ANSWER: '' ,// 答案
					}] //考题List
				},
				subForm: {},
				noClick: true,
				sindex: 0
			}
		},
		onLoad(event) { //页面第一次加载时触发，从跳转页面返回时不能触发，可以传递参
			this.form.STUDYTASK_ID = event.STUDYTASK_ID
			this.form.COURSEWAREID = event.COURSEWAREID
			this.form.COURSEWARETYPE = event.COURSEWARETYPE
			this.form.CURRICULUMID = event.CURRICULUM_ID
			this.form.STAGESTUDENTRELATION_ID = event.STAGESTUDENTRELATION_ID
			// console.info('页面加载')
			console.info(this.form)
			this.backUrl = '/pages/application/onlinexxks/my-study?STAGESTUDENTRELATION_ID=' + event.STAGESTUDENTRELATION_ID
			this.getData()
			loginSession()
		},
		onBackPress(options) {
			this.BackPage()
			return true
		},
		methods: {
			getData() {
				var _this = this;
				uni.showLoading({
					title: '请稍候...'
				})
				uni.request({
					url: basePath + '/app/mycurriculum/findForStudyByCoursewareId',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						CURRICULUMID: _this.form.CURRICULUMID,
						COURSEWAREID: _this.form.COURSEWAREID,
						COURSEWARETYPE: _this.form.COURSEWARETYPE,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
					},
					success: (res) => {
						uni.hideLoading(); //结束加载中动画
						if ("success" == res.data.result) {
							// _this.pd = res.data.pd;
							_this.form = Object.assign(_this.form, res.data.pd)
							// console.info('getData取值')
							// console.info(this.form)
							if(_this.form.QUESTIONLIST.length>0) {
								_this.sindex = 0
							}
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				})
			},
			radioQuestionChange(e,i)  {
				this.form.ANSWER[i] = e.detail.value
				this.isDisabled = true
				this.isShowAnswer = true
				this.isAnswered = true

				console.info(this.form.ANSWER[i])
				console.info(this.form.ANSWERRIGHT[i])
				console.info(this.form.ANSWER[i] == this.form.ANSWERRIGHT[i])
			},
			checkQuestionChange(e,i)  {
				this.form.ANSWER[i] = e.detail.value
				if (this.trimSpace(this.form.ANSWER[i]).length>0) {
					this.isCheckDisabled = true
				} else {
					this.isCheckDisabled = false
				}
				this.$forceUpdate()
			},
			confirmCheck() {
				this.isDisabled = true
				this.isShowAnswer = true
				this.isAnswered = true
				this.isCheckDisabled = false
			},
			questionPrevious() {
				this.isCheckDisabled = false
				this.sindex = this.sindex - 1
				var ANSWER_STR = ''
				if (this.form.QUESTIONTYPE[this.sindex] == '2') {
					ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
				} else {
					ANSWER_STR = this.form.ANSWER[this.sindex]
				}
				console.log('ANSWER_STR:'+ANSWER_STR)
				console.log(this.form.ANSWER[this.sindex])
				console.log('ANSWER.includes(\'A\'):'+this.form.ANSWER[this.sindex].includes('A'))
				console.log('ANSWER.includes(\'B\'):'+this.form.ANSWER[this.sindex].includes('B'))
				if(ANSWER_STR) {
					this.isDisabled = true
					this.isShowAnswer = true
				} else {
					this.isDisabled = false
					this.isShowAnswer = false
				}
			},
			questionNext() {
				this.isCheckDisabled = false
				this.sindex = this.sindex + 1
				var ANSWER_STR = ''
				if (this.form.QUESTIONTYPE[this.sindex] == '2') {
					ANSWER_STR = this.trimSpace(this.form.ANSWER[this.sindex]).length
				} else {
					ANSWER_STR = this.form.ANSWER[this.sindex]
				}
				// console.log('ANSWER_STR:'+ANSWER_STR)
				// console.log(this.form.ANSWER[this.sindex])
				// console.log('ANSWER.includes(\'A\'):'+this.form.ANSWER[this.sindex].includes('A'))
				// console.log('ANSWER.includes(\'B\'):'+this.form.ANSWER[this.sindex].includes('B'))
				if(ANSWER_STR) {
					this.isDisabled = true
					this.isShowAnswer = true
				} else {
					this.isDisabled = false
					this.isShowAnswer = false
				}
			},
			assignSubFormData() {
				var ANSWER_STR = ''
				for (let i = 0; i < this.subForm.ANSWER.length; i++) {
					if (this.subForm.QUESTIONTYPE[i] == '2') {
						ANSWER_STR += (this.subForm.ANSWER[i] == '-' ? '-' : this.subForm.ANSWER[i].join('')) + ','
					} else {
						ANSWER_STR += this.subForm.ANSWER[i] + ','
					}
				}
				this.subForm.ANSWER = ANSWER_STR.length > 0 ? ANSWER_STR.slice(0, ANSWER_STR.length - 1) : ''
				this.subForm.QUESTION_ID = this.subForm.QUESTION_ID.join(',')
				this.subForm.QUESTIONTYPE = this.subForm.QUESTIONTYPE.join(',')
				this.subForm.COURSEWAREID = this.subForm.COURSEWAREID.join(',')
				this.subForm.COURSEWARETYPE = this.subForm.COURSEWARETYPE.join(',')
				this.subForm.ANSWERRIGHT = this.subForm.ANSWERRIGHT.join(',')
				this.subForm.QUESTIONLIST = ''
				this.subForm.CORPINFO_ID = corpinfoId
				this.subForm.USER_ID = loginUser.USER_ID
				this.subForm.USERNAME=loginUser.USERNAME
			},
			submitForm() {
				uni.showLoading({
					title: '处理中'
				})
				uni.request({
					url: basePath+'/app/coursestudy/submit',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
            ...this.subForm,
            CORPINFO_ID:loginUser.CORPINFO_ID,
            USER_ID:loginUser.USER_ID,
          },
					success: (res) => {
						uni.hideLoading();
						uni.redirectTo({
							url: this.backUrl,
						})
					}
				})
			},
			trimSpace(array) {
				for (var i = 0; i < array.length; i++) {
					if (array[i] == '' || array[i] == null || typeof (array[i]) == 'undefined') {
						array.splice(i, 1)
						i = i - 1
					}
				}
				return array
			},
			BackPage() {
				if (this.isAnswered) {
					this.subForm = Object.assign({}, this.form)
					// console.info('this.subForm转换')
					// console.info(this.form)
					for (let i = 0; i < this.subForm.ANSWER.length; i++) {
						if (this.subForm.QUESTIONTYPE[i] == '2') {
							this.subForm.ANSWER[i] = this.trimSpace(this.subForm.ANSWER[i])
							this.subForm.ANSWER[i] = this.subForm.ANSWER[i].length > 0 ? this.subForm.ANSWER[i].sort() : []
							if (this.subForm.ANSWER[i].length == 0) {
								this.subForm.ANSWER[i] = '-'
							}
						} else {
							if (this.subForm.ANSWER[i].length == 0) {
								this.subForm.ANSWER[i] = '-'
							}
						}
					}
					this.assignSubFormData()
					this.submitForm()
				} else {
					uni.redirectTo({
						url: this.backUrl,
					})
				}
			}
		}
	}
</script>

<style>
	.ext-bg {
		background-image: linear-gradient(180deg, #0006ff, #0078ff);
		height: 100vh;
		width: 750upx;
		background-size: 100% 100%;
		position: relative;
	}

	.extin-bg {
		background: url(../../../static/ksbgx.png) no-repeat;
		height: 368upx;
		background-size: 100% 100%;
	}

	.ext-box {
		position: absolute;
		top: 440upx;
		width: 100%;
		padding: 0 50upx;
	}

	.ext-topic {
		border-radius: 10upx;
		background-color: #fff;
		width: 100%;
	}

	.ext-topic .ext-title {
		padding: 20upx 0;
		text-align: center;
		font-weight: bold;
		border-bottom: 1upx dashed #ccc;
	}

	.ext-topic .ext-content {
		padding: 30upx 30upx;
	}

	.ext-topic .ext-content .ext-text {
		margin-bottom: 20upx;
		line-height: 1.6;
	}

	.ext-group {
		display: flex;
		flex-direction: column;
	}

	.ext-group .answer-lable {
		display: flex;
		align-items: center;
		margin-bottom: 20upx;
	}

	.ext-group .answer-lable .title {
		margin-left: 14upx;
	}

	.ext-group .answer-lable:last-child {
		margin-bottom: 0;
	}

	.ext-answer {
		border-radius: 10upx;
		background-color: #fff;
		width: 100%;
		margin-top: 20upx;
	}

	.ext-answer .title {
		padding: 20upx 0;
		text-align: center;
		font-weight: bold;
		border-bottom: 1upx dashed #ccc;
		color: #008000;
	}

	.ext-answer .content {
		padding: 30upx 30upx;
	}
	.ext-btns{
		display: flex;
		align-items: center;
		padding: 50upx 30upx;
	}
	.ext-btns button{
		margin-left: 20upx;
	}
	.ext-btns button:first-child{
		margin-left: 0;
	}
	.ext-between{
		justify-content: space-between;
	}
	.ext-center{
		justify-content: center;
	}
</style>