<template>
	<m-nav-bar :title="query.title" />
	<div class="cell-container">
		<div class="cell-box" style="padding-right: 0px">
			<van-cell
				class="cell"
				:title="item.excellIssueName || item.placeIssueName || item.classIssueName || item.sequeIssueName"
				is-link
				center
				v-for="(item, index) in classDataLeft"
				:key="index"
				:border="false"
				@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,
							},
						});
					}
				">
				<template #icon>
					<div class="icon-blue">{{ index + 1 }}</div>
				</template>
			</van-cell>
			<van-cell
				v-if="query.title !== '地方专题'"
				@click="
					() => {
						push({
							name: 'classify',
							query: {
								...query,
								title: '地方专题',
								path: 'selectDfQuestionInfo',
								sort: 4,
							},
						});
					}
				"
				class="cell"
				title="地方专题"
				is-link
				center
				:border="false">
				<template #icon>
					<div class="icon-blue">{{ "地" }}</div>
				</template>
			</van-cell>
		</div>
		<div class="cell-box">
			<van-cell
				class="cell"
				:title="item.placeIssueName || item.classIssueName || item.excellIssueName || item.sequeIssueName"
				is-link
				center
				v-for="(item, index) in classDataRight"
				:key="index"
				:border="false"
				@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,
							},
						});
					}
				">
				<template #icon>
					<div class="icon-red">{{ index + 1 }}</div>
				</template>
			</van-cell>
		</div>
		<div style="height:20px;width: 100%;"></div>
		<m-classify-tip :content="classifyTip"></m-classify-tip>
	</div>
</template>

<script setup lang="ts">
import { getTopicClass } from "@/api";
import { ref, reactive } from "vue";
import { RouterBus } from "@/hooks";
const {
	route: { query },
	router: { push },
} = new RouterBus();
const classDataLeft = ref([]);
const classDataRight = ref([]);
const classData = ref([]);
const classifyTip = ref(["软件题库已同步更新至车管所最新,左边的红色必学题,每套题必须学完.", "模拟考试能连续5次以上达到96分左右,即可参加考试", "如果模拟考试达不到要求,请把右边的选学题也学习一遍"]);
getTopicClass(query.path as string, {
	...query,
	excellIssueName: "必",
}).then(({ data }) => {
	// res.data.data.shift();
	console.log(data);
	classDataLeft.value = data.data;
	getTopicClass(query.path as string, {
		...query,
		excellIssueName: "新",
	}).then(({ data }) => {
		// data.data.shift();
		classDataLeft.value = [...classDataLeft.value, ...data.data];
	});
	getTopicClass(query.path as string, {
		...query,
		excellIssueName: "地方",
	}).then(({ data }) => {
		// data.data.shift();
		classDataLeft.value = [...classDataLeft.value, ...data.data];
	});
	// getTopicClass(query.path as string, {
	// 	...query,
	// 	excellIssueName: "新",
	// }).then(({ data }) => {
	// 	// data.data.shift();
	// 	classDataLeft.value = [...classDataLeft.value, ...data.data];
	// });
});

getTopicClass(query.path as string, {
	...query,
	excellIssueName: "选学",
}).then(({ data }) => {
	classDataRight.value = data.data;
});
</script>

<style lang="scss" scoped>
.cell-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 5px 15px;
	justify-content: space-between;
}
.cell-box {
	display: flex;
	
	flex-wrap: wrap;
	flex-direction: column;

	.cell {
		width: 167px;
		margin-top: 10px;
		box-shadow: 0px 0px 10px rgba(124, 129, 136, 0.2);
	}
	.icon-blue {
		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;
	}
	.icon-red {
		width: 20px;
		height: 20px;
		background: red;
		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>
