<template>
	<!-- 听力题 -->
	<view class="listen">
		<view class="item">
			<view class="My_listen" @click="play(dataObj.Title)">
				<i class="icon_audio_default" v-if="!isPlay"></i>
				<i class="icon_audio_playing" v-else></i>
			</view>
			<text class="Exam_Score">（{{dataObj.Score}}分）</text>
			<view class="item1" :style="{ height: `calc(100vh - 414rpx)` }">
				<view class="questionView" v-if="!isShowJx">
					<view v-for="(item, index) in dataObj.QuestionContentObj" :key="index" class="item2">
						<view class="flex questionTitle">
							<view>{{ index + 1 }}、({{item.QuestionName.slice(0, 2)}})</view>
							<view v-html="item.SubTitle"></view>
						</view>
						<view v-for="(item2, index2) in item.SubAnwser" :key="index2">
							<!-- 单选 、判断-->
							<view class="flex flex_start_center item3" v-if="item.QuestionKey === 'single'">
								<view class="chooseNum"
									:class="{ 'myAnswer': dataObj.StudentAnswer[index]==item2.Name }"
									@click="singerChange(dataObj, index, item2)">{{ item2.Name }}
								</view>
								<view class="chooseName"
									:class="{ 'myAnswer': item1.StudentAnswer[index2]==item2.Name }"
									@click="singerChange(dataObj, index, item2)" v-html="item2.Content">
								</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="isShowJx">
					<view class="questionView">
						<view v-for="(item, index) in dataObj.QuestionContentObj" :key="index" class="item2">
							<view class="flex questionTitle">
								<view>{{ index + 1 }}、({{item.QuestionName.slice(0, 2)}})</view>
								<view v-html="item.SubTitle"></view>
							</view>
							<view v-for="(item2, index2) in item.SubAnwser" :key="index2">
								<!-- 单选 、判断-->
								<view class="flex flex_start_center item3" v-if="item.QuestionKey === 'single'">
									<view class="chooseNum"
										:class="{ 'isRightAnswer': item2.Name==dataObj.QuestionAnswerList[index],'isNotRightAnswer':getErrorAnswer(dataObj,index,item2.Name)}">
										{{ item2.Name }}
									</view>
									<view class="chooseName"
										:class="{ 'isRightText': item2.Name==dataObj.QuestionAnswerList[index],'isNotAnswer':getErrorAnswer(dataObj,index,item2.Name)}"
										v-html="item2.Content"></view>
								</view>
							</view>
							<view class="AnswerContent">
								<view>
									<text style="color: #8c8a94">正确答案：</text>
									<text class="isTrueAnswer">{{dataObj.QuestionAnswerList[index]}}</text>，
									<text>
										您的答案：
										<template v-if="dataObj.StudentAnswer.length>0">
											<text v-if="dataObj.StudentAnswer[index] == dataObj.QuestionAnswerList[index]"
												class="isTrueAnswer">
												{{ dataObj.StudentAnswer[index] }}，回答正确
											</text>
											<text v-else class="isNotAnswer">
												{{ dataObj.StudentAnswer[index] }}，回答错误
											</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="dataObj.AnswerParse">
							<text style="color: #8c8a94;flex-shrink: 0;">解析：</text>
							<view style="color: #000" v-html="dataObj.AnswerParse"></view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		onUnmounted,
	} from "vue";	
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	export default {
		props: {
			paperData: Object,
			isShowJx: Boolean,
			CurIndex: Number
		},
		setup(props, context) {
			let {
				refs,
				proxy
			} = getCurrentInstance();
			let data = reactive({
				dataObj: props.paperData,
				statusBarHeight: 0,
				audioAction: {
					method: "pause"
				},
				isPlay:false
			});
			 watch(()=>props.CurIndex, (newVal, oldValue) => {
			    innerAudioContext.stop();
				data.isPlay=false;
			},{deep:true});
				let methods = {
				// 单选
				singerChange(item1, index, item3) {
					item1.StudentAnswer[index] = item3.Name;
					context.emit("answerChange", data.dataObj);
				},
				getErrorAnswer(item1, index, name) {
					if (item1.StudentAnswer[index] == name) {
						return true
					} else {
						return false
					}
				},
				play(Src) {
					let arr = Src.split(" "); //按空格分段
					var MySrc='';
					arr.map((e) => {
						if (e.indexOf("src") != -1) {
							let Before = e.split("url=")[1]
							if (Before) {
								MySrc = decodeURIComponent(Before.slice(0, -1));
							}
						}
					});
					if(data.isPlay){
						innerAudioContext.pause();
						data.isPlay=false;
					}else{
						innerAudioContext.src = MySrc;
						innerAudioContext.play()
						data.isPlay = true;
						innerAudioContext.onEnded((e)=>{
							data.isPlay = false;
						})
					}
				},
			};
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;			
			});
			onUnmounted(() => {
				innerAudioContext.stop();
				data.isPlay = false;
			});
			
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		}
	};
</script>
<style scoped>
	.AnswerBtn {
		margin-top: 40rpx;
	}

	.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;
		color:#fff!important;
	}
	.isRightText{
		color:green!important;
	}
	.isNotRightAnswer{
		background-color: red!important;
		color:#fff!important;
	}
	.isNotAnswer {
		color: red !important;
	}

	.isTrueAnswer {
		color: green !important;
	}


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

	.swiper-box {
		height: calc(100vh - 270rpx);
		box-sizing: border-box;
	}

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

	.item {
		position: relative;
		margin-top: 225rpx;
	}

	.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: 170rpx;
		height: 170rpx;
		background-color: #E4E5FB;
		border-radius: 50%;
		margin: 0 auto 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
