<template>
	<view class="ezy-panduan-box">
		<!-- 标题区域 -->
		<view class="panduan-title"></view>
		<!-- 题干区域 -->
		<rich-text :nodes="question.name" class="ezy-shiti-question"></rich-text>
		<!-- 选项区域 -->
		<radio-group @change="radioChange" class="danxuan-option-box">
			<label class="option-question" :class="formatClass('1')">
				<radio value="1" :disabled="showError" :checked="question.reply == '1'"/>
				<view>正确</view>
			</label>
			<label class="option-question" :class="formatClass('0')"> 
				<radio value="0" :disabled="showError" :checked="question.reply == '0'"/>
				<view>错误</view>
			</label>
		</radio-group>
	</view>
</template>

<script setup>
	const props = defineProps({
		question: {
			type: Object,
		},
		showError: {
			type: Boolean,
			default: false
		}
	})

	function radioChange(e) {
		if (props.showError) {
			return;
		}
		props.question.reply = e.detail.value;
	}
	
	function formatClass(index) {
		if (props.showError) {
			return {
				active_right: props.question.result == index,
				showError: props.question.reply == index && props.question.result != index
			}
		} else {
			return {
				active: props.question.reply == index
			}
		}
	}
</script>
