<template>
	<view>
		<block v-if="title != ''">
			<view class="header"></view>
			<!-- 分数 -->
			<view class="results">
				<view class="results-title">
					<block v-if="isAnswer">
						<image src="/static/CollegeResults/CollegeResults_icon_00.png" mode="widthFix"></image>恭喜您考试通过了~
					</block>
					<block v-else>
						<image src="/static/CollegeResults/CollegeResults_icon_01.png" mode="widthFix"></image>未通过，请再接再厉~
					</block>
				</view>
				<view class="results-flex">
					<view class="results-flex-item">
						<view class="results-flex-number">{{total}}<text>分</text></view>
						<view class="results-flex-text">考试分数</view>
					</view>
					<view class="results-flex-item">
						<view class="results-flex-number">{{accuracy}}<text>%</text></view>
						<view class="results-flex-text">正确率</view>
					</view>
				</view>
				<view class="results-footer">
					<text>{{title}}(满分{{allTotal}}分)</text>
				</view>
			</view>
			<!-- 答题概况 -->
			<view class="situation-flex">
				<view class="situation-item">
					<view class="situation-val">{{count}}</view>
					<view class="situation-text">题目数量</view>
				</view>
				<view class="situation-item">
					<view class="situation-val">{{created}}</view>
					<view class="situation-text">考试日期</view>
				</view>
			</view>
			<!-- 答题情况 -->
			<view class="instructions">
				<view class="instructions-center">
					<text>正确</text>
					<text>错误</text>
				</view>
				<!-- instructions -->
				<view class="instructions-flex">
					<view class="instructions-item" :class="{'active': isWrong(item)}" v-for="(item, index) in count" :key="index">
						<view class="number">{{item}}</view>
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btns">
				<button size="default" @click="onBack">返回</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { report } from "@/apis/interfaces/college.js"
	export default {
		data() {
			return {
				isAnswer: false,
				title	: '',
				total	: '',
				allTotal: '',
				accuracy: '',
				count	: '',
				created : '',
				wrong	: '',
			};
		},
		computed: {
			isWrong(){
				return (e) => {
					return this.wrong.findIndex(val => val == e) >= 0;
				}
			}
		},
		created() {
			report(this.$Route.query.id).then(res => {
				let { title, total, veidoos, created_at, isAnswer } = res;
				this.isAnswer = isAnswer;
				this.title = title;
				this.total = total;
				this.created = created_at;
				this.count = veidoos.count.all
				this.accuracy = (veidoos.count.accuracy).substring(0, (veidoos.count.accuracy).length - 1);
				this.allTotal = veidoos.allTotal;
				this.wrong = veidoos.wrong;
			}).catch(err => {
				console.log(err)
				uni.showToast({
					title: err.message,
					icon : "none"
				})
			})
		},
		methods: {
			onBack(){
				this.$Router.back()
			}
		}
	}
</script>

<style lang="scss">
	.header{
		background-image: url('/static/CollegeResults/CollegeResults_back.png');
		background-position: top center;
		background-size: cover;
		padding: 30rpx 30rpx 0;
		height: 300rpx;
	}
	// 按钮
	.btns{
		padding: 0 30rpx 50rpx;
		box-sizing: border-box;
		button[size="default"]{
			height: 100rpx;
			line-height: 100rpx;
			border-radius: $radius-lg;
			background: $main-color;
			color: white;
			font-size: 32rpx;
			&::after{
				display: none;
			}
		}
	}
	// 答题情况
	.instructions{
		padding: 0 30rpx 30rpx;
		.instructions-center{
			padding-bottom: 30rpx;
			text-align: center;
			font-size: 28rpx;
			color: #111;
			text{
				margin: 0 30rpx;
				padding-left: 35rpx;
				color: #333;
				position: relative;
				line-height: 70rpx;
				&::after{
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -12rpx;
					height: 16rpx;
					width: 16rpx;
					content: " ";
					border-radius: 50%;
					background: $main-color;
					border:solid 7rpx #E4E8F7;
				}
				&:last-child::after{
					background-color: #FF4D4D;
					border-color: #F7E4E4;
				}
			}
		}
		.instructions-flex{
			margin: 0 -20rpx;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			align-items: flex-start;
			.instructions-item{
				width: calc(20% - 40rpx);
				padding-top: calc(20% - 42rpx);
				text-align: center;
				border-radius: 50%;
				background: #E4E8F7;
				box-sizing: border-box;
				position: relative;
				margin: 20rpx;
				color: #446EFE;
				font-weight: bold;
				.number{
					position: absolute;
					top: 50%;
					left: 0;
					margin-top: -22rpx;
					line-height: 40rpx;
					height: 40rpx;
					font-size: 32rpx;
					width: 100%;
					height: 100%;
				}
				&.active{
					background: #F7E4E4;
					color: #FF4D4D;
				}
			}
		}
	}
	// 考试概况
	.situation-flex{
		background: #F6F6F6;
		padding: 30rpx;
		border-radius: $radius;
		margin: 30rpx;
		display: flex;
		.situation-item{
			text-align: center;
			width: 50%;
			box-sizing: border-box;
			&:last-child{
				border-left: solid 1rpx #ddd;
			}
			.situation-val{
				font-weight: bold;
				color: #111111;
				font-size: 34rpx;
				line-height: 50rpx;
			}
			.situation-text{
				color: #999999;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
	}
	// 考试结果
	.results{
		background-color: white;
		border-radius: $radius;
		margin: -300rpx 30rpx 0;
		box-shadow: 0 0 15rpx 15rpx rgba(0, 0, 0, .02);
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		.results-title{
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
			line-height: 90rpx;
			image{
				width: 68rpx;
				height: 68rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}
		.results-flex{
			display: flex;
			justify-content: space-between;
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			.results-flex-item{
				width: 50%;
				text-align: center;
				.results-flex-number{
					color: $main-color;
					font-weight: bold;
					font-family: Arial, Helvetica, sans-serif;
					font-size: 50rpx;
					text{
						font-size: 30rpx;
						padding-left: 10rpx;
					}
				}
				.results-flex-text{
					font-size: 28rpx;
					color: #111111;
				}
			}
		}
		.results-footer{
			text-align: center;
			padding-top: 30rpx;
			text{
				display: inline-block;
				background: #F6F6F6;
				height: 70rpx;
				border-radius: 40rpx;
				line-height: 70rpx;
				padding: 0 50rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
