<template>
	<m-nav-bar :title="query.title" />
	<div class="cell-box">
		<van-cell class="cell" :title="item.placeIssueName || item.classIssueName || item.excellIssueName || item.sequeIssueName" center v-for="(item, index) in classData" :key="index" :border="false">
			<div class="select">
				<div
					class="select-item0"
					@click="
						() => {
							push({
								name: 'exercise',
								query: {
									...query,
									classIssueName: item.classIssueName,
									placeIssueName: item.placeIssueName,
									excellIssueName: item.excellIssueName,
									sequeIssueName: item.sequeIssueName,
									placeIssue: item.placeIssue,
									classIssue: item.classIssue,
									excellIssue: item.excellIssue,
									sequeIssue: item.sequeIssue,
								},
							});
						}
					">
					语音讲解
				</div>
				<div
					@click="
						() => {
							push({
								name: 'exerciseStrict',
								query: {
									...query,
									classIssueName: item.classIssueName,
									placeIssueName: item.placeIssueName,
									excellIssueName: item.excellIssueName,
									sequeIssueName: item.sequeIssueName,
									placeIssue: item.placeIssue,
									classIssue: item.classIssue,
									excellIssue: item.excellIssue,
									sequeIssue: item.sequeIssue,
								},
							});
						}
					"
					class="select-item1">
					单项测试
				</div>
			</div>
			<template #icon>
				<div class="icon">{{ index + 1 }}</div>
			</template>
		</van-cell>
		<!-- <m-classify-tip></m-classify-tip> -->
	</div>
</template>

<script setup lang="ts">
import { getTopicClass } from "@/api";
import { ref } from "vue";
import { RouterBus } from "@/hooks";
const {
	route: { query },
	router: { push },
} = new RouterBus();
const classData = ref();
getTopicClass(query.path as string, query).then(({ data }) => {
	switch (query.title) {
		case "顺序练习":
			if ((query.vehicle == "摩托车")) {
			
			} else {
				data.data?.shift();
			}

			break;
	}
	classData.value = data.data;
});
</script>

<style lang="scss" scoped>
:deep .van-cell__value {
	flex: 1.2;
}
.cell-box {
	display: flex;
	padding: 5px 15px;
	flex-wrap: wrap;
	justify-content: space-between;
	.cell {
		width: 100%;
		border-bottom: 1px solid #ddd;
		line-height: 28px;

		// box-shadow: 0px 0px 10px rgba(124, 129, 136, 0.2);
	}
	.select {
		display: flex;
		flex-direction: row;
		color: white;

		.select-item0 {
			padding: 0 12px;
			background: #498ef5;
			margin-right: 10px;
			border-radius: 8px;
			font-size: 12px;
		}

		.select-item1 {
			padding: 0 12px;
			background: #06bd5e;
			font-size: 12px;
			border-radius: 8px;
		}
	}
	.icon {
		width: 20px;
		height: 20px;
		background: #498ef5;
		border-radius: 50%;
		font-weight: 500;
		font-family: PingFang SC;
		font-size: 13px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		margin-right: 5px;
	}
}
</style>
