<template>
	<div class="sujectOne-box">
		<div v-for="(testObj, index) in testList" :key="index">
			<div class="test-choose">
				<div class="min">
					<div class="icon-box" v-for="(item, index) in testObj.left" :key="index" @click="push(item.route)">
						<m-icon :type="item.icon" isSvg />
						<span>{{ item.name }}</span>
					</div>
				</div>
				<div class="max">
					<div class="icon-box" v-for="(item, index) in testObj.center" :key="index" @click="push(item.route)">
						<m-icon :type="item.icon" isSvg />
						<span>{{ item.name }}</span>
					</div>
				</div>
				<div class="min">
					<div class="icon-box" v-for="(item, index) in testObj.right" :key="index" @click="push(item.route)">
						<m-icon :type="item.icon" isSvg />
						<span>{{ item.name }}</span>
					</div>
				</div>
			</div>
			<div class="divide"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { RouterBus } from "@/hooks";
	const props = defineProps(["query"]);
	const {
		router: { push },
	} = new RouterBus();

	const testList = [
		{
			left: [
				{
					icon: "顺序练习",
					name: "顺序练习",
					route: {
						name: "classify",
						query: {
							...props.query,
							path: "selectSxQustionInfo",
							title: "顺序练习",
							sort: 3,
						},
					},
				},
				{
					icon: "分类练习",
					name: "分类练习",
					route: {
						name: "classify",
						query: {
							...props.query,
							path: "selectFlQustionInfo",
							title: "分类练习",
							sort: 1,
						},
					},
				},
			],
			center: [
				{
					icon: "精选考题",
					name: "精选考题500题",
					route: {
						name: "classify",
						query: {
							...props.query,
							path: "selectJxQustionInfo",
							title: "精选考题",
							sort: 2,
						},
					},
				},
			],
			right: [
				{
					icon: "地方专题",
					name: "地方专题",
					route: {
						name: "classify",
						query: {
							...props.query,
							path: "selectDfQustionInfo",
							title: "地方专题",
							sort: 4,
						},
					},
				},
				{
					icon: "错题收藏",
					name: "错题收藏",
					route: { name: "collection", query: { ...props.query } },
				},
			],
		},
		{
			left: [
				{
					icon: "真实考场模拟",
					name: "免费试用",
					route: { name: "exerciseFree", query: { ...props.query } },
				},
				{
					icon: "模拟成绩",
					name: "模拟成绩",
					route: { name: "testScores", query: { ...props.query } },
				},
			],
			center: [
				{
					icon: "模拟考试仿真题目",
					name: "模拟考试仿真题目",
					route: {
						name: "mockTest",
						query: { ...props.query },
					},
				},
			],
			right: [
				{
					icon: "考前须知",
					name: "考前须知",
					route: { name: "marked", query: { markdown: "考前须知" } },
				},
				{
					icon: "学车必看",
					name: "学车必看",
					route: { name: "marked", query: { markdown: "学车必看" } },
				},
			],
		},
	];
</script>

<style lang="scss" scoped>
	.sujectOne-box {
		padding-bottom: 30px;
	}
	.divide {
		background-color: rgb(107, 112, 112, 0.5);
		height: 5px;
		width: 345px;
		border-radius: 3px;
	}
	.test-choose {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 30px 25px;
		.min {
			width: 55px;
			height: 150px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			.icon-box {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 13px;
				.icon {
					width: 51px;
					height: 51px;
				}
			}
		}
		.max {
			width: 125px;
			height: 150px;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon-box {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.icon {
					width: 125px;
					height: 125px;
				}
				span {
					position: absolute;
					font-size: 14px;
					color: #ffffff;
					width: 60px;
					text-align: center;
				}
			}
		}
		/* &::after {
			content: "1231";
			width: 100vw;
			background-color: aqua;
			height: 20px;
		} */
	}
</style>
