<template>
	<view class="examResult">
		<view class="examResult_pg">

		</view>
		<view class="examResult_content flex_col flex_center flex_cen">
			<img src="../../../static/img/icon/success.png" v-if="result.passed">
			<img src="../../../static/img/icon/fail.png" v-else>
			<view class="examResult_content_result" :style="result.passed?'color:#27C488;':'color:#EB2F48;'">
				<span v-if="result.passed">考试通过</span>
				<span v-else>考试未通过</span>
			</view>
			<view class="examResult_content_time">
				<u-row>
					<u-col span="4">考试时间：</u-col>
					<u-col span="8">{{examTime}}</u-col>
				</u-row>
			</view>
			<view class="examResult_content_when">
				<u-row>
					<u-col span="4">考试用时：</u-col>
					<u-col span="8" v-if="result.examMinutes">{{result.examMinutes || 0}}分钟</u-col>
				</u-row>
			</view>
			<view class="examResult_content_score">
				 <u-row >
					<u-col span="4">得分：</u-col>
					<u-col span="8" :customStyle="result.passed?'color:#27C488;flex-direction: row;':'color:#EB2F48;flex-direction: row;'">
						<view style="font-size: 48rpx; font-weight: bolder;">{{result.score || '0'}}</view>
						<view style="display: flex;align-content: center;align-items: center;">分</view></u-col>
				</u-row>

			</view>
			<view class="flex_sb examResult_content_btn">
				<button @click="back">返回首页</button>
				<button @click="checkAnswers" v-if="!result.passed && result.isViewAnswers" style="margin-left: 20rpx;">查看答案</button>
				<button @click="viewVideo" v-if="result.passed && result.isTakeVideo && !result.watched" style="margin-left: 20rpx;">观看视频</button>
			</view>
		</view>
		<view class="detailFoot" v-if="!result.passed">
			<button @click="joinExam">重新考试</button>
		</view>
	</view>
</template>

<script>
	import {formatGMT} from '../../../utils/util.js'
	export default {
		data() {
			return {
				result:{},
			};
		},
		onLoad(option) {
			const { result } = option
			this.result = JSON.parse(result)
		},
		computed: {
			examTime(){
				return this.result.examTime?`${formatGMT(this.result.examTime, 'D')} ${formatGMT(this.result.examTime, 'H')}`:''
			}

		},
		methods:{

			back(){
				uni.switchTab({
					url:'/pages/exam/exam'
				})
			},
			checkAnswers(){
				uni.navigateTo({
					url: `/subpkg/exam/examAnswer/examAnswer?id=${this.result.examPaperId}&result=${this.result.id}&score=${this.result.score}`
				})
			},
			joinExam(){
				uni.navigateTo({
					url: `/subpkg/exam/examPaper/examPaper?id=${this.result.examPaperId}`
				})
			},
			viewVideo(){
				uni.redirectTo({
					url: `/subpkg/exam/examVideo/examVideo?id=${this.result.examPaperId}`
				})
			}
		}

	}
</script>

<style lang="scss">
	.examResult {
		height: 100vh;
		background-color: #FAFAFA;
		position: relative;

		&_pg {
			background-image: linear-gradient(180deg, #2E75E6, #FAFAFA);
			height: 348rpx;
		}

		&_content {
			transform: translateY(-260rpx);
			background-color: #FFFFFF;
			border-radius: 32rpx;
			padding: 0 26rpx;
			margin: 0 25rpx;
			image{
				width: 112.5rpx;
				height: 112.5rpx;
				margin-top: 84rpx;
				margin-bottom: 27rpx;
			}
			img{
				width: 112.5rpx;
				height: 112.5rpx;
				margin-top: 84rpx;
				margin-bottom: 27rpx;
			}

			&_result{
				font-size: 48rpx;
				color: #EB2F48;
				font-weight: bolder;
				margin-bottom: 79rpx;
			}
			&_btn{
				margin-bottom: 48rpx;
				margin-top: 80rpx;
				width: 656rpx;
				button{
					border: none;
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 40rpx;
					background-color: #F0F8FF;
					color: #2E75E6;
					&:after{
						content: '';
						border: none;
					}

				}
			}
			&_when{
				margin: 67rpx 0;
				width: 605rpx;

			}
			&_time,&_score{
				width: 605rpx;
			}
		}

		.detailFoot {
			position: absolute;
			display: flex;
			justify-content: space-between;
			bottom: 0;
			width: 100%;
			padding-bottom: 28rpx;
			background-color: #FAFAFA;
			padding-top: 24rpx;
			z-index: 100;

			button {
				width: 702rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				color: #2E75E6;
				padding: 0 24rpx;
				border: 3rpx solid transparent;
				position: relative;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(90deg, #2E75E6, #5E58EE), linear-gradient(90deg, #2E75E6, #5E58EE);
				color: #FFFFFF;
			}

		}
	}
</style>
