<script lang="tsx">
	import { defineComponent } from "vue";
	export default defineComponent({
		props: {
			currentSubject: Object as any,
		},
		setup(props) {
			// console.log(props.currentSubject,'currentSubject')
			return () => {
				return (
					<>
						<div>
							{props.currentSubject.opts.map((item: any, index: number) => (
								<div class="answer-box" key={Number(index)}>
									<div class="choose-icon">{String.fromCharCode(65 + Number(index))}</div>
									<span class={{ "answer-text": true, true: props.currentSubject.questionType==3?props.currentSubject.answer.includes(item):props.currentSubject.answer==item }}>{item}</span>
								</div>
							))}
						</div>
						<div class="checkbox-answer">答案: {props.currentSubject.answer.toString()}</div>
					</>
				);
			};
		},
	});
</script>

<style lang="scss">
	.choose-icon {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 17px;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
		margin-left: 5px;
		margin-top: 1px;
	}
	.checkbox-answer {
		padding: 8px 10px;
		background-color: #f2f3f5;
		margin-top: 25px;
	}
	.answer-box {
		display: flex;
		margin-top: 25px;
		align-items: center;
		.iconTrue {
			background-color: #01c18d;
		}
		.answer-text {
			margin-left: 10px;
		}
		.true {
			color: #01c18d;
		}
		.false {
			color: #ff4d53;
		}
	}
</style>
