<style scoped>
	.fillInTheBlanks{
		width: 100vw;
		height: 100vh;
		background: #F5F5F5;
		box-sizing: border-box;
	}
	.box{
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.dc{
		font-size: 60rpx;
		color: #111111;
		font-weight: bold;
		margin-top: 160rpx;
	}
	
	.dclx{
		padding:4rpx 6rpx ;
		border-radius: 3rpx;
		background: #E8E9EA;
		font-size: 28rpx;
		color: #666666;
		margin-top: 36rpx;
		word-wrap: break-word;
	}
	.dclx2{
		font-size: 32rpx;
		font-weight: 500;
		color: #111111;
		margin-top: 60rpx;
	}
	.btn{
		width: 100%;
		height: 106rpx;
		border-radius: 54rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #4C50E7;
		margin-top: 160rpx;
		background: #E4E5FB;
		position: relative;
	}
	.correct{
		background: #4C50E7;
		color: #FFFFFF;
	}
	.sign{
		position: absolute;
		right: 66rpx;
		top: 36rpx;
	}
	.error{
		background: #F66633;
		color: #FFFFFF;
	}
	.row{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
</style>
<template>
	<view class="fillInTheBlanks" >
		<view class="box" v-if="!isShowExplain">
			<view class="dc " >
				<view style="font-size:26rpx;width:100%；font-weight: 600;"><text style="color:#4756EB;">{{num}}/{{total}}、</text>{{item.Title}}</view>
				<view style="display: flex;justify-content: center;">
					<mypone :maxlength="getNum(item)" v-model="test"  @input="input"></mypone>
				</view>
			</view>
			<view class="dclx">{{item.WordType}}</view>
			<view class="dclx2">{{item.ChineseMean}}</view>
			<view class="btn" v-if="type==0" @click="getjieguo">确定</view>
			<view class="btn correct" v-if="type==1">正确
				<view class="sign" >
					<van-icon name="success" color="#5DE3A6" size='40rpx'/>
				</view>
			</view>
			<view class="btn  error" v-if="type==2">错误
				<view class="sign" >
					<van-icon name="cross"  color="#FFF" size='40rpx' />
				</view>
			</view>
		</view>
		<Explain v-if="isShowExplain" :item="item" @todo="todo"></Explain>	
	</view>
</template>

<script>
	import {ref,reactive,toRefs,toRef,getCurrentInstance,watch,computed,onMounted,provide} from "vue";
	import mypone from './myp-one.vue'
	import Explain from './explain.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	export default {
		components: {
			mypone,
			Explain
		},
		props:{
			item:{
				type:Object,
				default:()=>{
					return{}
				}
			},
			num: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				default: 1
			},
		},
		setup(props,{attrs,slots,emit}) {
			let data = reactive({
				test:'',
				type:0,//1是正确 2是错误
				isShowExplain:false
			})
			let methods = {
				getNum(item){
					const answer=item.Answer
					const index =answer.indexOf("（")||answer.indexOf("(")
					if(index>-1){
						return index
					}else{
						return answer.length
					}
				},
				getjieguo(){
					if(data.test==''){
						uni.showToast({
							title:'请输入答案',
							icon:'none'
						})
						return
					}
					if(data.test==props.item.Answer||props.item.Answer.indexOf(data.test)>-1){
						data.type=1
						methods.play('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/audio/true.mp3')
						setTimeout(()=>{
							emit('next',1)
						},500)
					}else{
						data.type=2
						methods.play('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/audio/false.mp3')
						setTimeout(()=>{
							data.isShowExplain=true
						},500)
					}
				},
				input(){
					data.type=0
				},
				todo(){
					emit('next')
					data.isShowExplain = false
				},
				play(url) {
					innerAudioContext.src =url
					innerAudioContext.play()
				}
			}
			onMounted(()=>{
			})
			let that = methods;
			return {
			  ...toRefs(data),
			  ...methods,
			};
		}
	}
</script>

