<template>
	<view class="backView">
		<Settle :index="3">
			<view class="bottom-padding" v-if="currentItem">
				<view class="title-view">
					<view :class="['title-text', {'radio': currentItem.question ? currentItem.question.answerType == 1 : true}]">
						<text>{{ titleText[Math.max(0, currentItem.question ? currentItem.question.answerType - 1 : 0)] }}</text>
					</view>
					<view class="title-right-view">
						<image class="timeIcon" :src="time1Image" mode=""></image>
						<text class="timeText">倒计时：</text><text class="time-count-down">{{currentTime}}</text>
					</view>
				</view>
				<view class="topicView">
					<text class="topicText">{{currentItem.question.content}}</text>
				</view>

				<view :class="['itemView',item.isSelect ? 'active':'']" v-for="(item,ikey) in currentItem.answerList" :key="ikey" @click="itemClick(item,ikey)">
						<view :class="item.isSelect ? 'itemIndexView' : 'itemIndexView grayBorder' ">
							<text
								:class="item.isSelect ? 'itemIndexText whiteColor selectBackColor' : 'itemIndexText gray-color' ">
								{{alphaArr[ikey]}}
							</text>
						</view>
						<view
							:class="item.isSelect ? 'itemText selectedColor' : 'itemText defaultColor' ">{{contentFilter(item.content)}}</view>
				</view>

			</view>

			<template v-slot:bottom>
				<view class="answerBottomView">
					<view class="bottom-left-view">
						<image class="bottom-icon" :src="timuImage" mode=""></image>
						<text class="numberText">{{progress}}</text>
					</view>
					<view class="bottomRightView">
						<view :class="isSelect ? 'nextBtn selectBackColor' : 'nextBtn defaultBackColor' "
							@click="$u.throttle(handleClick, 500)">
							<text class="bottomTitle">{{bottomTitle}}</text>
						</view>
					</view>

				</view>
			</template>
		</Settle>
		<view class="mask" v-show="isComplete">
			<view class="box">
				<image class="icon" :src="chenggongImage"></image>
				<view class="txt">您已成功完成考试</view>
				<button class="btn" @click="$u.debounce(goSignContract, 500)">
					去提交
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	const globalUrl = process.uniEnv || {}
	const systemApiUrl = globalUrl.systemUrl.apiUrl
	const ucenterApiUrl = globalUrl.ucenterUrl.apiUrl
	export default {
		components: {
			Settle
		},
		data() {
			return {
				examId: 2,
				userExamId: 0,
				userAnswerIds: '',
				isStart: true,
				currentNumber: 1,
				currentItem: null,
				isSelect: false,
				currentTime: 100,
				progress: '',
				bottomTitle: '下一题',
				isStop: false,
				clock_url: 'https://qn-static.banshouhui.com/clock_exam.png',
				examScore: 0,
				alphaArr: ['A', 'B', 'C', 'D', 'E'],
				timer: null,
				isComplete: false, // 是否已经考试完成判定
			}
		},
		computed: {
			titleText() {
				return ['单选', '多选', '问答']
			},
			time1Image() {
				return process.uniEnv.qn_base_url + 'time1.png'
			},
			chenggongImage() {
				return process.uniEnv.qn_base_url + 'chenggong.png'
			},
			timuImage() {
				return process.uniEnv.qn_base_url + 'timu-new.png'
			}
		},
		onLoad(e) {
			getApp().trackPage('入驻考试答题页')

			//this.postResult()
			this.getUserExamInfo()

		},
		methods: {
			goSignContract() {
				const url = '/pages/settle/prompt'
				uni.navigateTo({
					url: url + '?pageIndex=' + '3'
				})
			},
			contentFilter(txt) {
				if (!txt) {
					return txt
				}
				let reg = /\w+\.?/;
				const result = txt.replace(reg, '')
				return result
			},
			//开始考试 点击
			startClick: function() {
				this.isStart = true
				//this.getData()
				//this.applyExam()

				this.getUserExamInfo()

			},

			//获取考试信息
			getUserExamInfo: function() {

				uni.showLoading({
					title: '请稍候'
				})

				let that = this
				uni.request({
					url: systemApiUrl +
						'/wxh-worker-rest/rest/exam' +
						'/serviceRule/userExamInfo/' +
						that.vuex_token +
						'?examId=' + this.examId,
					method: 'POST',
					data: {
						//examId:this.examId,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						uni.hideLoading()
						if (!res.data) {
							return
						}
						if (res.data.code == 401 || res.data.code == 403) {
							uni.navigateTo({
								url: '/pages/login/index'
							})
							return
						}
						if (res.data.code == 200) {
							//examStatus 用户考试状态 0考试中 1考试完成 2未参与
							if (res.data.data.examStatus == 2) {
								that.applyExam()
								return
							}
							if (res.data.data.examStatus == 1) {
								console.log('111111111111111111111111111')
								that.isComplete = true
								that.examScore = res.data.data.examScore
								that.postResult()
								return
							}
							if (res.data.data.examStatus == 0) {
								that.userExamId = res.data.data.id
								that.getNext()
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})


						}


					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '获取考试信息失败'
						})
					}
				})

			},

			//申请考试
			applyExam: function() {
				uni.showLoading({
					title: '请稍候'
				})

				let that = this
				uni.request({
					url: systemApiUrl +
						'/wxh-worker-rest/rest/exam' +
						'/serviceRule/' +
						that.vuex_token +
						'?examId=' + this.examId,
					method: 'POST',
					data: {
						//examId:this.examId,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						uni.hideLoading()

						if (res.statusCode == 401) {
							uni.navigateTo({
								url: '/pages/login/index'
							})
							return
						}

						if (res.data.code == 200) {

							if (res.data.data.userExamId) {
								that.userExamId = res.data.data.userExamId
								that.getNext()
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})


						}


					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '申请考试 失败'
						})
					}
				})
			},

			//获取下一题
			getNext: function() {

				var questionId = ''
				if (this.currentItem &&
					this.currentItem.question &&
					this.currentItem.question.id) {
					questionId = this.currentItem.question.id
				}

				uni.showLoading({
					title: '请稍候'
				})

				let that = this
				uni.request({
					url: systemApiUrl +
						'/wxh-worker-rest/rest/exam' +
						'/serviceRule/next/' +
						that.vuex_token +
						'?userExamId=' + this.userExamId +
						'&questionId=' + questionId +
						'&userAnswerIds=' + (this.userAnswerIds || '9999'), // 9999超时自动下一题
					method: 'POST',
					data: {
						// userExamId:this.userExamId,
						// questionId:this.currentItem.question.id,
						// userAnswerIds:this.userAnswerIds,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						uni.hideLoading()
						if (res.statusCode == 401) {
							uni.navigateTo({
								url: '/pages/login/index'
							})
							return
						}

						if (res.data.code == 200) {
							that.currentItem = res.data.data
							that.progress = res.data.data.progress

							if (res.data.data.answerList) {
								that.handleData()

								that.currentTime = 100

								that.isSelect = false
								clearTimeout(this.timer)
								that.startCounting()
							} else {
								that.isSelect = true
								that.getUserExamInfo()
								clearTimeout(this.timer)
								this.isComplete = true
								// that.bottomTitle = '完成考试，现在签约'
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.message
							})


						}


					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '获取下一题 失败'
						})

					}
				})

			},



			handleData: function() {
				this.currentItem.answerList.forEach((item, index) => {
					item.isSelect = false
					this.$set(this.currentItem.answerList, index, item)
				})
			},

			startCounting: function() {
				if (this.isStop) {
					return
				}

				this.currentTime = this.currentTime - 1

				if (this.currentTime > 0) {
					this.timer = setTimeout(this.startCounting, 1000);
				} else {
					clearTimeout(this.timer)
					this.currentTime = 100
					this.nextClick()
				}

			},



			itemClick: function(currentItem, ikey) {
				this.isSelect = true
				//answerType 题目类型，1单选，2多选，3简答，

				for (let i = 0; i < this.currentItem.answerList.length; i++) {
					var item = this.currentItem.answerList[i]

					if (this.currentItem.question.answerType == 2) { //多选
						if (ikey == i) {
							item.isSelect = !item.isSelect

						}
					} else { //单选/简答
						if (ikey == i) {
							item.isSelect = !item.isSelect

						} else {
							item.isSelect = false

						}
					}

					this.$set(this.currentItem.answerList[i], isSelect, item.isSelect)

				}

				var isSelect = false
				this.currentItem.answerList.forEach(item => {
					if (item.isSelect) {
						isSelect = true
					}
				})

				//有选答案
				this.isSelect = isSelect
			},
			// 点击下一步
			handleClick() {
				// 判断有没有选
				if (!this.isSelect) {
					return
				}
				this.nextClick()
			},

			//下一题
			nextClick: function() {
				clearTimeout(this.timer)

				this.currentNumber = this.currentNumber + 1
				//this.getData()
				this.handleAnswer()
				//this.getNext()
			},

			//上传考试结果
			postResult: function() {
				uni.showLoading({
					title: '请稍候'
				})

				let that = this
				uni.request({
					url: ucenterApiUrl + '/v1/settled/update-settled-exam-score' +
						'?access-token=' + that.vuex_token,
					method: 'POST',
					data: {
						score: this.examScore || 0,
					},
					success: (res) => {
						uni.hideLoading()

						if (res.statusCode == 401) {
							uni.navigateTo({
								url: '/pages/login/index'
							})
							return
						}

						if (res.statusCode == 200) {

							// uni.navigateTo({
							// 	url: '/pages/settle/prompt'
							// })

						} else {
							uni.showToast({
								icon: 'none',
								title: "上传考试结果失败"
							})


						}


					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '上传考试结果失败'
						})

					}
				})
			},

			//所选答案
			handleAnswer: function() {

				/*
				userAnswerIds 
				本题回答。
				多选题时id按从小到大排序，并英文逗号,分隔；
				简答题时直接存问题答案。
				如果是第一次答题，不需要传。
				*/

				// var idList = []
				// idList.push(item.id)

				//每次清空
				this.userAnswerIds = ''

				this.currentItem.answerList.forEach(item => {


					if (item.isSelect) {

						//this.userAnswerIds = item.id + ',' + this.userAnswerIds

						//answerType 题目类型，1单选，2多选，3简答，
						if (this.currentItem.question.answerType == 2) { //多选


							///*
							if (this.userAnswerIds.length == 0) {
								this.userAnswerIds = item.id
							} else { // if(this.userAnswerIds.length == 1)
								this.userAnswerIds = item.id + ',' + this.userAnswerIds
							}
							//*/


						} else { //单选
							this.userAnswerIds = item.id
						}



					}


				})

				this.getNext()

			},







		}
	}
