<template>
	<view>
		<!-- 单词区 -->
		<selectWordsVue :active-words="activeWords" :activeWord="activeWord"></selectWordsVue>
		<!-- 显示区 -->
		<selectTypesVue activeSelect="2"></selectTypesVue>
		<!-- 拼读区 -->
		<view>
			<view v-for="item in data.list">
				<view></view>
			</view>
		</view>
		<!-- 图片区 -->
		<view></view>
		<!-- 选择区 -->
		<view>
			<view>{{data.qa}}</view>
			<view>{{data.qb}}</view>
			<view>{{data.qc}}</view>
			<view>{{data.qd}}</view>
		</view>
	</view>
</template>

<script setup>
	import selectWordsVue from './selectWords.vue';
	import selectTypesVue from './selectTypes.vue';
	import {
		reactive,
		computed
	} from 'vue';
	const props = defineProps({
		activeWord: { // 单词数据
			type: Object,
		},
		activeWords: {
			type: Array
		},
	})
	const data = reactive({
		list: [],
		qa: null,
		qb: null,
		qc: null,
		qd: null,
		answer: null, // 已选项
		result: false, // 正确性
	})

	function handleSelect(d1) {
		data.answer = d1;
	}

	function checkIsRight() {
		if (data.answer == props.activeWord.value) {
			// 正确
			data.result = true;
			noticeBackDb()
		} else {
			data.result = false;
		}
	}

	function noticeBackDb() {

	}
</script>

<style>
</style>