<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" @click="centerClick(item, index)" :key="_index">
						<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="rightClick(item, index)">
						<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";
import { Dialog } from "vant";
import store from "@/store";
import { Toast } from "vant";
const props = defineProps(["query"]);
const {
	router: { push },
} = new RouterBus();
const centerClick = (item: any, index: number) => {
	console.log(index);
	switch (index) {
		case 0:
			vipClick(item, index);
			break;
		case 1:
			push(item.route);
			break;
	}
};
const rightClick = (item: any, index: number) => {
	//摩托车目前没有地方专题
	if (item.route?.query.title == "地方专题" && item.route?.query.vehicle == "摩托车") {
		Toast("暂无地方专题")
		return
	}
	push(item.route)
};
const vipClick = (item: any, index: number) => {
	if (index == 0 && !store.getters.getIsVip) {
		Dialog.confirm({
			title: "温馨提示",
			message: "请购买会员后使用",
			confirmButtonText: "购买",
		}).then(() => {
			push("/buyVip");
		});
		return;
	}
	if (props.query.vehicle == "摩托车") {
		//摩托车去原来的分类页面
		push({
			name: "classify",
			query: {
				...props.query,
				path: "selectJxQuestionInfo",
				title: "精选考题",
				sort: 2,
			},
		});
		return;
	}
	push(item.route);
};
const testList = [
	{
		left: [
			{
				icon: "顺序练习",
				name: "顺序练习",
				route: {
					name: "classifyOrder",
					query: {
						...props.query,
						path: "selectSxQuestionInfo",
						title: "顺序练习",
						sort: 3,
					},
				},
			},
			{
				icon: "分类练习",
				name: "分类练习",
				route: {
					name: "classify",
					query: {
						...props.query,
						path: "selectFlQuestionInfo",
						title: "分类练习",
						sort: 1,
					},
				},
			},
		],
		center: [
			{
				icon: "精选考题",
				name: "精选考题\n500题",
				route: {
					name: "classifyChoose",
					query: {
						...props.query,
						path: "selectJxQuestionInfo",
						title: "精选考题",
						sort: 2,
					},
				},
			},
		],
		right: [
			{
				icon: "地方专题",
				name: "地方专题",
				route: {
					name: "classify",
					query: {
						...props.query,
						path: "selectDfQuestionInfo",
						title: "地方专题",
						sort: 4,
					},
				},
			},
			{
				icon: "错题收藏",
				name: "错题·收藏",
				route: { name: "collection", query: { ...props.query } },
			},
		],
	},
	{
		left: [
			{
				icon: "真实考场模拟",
				name: "免费试用",
				route: { name: "exerciseFree", query: { ...props.query,title:"免费试用",name:"科目一四" } },
			},
			{
				icon: "模拟成绩",
				name: "模拟成绩",
				route: { name: "testScores", query: { ...props.query } },
			},
		],
		center: [
			{
				icon: "模拟考试仿真题目",
				name: "模拟考试\n仿真题目",
				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;
			cursor: pointer;
			flex-direction: column;
			font-size: 13px;
			.icon {
				width: 51px;
				height: 51px;
			}
			span {
				font-size: 17px;
				white-space: nowrap;
			}
		}
	}
	.max {
		width: 125px;
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon-box {
			display: flex;
			justify-content: center;
			align-items: center;

			cursor: pointer;
			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>
