<template>
	<view class="content">
		<block v-for="(item, index) in testArr" :key="index">
			<view class="block">
				<image class="icon" v-if="item.answer.is_finish" src="@/static/icons/test_icon.png" mode="widthFix"></image>
				<view class="title">{{item.title}}</view>
				<view class="text">考试时间：{{item.time}}分钟</view>
				<view class="text">试卷满分：{{item.questions.all.score}}分</view>
				<view class="text">及格分数：{{item.total}}分</view>
				<view class="submit">
					<view class="submit-item" v-if="item.questions.radio.count > 0">·单选{{item.questions.radio.count}}道题，每道题{{item.questions.radio.score}}分</view>
					<view class="submit-item" v-if="item.questions.multi.count > 0">·多选{{item.questions.multi.count}}道，每道题{{item.questions.multi.score}}分</view>
					<view class="submit-item" v-if="item.questions.yesno.count > 0">·判断题{{item.questions.yesno.count}}道，每道题{{item.questions.yesno.score}}分</view>
					<view class="submit-item">·倒计时结束后系统将提示交卷</view>
				</view>
				<view class="btns">
					<button @click="$Router.push({name: 'CollegeResults', params: {id: item.answer.last_answer_id}})" v-if="item.answer.is_finish">查看成绩</button>
					<button @click="$Router.push({name: 'CollegeAnswer', params: {id: item.evaluation_id}})" v-else>开始答题</button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { evaluations } from '@/apis/interfaces/college.js'
	export default {
		data() {
			return {
				testArr: []
			};
		},
		onShow(){
			evaluations().then(res => {
				this.testArr = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 1rpx;
	}
	.block{
		margin: 40rpx 30rpx;
		background: white;
		border-radius: $radius;
		padding: $padding;
		position: relative;
		.icon{
			width: 168rpx;
			height: 168rpx;
			position: absolute;
			right: 50rpx;
			top: 50rpx;
			opacity: .5;
		}
		.title{
			position: relative;
			line-height: 50rpx;
			font-size: 36rpx;
			margin-bottom: 30rpx;
			color: #111111;
			&::after{
				position: absolute;
				content: " ";
				height: 50rpx;
				left: -30rpx;
				top: 0;
				background: $main-color;
				width: 8rpx;
			}
		}
		.text{
			font-size: 32rpx;
			line-height: 40rpx;
			margin-top: 10rpx;
			color: #111111;
		}
		.submit{
			margin-top: 30rpx;
			padding-top: 20rpx;
			border-top: solid 1rpx #F6F6F6;
			.submit-item{
				line-height: 40rpx;
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}
		.btns{
			padding-top: 50rpx;
			button{
				background: $main-color;
				color: white;
				border-radius: $radius-lg;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 34rpx;
				&::after{border: none;}
			}
		}
	}
</style>
