<template>
	<div>
		<van-cell center>
			<template #title>
				<div style="margin-top: 5px">
					<span class="flex-center">
						<m-icon type="dui" class="icon-size" />
						<span style="margin-left: 5px">{{ trueNum }}</span>
					</span>
					<span class="flex-center" style="margin-left: 21px">
						<m-icon type="cuo" class="icon-size" />
						<span style="margin-left: 5px">{{ falseNum }}</span>
					</span>
				</div>
			</template>
			<!-- 使用 right-icon 插槽来自定义右侧图标 -->
			<template #right-icon>
				<div class="flex-center">
					<m-icon type="zongtishu" class="icon-size" />
					<span style="margin-left: 5px">{{ currentSubjectIndex + 1 }}/{{ subjectList.length }}</span>
				</div>
			</template>
		</van-cell>
		<div class="list-box">
			<span :key="index" @click="changeCurrentSubjectIndex(index)" class="item" :class="subjectClass(item, index)" v-for="(item, index) in subjectList">{{ index + 1 }}</span>
			<i v-for="item in 5"></i>
		</div>
	</div>
</template>

<script setup lang="ts">
	const props = defineProps<{
		trueNum: number;
		falseNum: number;
		currentSubjectIndex: number;
		subjectList: any[];
	}>();

	const emit = defineEmits<{
		(event: "update:currentSubjectIndex", id: number): void;
	}>();

	const subjectClass = (item: any, index: number) => {
		if (index === props.currentSubjectIndex) {
			return "select";
		}
		if (item.isTrue == null) {
			return "";
		}
		if (item.isTrue) {
			return "true";
		} else {
			return "false";
		}
	};

	const changeCurrentSubjectIndex = (index: number) => {
		emit("update:currentSubjectIndex", index);
	};
</script>

<style lang="scss" scoped>
	.false {
		background: rgba(255, 219, 220, 0.39);
		border: 1px solid #ff4d53 !important;
	}
	.true {
		background: rgba(204, 243, 232, 0.39);
		border: 1px solid #01c18d !important;
	}
	.select {
		background: rgba(138, 144, 153, 0.08);
		border: 1px solid #bfbfbf;
	}
	.icon-size {
		font-size: 22px;
	}
	.flex-center {
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.list-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 60vh;
		flex-wrap: wrap;
		overflow: auto;
		.item {
			width: 38px;
			height: 38px;
			border-radius: 50%;
			border: 1px solid #bfbfbf;
			font-size: 17px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 24px;
			color: #5c6066;
			letter-spacing: 0.2800000011920929px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px;
		}
		i {
			width: 38px;
			margin: 10px;
		}
	}
</style>
