<script lang="tsx">
	import { Image, Loading } from "vant";
	import { defineComponent } from "vue";

	export default defineComponent({
		props: {
			currentSubject: Object as any,
			currentSubjectIndex: { require: true, type: Number, default: 0 },
		},
		setup(props) {
			const slots = {
				loading: () => <Loading type="spinner" size="20" />,
				error: () => <span>加载失败</span>,
			};
			const questionTypeMap = ['判断题','单选题','多选题']

			return () => {
				return (
					<div class="problem">
						<span class="type">{questionTypeMap[props.currentSubject.questionType-1]}</span>
						<span class="text">
							{props.currentSubjectIndex + 1}、{props.currentSubject.explain||props.currentSubject.issue}
						</span>
						{props.currentSubject.image && <Image src={props.currentSubject.image} class="img" v-slots={slots} />}
					</div>
				);
			};
		},
	});
</script>

<style lang="scss" scoped>
	.problem {
		.type {
			width: 47px;
			height: 24px;
			background: #498ef5;
			border-radius: 10px 10px 0px 10px;
			font-size: 11px;
			padding: 2px 7px;
			margin-right: 5px;
			color: #fff;
			font-size: 14px;
			

		}
		.text {
			font-family: PingFang SC;
			font-weight: 400;
			color: #0a1a33;
			letter-spacing: 0.3px;
			font-size: 18px;
		}
		.img {
			width: 100%;
			margin-top: 10px;
		}
	}
</style>
