<template>
	<view>
		<image v-if="currentExam.is_pass" class="examImage" :src="imageSrcPass" mode="aspectFit"></image>
		<image v-else class="examImage" :src="imageSrc" mode="aspectFit"></image>
		<view v-if="currentExam.is_pass" class="finishText">恭喜您完成考试！</view>
		<view v-else class="finishText">很遗憾，本次考试您未达标！</view>
		<view class="finishText">
			<view><text>{{currentExam.name}}</text></view>
			<view>总分：<text>{{currentExam.total_score}}</text>分</view>
			<view>得分：<text>{{currentExam.score}}</text> 分 </view>
		</view>
		<view class="btnArea">
			<u-button class="btnClass" type="primary" :ripple="true" shape="circle" @click="goDetail">查看答卷</u-button>
			<u-button class="btnClass" :ripple="true" shape="circle" @click="backToHome">返回首页</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrcPass: '/static/exam/result.png',
				imageSrc: '/static/exam/error.png',
				currentExam:{}
			}
		},
		methods: {
			goDetail(){
				this.$u.api.examRecordDetail(this.currentExam.id).then(res=>{
					uni.hideLoading()
					uni.setStorageSync('currentExam', res.data);
					debugger;
					if (res.data.questions_.length>0){
						uni.navigateTo({
							url:'/pages/exam/detail?examrecord='+res.data.id
						})
					}
					else{
						uni.showToast({
							title:'获取失败',
							icon:'none'
						})
						return
					}
				}).catch(e=>{
				})
			},
			backToHome(){
				uni.reLaunch({
					url:'/pages/exam/index'
				})
			}
		},
		onLoad(options){
			this.currentExam = uni.getStorageSync('currentExam');
		},
		beforeRouteUpdate(){
			uni.removeStorageSync('currentExam');
		},
		
	}
</script>

<style lang="scss" scoped>
	.examImage {
	    width: 200rpx;
		justify-content: center;
		margin-top: 100rpx;
		height: 200rpx;
		margin: auto;
		display: block;
		margin-top: 100rpx;
	}

	.finishText {
		// margin: 100rpx 200rpx;
		padding: 50rpx;
		letter-spacing: 0.2em;
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		text {
			color: $theme-color;
			font-weight: bold;
		}
	}

	.btnArea {
		display: flex;
		margin-top: 50rpx;
		justify-content: center;
		align-items: center;
		.btnClass {
			width: 300rpx;
		}
	}

	.infoArea {
		display: flex;
		
		flex-direction: column;
		justify-content: center;
	}
</style>