</script>

<style lang="scss">
	.backView {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow-y:auto;
		overflow-y:auto;
	}

	.noticeView {
		margin-top: 100rpx;
		width: 100%;
		display: flex;
	}

	.noticeText {
		font-size: 32rpx;
		color: #555555;
		padding-left: 40rpx;
		padding-right: 40rpx;
	}

	.numberView {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.numberText {
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
	}

	.topicView {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.topicText {
		color: #333333;
		font-size: 32rpx;
		line-height: 48rpx;
		font-weight: bold;
	}

	// .itemBackView {
	// 	margin-top: 30rpx;
	// 	width: 100%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	.itemView {
		margin-top: 30rpx;
		background-color: #F4F5F7;
		width: 100%;
		padding: 40rpx 30rpx;
		display: flex;
		align-items: flex-start;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
		font-size: 28rpx;
		&.active {
			background-color: #FFFFFF;
			border: 2rpx solid #2272FF;
		}
	}

	.itemIndexView {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink:0
	}

	.grayBorder {
		border: 2rpx solid #999999;
	}
	
	.gray-color {
		color: #999999;
	}

	.itemIndexText {
		border-radius: 8rpx;
		width: 36rpx;
		height: 36rpx;
		display: block;
		line-height: 36rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.itemText {
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.bottomView {
		background-color: #FFFFFF;
		width: 100%;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
	}

	.bottomBtn {
		background-color: #007AFF;
		width: 60%;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottomTitle {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	// .answerBottomView {
	// 	background-color: #FFFFFF;
	// 	width: 100%;
	// 	height: 200rpx;
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	position: fixed;
	// 	bottom: 0;
	// }

	.title-view {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-text {
			border-radius: 8rpx;
			background-color: #FF930D;
			font-size: 20rpx;
			color: #FFFFFF;
			width: 72rpx;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			&.radio {
				background-color: #2272FF;
			}
		}

		.title-right-view {
			display: flex;
			flex-direction: row;
			align-items: center;

			.timeIcon {
				margin-right: 12rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.timeText {
				font-size: 28rpx;
				color: #333333;
			}

			.time-count-down {
				width: 50rpx;
				text-align: right;
			}
		}
	}

	.bottomRightView {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 30rpx;
	}

	.nextBtn {
		width: 300rpx;
		height: 104rpx;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.defaultColor {
		color: #333333;
	}

	.defaultBackColor {
		background-color: #D1D4D4;
	}

	.selectedColor {
		color: #2272FF;
	}

	.whiteColor {
		color: #FFFFFF;
	}

	.selectBackColor {
		background-color: #2272FF;
	}

	.bottom-padding {
		// margin-bottom: 188rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 40rpx 30rpx 40rpx 30rpx;
	}

	.answerBottomView {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bottom-left-view {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			.bottom-icon {
				width: 44rpx;
				height: 44rpx;
			}

			.numberText {
				color: #666666;
				font-size: 32rpx;
				margin-left: 30rpx;
			}
		}

	}

	.mask {
		position: fixed;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: rgba(0, 0, 0, 0.5);
	}

	.box {
		width: 660rpx;
		height: 696rpx;
		padding: 0 70rpx;
		border-radius: 12rpx;
		background-color: #fff;

		.icon {
			margin: 80rpx auto 0;
			display: block;
			width: 224rpx;
			height: 224rpx;
		}

		.txt {
			margin-top: 20rpx;
			margin-bottom: 98rpx;
			font-weight: bold;
			font-size: 40rpx;
			line-height: 66rpx;
			color: #2272FF;
			text-align: center;
		}

		.btn {
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272ff;
			font-size: 32rpx;
			color: #fff;
		}
	}
</style>
