<template>
	<!-- 听力题 -->
	<view class="listen">
		<view class="item" style="padding: 0 20px">
			<van-nav-bar fixed>
				<template #left>
					<van-icon name="cross" size="40rpx" @click="goBack()" />
				</template>
				<template #title>
					<text class="Exam_Current">{{current+1}}</text><text class="Exam_Count">/{{Count}}</text>
				</template>
			</van-nav-bar>
			<swiper class="swiper-box" :style="{height: `calc(100vh - 180rpx)`}" :current="current" @change="onchange">
				<swiper-item v-for="(item1, index1) in dataList" :key="index1">
					<view class="My_listen" @click="play(item1.Src)">
						<i class="icon_audio_default" v-if="!isPlay"></i>
						<i class="icon_audio_playing" v-else></i>
					</view>
					<view class="item1" :style="{ height: `calc(100vh - 480rpx)` }">
						<template v-if="item1.StudentAnswer.length<item1.QuestionContentObj.length">
							<view class="questionView">
								<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
									<view class="flex questionTitle">
										<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view>
										<view v-html="item2.SubTitle"></view>
									</view>
									<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
										<!-- 单选 、判断-->
										<view class="flex flex_start_center item3"
											v-if="item2.QuestionKey === 'single'">
											<view class="chooseNum"
												:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
												@click="singerChange(item1, index2, item3)">{{ item3.Name }}
											</view>
											<view class="chooseName"
												:class="{ 'myAnswer': item1.StudentAnswer[index2]==item3.Name }"
												@click="singerChange(item1, index2, item3)" v-html="item3.Content">
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<template v-else>
							<view class="questionView">
								<view v-for="(item2, index2) in item1.QuestionContentObj" :key="index2" class="item2">
									<view class="flex questionTitle">
										<view>{{ index2 + 1 }}、({{item2.QuestionName.slice(0, 2)}})</view>
										<view v-html="item2.SubTitle"></view>
									</view>
									<view v-for="(item3, index3) in item2.SubAnwser" :key="index3">
										<!-- 单选 、判断-->
										<view class="flex flex_start_center item3"
											v-if="item2.QuestionKey === 'single'">
											<view class="chooseNum"
												:class="{ 'isRightAnswer': item3.IsAnswer,'isNotRightAnswer':getErrorAnswer(item1,index2,item3.Name)}">
												{{ item3.Name }}
											</view>
											<view class="chooseName"
												:class="{ 'isRightText': item3.IsAnswer,'isNotAnswer':getErrorAnswer(item1,index2,item3.Name)}"
												v-html="item3.Content"></view>
										</view>
									</view>
									<view class="AnswerContent">
										<view>
											<text style="color: #8c8a94">正确答案：</text>
											<text class="isTrueAnswer">{{item1.QuestionAnswerList[index2]}}</text>，
											<text>
												您的答案：
												<template v-if="item1.StudentAnswer.length>0">
													<text
														v-if="item1.StudentAnswer[index2] == item1.QuestionAnswerList[index2]"
														class="isTrueAnswer">
														{{ item1.StudentAnswer[index2] }}，回答正确
													</text>
													<text v-else class="isNotAnswer">
														{{ item1.StudentAnswer[index2] }}，回答错误
													</text>
												</template>
												<template v-else>
													<text class="isNotAnswer">未回答</text>
												</template>
											</text>
										</view>
									</view>
								</view>
								<view style="word-wrap: break-word; margin-bottom:30rpx;display: flex;"
									class="AnswerContent" v-if="item1.AnswerParse">
									<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
									<view style="color: #000" v-html="item1.AnswerParse"></view>
								</view>
							</view>
						</template>
					</view>
					<view class="AnswerBtn clear" style="display:none">
						<view class="AnswerBtnFirst" @click="getBeforeExam()" v-if="current!=0">上一题</view>
						<view class="AnswerBtnSecond" :class="{'isCanNext':item1.StudentAnswer.length==0}"
							v-if="current!=dataList.length" @click="getNextExam(item1)">下一题</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		onUnmounted,
	} from "vue";
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	const bgAudioManager = uni.getBackgroundAudioManager();
	import {
		SetStudentPractice
	} from "../../api/exam";

	export default {
		props: {
			paperData: Array,
			Count: Number,
			Times: Number,
			StartIndex: Number
		},
		setup(props, context) {
			let {
				refs
			} = getCurrentInstance();
			console.log(163, refs);
			let data = reactive({
				dataList: props.paperData,
				current: 0, //默认从第几个开始-用于从快捷菜单点入
				statusBarHeight: 0,
				audioAction: {
					method: "pause"
				},
				isIOS: false,
				isPlay: false
			});
			let UserInfo = uni.getStorageSync('userInfo');
			let sys = uni.getSystemInfoSync().system;
			watch(() => [...props.paperData], (val) => {
				data.dataList = [...data.dataList, ...val];
			})
			// watch(()=>props.StartIndex,(val)=>{
			// 	if(val>-1){
			// 		data.current=val;
			// 	}
			// })			
		    watch(()=>data.current, (newVal, oldValue) => {
			    innerAudioContext.stop();
				data.isPlay=false;
			},{deep:true});
			let methods = {
				//阻止手动滑动
				stopTouchMove() {
					return true;
				},
				jumpPage() {
					uni.navigateTo({
						url: "/pages/exam/examPaper",
					});
				},
				goBack() {
					uni.navigateBack();
				},
				//----------------------------------------选题----------------------------------
				// 单选
				singerChange(item1, index, item3) {
					item1.StudentAnswer[index] = item3.Name;
					if (item1.StudentAnswer.length == item1.QuestionAnswerList.length) {
						this.getNextExam();
					}
				},
				getErrorAnswer(item1, index, name) {
					if (item1.StudentAnswer[index] == name) {
						return true
					} else {
						return false
					}
				},

				onchange(e) {
					data.current = e.detail.current;
					if (data.current + 1 == data.dataList.length) {
						this.$emit('getAfter');
					}
				},
				play(Src) {
					if (data.isPlay) {
						innerAudioContext.pause();
						data.isPlay = false;
					} else {
						innerAudioContext.src = Src;
						innerAudioContext.play()
						data.isPlay = true;
						innerAudioContext.onEnded((e) => {
							data.isPlay = false;
						})
					}
				},
				//点击上一题
				getBeforeExam() {
					data.current = data.current - 1;
				},
				//点击下一题
				getNextExam(item) {
					let msg = {
						Id: 0,
						StudentId: UserInfo.AccountId,
						Category: data.dataList[data.current].Category,
						QuestionId: data.dataList[data.current].QuestionId,
						Title: data.dataList[data.current].Title,
						QuestionContent: data.dataList[data.current].QuestionContentObj,
						QuestionTypeId: data.dataList[data.current].QuestionTypeId,
						QuestionTypeKey: data.dataList[data.current].QuestionTypeKey,
						StudentAnswer: data.dataList[data.current].StudentAnswer,
						AnswerParse: data.dataList[data.current].AnswerParse,
						LevelType: data.dataList[data.current].LevelType,
						Answer: data.dataList[data.current].QuestionAnswerList.toString(),
						IsAnswer: 0,
						IsWrong: 0,
						Times: props.Times
					}
					if (data.dataList[data.current].StudentAnswer.length > 0) {
						msg.IsAnswer = 1;
					} else {
						msg.IsAnswer = 0;
					}
					if (data.dataList[data.current].StudentAnswer.length == data.dataList[data.current]
						.QuestionAnswerList.length) {
						if (data.dataList[data.current].StudentAnswer.toString() == data.dataList[data.current]
							.QuestionAnswerList.toString()) {
							msg.IsWrong = 0
						} else {
							msg.IsWrong = 1
						}
					}
					let res = SetStudentPractice(msg).then(res => {
						if (res) {
							if (res.Code == 1) {

							}
						}
					});
					if(msg.IsWrong == 0){
						data.current = data.current + 1;
						innerAudioContext.stop();
						data.isPlay = false;
					}
				},
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			});
			onUnmounted(() => {
				innerAudioContext.stop();
				data.isPlay = true;
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
	};
</script>
<style scoped>
	.AnswerBtn {
		margin-top: 38rpx;
		/* position: absolute; */
	}

	.clear {
		clear: both;
	}

	.AnswerBtnFirst {
		width: 250rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		border: 1px solid #00acf9;
		color: #00acf9;
		float: left;
	}

	.AnswerBtnSecond {
		width: 250rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
		background-color: #00acf9;
		color: #fff;
		float: right;
	}

	.name {
		height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.isRightAnswer {
		background-color: green !important;
		color: #fff !important;
	}

	.isRightText {
		color: green !important;
	}

	.isTrueAnswer {
		color: green !important;
	}

	.isNotRightAnswer {
		background-color: red;
		color: #fff !important;
	}

	.isNotAnswer {
		color: red;
	}

	.AnswerContent {
		font-size: 30rpx;
		padding: 25rpx;
		background-color: #f4f4f4;
		border-radius: 5px;
	}

	.swiper-box {
		box-sizing: border-box;
		position: relative;
	}

	.num {
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #111111;
	}

	.item {
		position: relative;
	}

	.item1 {
		align-items: center;
		overflow-y: auto;
		margin-top: 30rpx;
	}

	.questionView {
		overflow-y: auto;
		z-index: 999;
	}

	.audioBox {
		width: 120rpx;
		height: 30rpx;
		background: #b4ddfe;
		border: 1px solid #35b4fb;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00acf9;
	}

	.item2 {
		box-sizing: border-box;
		margin: 30rpx 0;
		/* padding: 0 30rpx; */
	}

	.item3 {
		padding-left: 25rpx;
		margin: 20rpx 0;
	}

	.myAnswer {
		background-color: #00acf9 !important;
		color: #ffffff !important;
	}

	.chooseNum {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 50%;
		border: 1px solid #e2e2e2;
		margin-right: 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.chooseName {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #111111;
	}

	.chooseName2 {
		flex-grow: 1;
		border-bottom: 1px solid #111;
	}

	.questionTitle {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}

	.listen .van-count-down {
		font-size: 22rpx !important;
		color: #00acf9 !important;
	}

	.Exam_Current {
		font-size: 35rpx;
		color: red;
	}

	.Exam_Count {
		color: gray;
		font-size: 26rpx;
	}

	.Exam_Score {
		color: #999999;
		font-size: 28rpx;
	}

	.isCanNext {
		background-color: gray !important;
	}

	.icon_audio_default {
		background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
		width: 18px;
		height: 25px;
		vertical-align: middle;
		display: inline-block;
		-webkit-background-size: 54px 25px;
		background-size: 54px 25px;
		background-position: -36px center;
	}

	.icon_audio_playing {
		background: transparent url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/iconloop.png') no-repeat 0 0;
		width: 18px;
		height: 25px;
		vertical-align: middle;
		display: inline-block;
		-webkit-background-size: 54px 25px;
		background-size: 54px 25px;
		-webkit-animation: audio_playing 1s infinite;
		background-position: 0px center;
	}

	@-webkit-keyframes audio_playing {
		30% {
			background-position: 0px center;
		}

		31% {
			background-position: -18px center;
		}

		61% {
			background-position: -18px center;
		}

		61.5% {
			background-position: -36px center;
		}

		100% {
			background-position: -36px center;
		}
	}

	.My_listen {
		width: 150rpx;
		height: 150rpx;
		background-color: #E4E5FB;
		border-radius: 50%;
		margin: 0 auto 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
