<template>
	<m-nav-bar title="考试结果" />
	<div class="result-box" v-if="testResult">
		<img class="img" src="/img/考试合格.png" />
		<span class="text">恭喜你,测试通过~</span>
		<div class="fraction-box">
			<span class="fraction">{{ props.userTestData.testScores }}</span
			>分
		</div>
		<span class="hint">（满分:100；合格:90）</span>
		<span class="time">用时：{{ useTime }}</span>
		<span class="evaluation">天赋异禀、骨骼惊奇，想来是百年难得一见的考试奇才。</span>
	</div>
	<div class="result-box" v-else>
		<img class="img" src="/img/考试不合格.png" />
		<span class="text">抱歉,测试未通过~</span>
		<div class="fraction-box">
			<span class="fraction">{{ props.userTestData.testScores }}</span
			>分
		</div>
		<span class="hint">（满分:100；合格:90）</span>
		<span class="time">用时：{{ useTime }}</span>
		<span class="evaluation">学车之路，任重而道远！路漫漫其修远兮，吾将上下而求索。</span>
	</div>
	<div class="btn-box">
		<m-button @click="goWrongPreview" class="btn1" text="错题重做" />
		<m-button @click="againTest" class="btn2" text="重新测试" />
	</div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import dayjs from "dayjs";
import { createTestScores } from "@/api";
import { RouterBus } from "@/hooks";
import { useRouter } from "vue-router";
import { Toast } from "vant";
const router = useRouter();
const goWrongPreview = () => {
	const vehicle = router.currentRoute.value.query.vehicle as string; //路由qvehicle参数
	const subject = router.currentRoute.value.query.subject as string; //路由subject参数
	let list = window.localStorage.getItem(vehicle+subject)
	
	if(list==null){
		return
	}
	list =JSON.parse(list)
	if(Array.isArray(list)&&list.length>0){
			router.push({
			path: "/wrongReview",
			query: {
				title: "错题重做",
				...router.currentRoute.value.query,
			},
		});

	}
	else{
		Toast('本次无错题')
	}
	
};
const props = defineProps<{
	userTestData: {
		testScores: number;
		useTime: number;
	};
}>();
const emits = defineEmits(["next"]);

const {
	route: { query },
} = new RouterBus();

const againTest = () => void emits("next");

//是否通过考试
const testResult = computed(() => {
	return props.userTestData.testScores >= 90;
});
//用时多久
const useTime = computed(() => {
	return dayjs(props.userTestData.useTime).format("mm分ss秒");
});

//提交考试成绩
createTestScores({
	type: query.vehicle as string,
	kskm: query.name as string,
	score: props.userTestData.testScores,
});
</script>

<style lang="scss" scoped>
.result-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 15px;
	.img {
		width: 246px;
		height: 216px;
	}
	.text {
		margin-top: 23px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #5c6066;
		line-height: 23px;
	}
	.fraction-box {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #8a9099;
		line-height: 23px;
		margin-top: 30px;
		.fraction {
			font-size: 60px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ff4d53;
		}
	}
	.hint {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #8a9099;
		line-height: 23px;
	}
	.time {
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #498ef5;
		line-height: 23px;
	}
	.evaluation {
		margin-top: 30px;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #5c6066;
		line-height: 23px;
	}
}
.btn-box {
	margin: 45px auto;
	width: 230px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #ffffff;
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 23px;
	.btn1 {
		background-color: #498ef5;
	}
	.btn2 {
		background-color: #01c18d;
	}
}
</style>
