<style scoped>
	.choiceQuestion {
		width: 100vw;
		height: 100vh;
		background: #F5F5F5;
		box-sizing: border-box;
	}

	.box {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.dc {
		font-size: 60rpx;
		color: #111111;
		font-weight: bold;
		margin-top: 160rpx;

	}

	.dc2 {
		font-size: 32rpx;
		color: #111111;
		font-weight: 500;
		margin-top: 160rpx;

	}

	.dclx {
		padding: 4px 6px;
		border-radius: 3px;
		background: #E8E9EA;
		font-size: 14px;
		color: #666666;
		margin-top: 18px;
	}

	.choicelist {
		margin-top: 100px;
		width: 100%;
	}

	.choice-item {
		min-height: 85rpx;
		border-radius: 54rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #111111;
		margin-bottom: 38rpx;
		position: relative;
		overflow-x: scroll;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		font-weight: 500;
	}

	.correct {
		background-color: #4C50E7;
		color: #FFFFFF;
	}

	.sign {
		position: absolute;
		right: 66rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.error {
		background-color: #F66633;
		color: #FFFFFF;
	}
</style>
<template>
	<view>
		<view class="choiceQuestion" >
			<view class="box" v-if="!isShowExplain">
				<!-- <view class="dc">{{item.Title}}</view> -->
				<view class="dc2"><text style="color:#4756EB;">{{num}}/{{total}}、</text>{{item.Title}}</view>
				<view class="dclx">{{item.WordType}}</view>
				<view class="choicelist">
					<view class="choice-item" :class="{'correct':item.Answer==x.Name&&current==item.Answer,
					 'error':current==x.Name&&current!==item.Answer}" v-for="(x,y) in item.QuestionContent" :key='y'
						@click="choice(x)">
						{{x.Content}}
						<view class="sign" v-if="item.Answer==x.Name&&current==item.Answer">
							<van-icon name="success" color="#5DE3A6" size='40rpx' />
						</view>
						<view class="sign" v-if="current==x.Name&&current!==item.Answer">
							<van-icon name="cross" color="#FFF" size='40rpx' />
						</view>
					</view>
				</view>
			</view>
			<Explain v-if="isShowExplain" :item="item" @todo="todo"></Explain>
		</view>
	</view>

</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide
	} from "vue";
	import Explain from './explain.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	export default {
		components: {
			Explain
		},
		props: {
			num: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				default: 1
			},
			current: {
				type: String,
				default: ''
			},
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		setup(props, {
			attrs,
			slots,
			emit
		}) {
			let data = reactive({
				current: '', //用户选择
				isShowExplain: false,
				
			})
			let methods = {
				choice(x) {
					data.current = x.Name;
					if (data.current !== props.item.Answer) {
						methods.play('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/audio/false.mp3')
						setTimeout(() => {
							data.isShowExplain = true
						}, 800)
					} else {
						methods.play('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/audio/true.mp3')
						setTimeout(() => {
							emit('next',1)
						}, 500)
					}
				},
				todo() {
					emit('next')
					data.isShowExplain = false
				},
				play(url) {
					innerAudioContext.src =url
					innerAudioContext.play()
				}
			}
			onMounted(() => {
			})
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		}
	}
</script>
