<template>
	<view class="examComponents-box">
		<view class="examComponents activeOne flex">
			<view class="examComponents-time-box flex">
				<view class="examComponents-time">
					<view>{{jobData.CreateTime}}</view>
				</view>
				<view class="examComponents-line">
					<view class="examComponents-point"></view>
					<view class="examComponents-year" v-if="jobData.TimeTile&&jobData.TimeTile!=''">
						{{jobData.TimeTile}} 年
					</view>
				</view>
			</view>
			<view class="examComponents-center-box" @click="scoreDetails">
				<view class="examComponents-center-line"></view>
				<view class="examComponents-center flex">
					<view class="examComponents-left">
						<view class="operation-name">{{jobData.Title}}</view>
					</view>
					<view class="examComponents-right flex">
						<view class="homework-score">
							<view class="homework-score-title">总分</view>
							<view class="homework-score-num flex">
								<view>{{jobData.DataObj.Score}}</view>
								<view>分</view>
							</view>
						</view>
						<view class="homework-score">
							<view class="homework-score-title">得分率</view>
							<view class="homework-score-num flex">
								<view>{{jobData.DataObj.Score_p}}</view>
								<view>%</view>
							</view>
						</view>
						<view class="homework-score">
							<view class="homework-score-title">排名</view>
							<view class="homework-score-num flex">
								<view>{{jobData.DataObj.ExamRank}}</view>
								<view></view>
							</view>
						</view>
						<view class="homework-score">
							<view class="homework-score-title">领先度</view>
							<view class="homework-score-num flex">
								<view>{{jobData.DataObj.ExamRankRate*100}}</view>
								<view>%</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: ["jobData"],
		components: {},
		setup(props) {
			let data = reactive({
				showPhone: false,
				showLogin: true, //多次点击
				jobData: props.jobData,
				userData:{}
			});
			let methods = {
				
				scoreDetails() {
					data.userData = uni.getStorageSync('userInfo');
					uni.navigateTo({
						url: '/pages/index/scoreDetails?examId=' + data.jobData.DataObj.ExamId + '&stuId=' + data.userData.Id
					});
				}
			}
			return {
				...toRefs(data),
				...methods
			};
		},
	};
</script>
<style scoped>
	.homework-score-num view:last-child {
		font-size: 23rpx;
		margin-top: 25rpx;
	}

	.homework-score-num view:first-child {
		margin-right: 10rpx;
		font-size: 46rpx;
		font-weight: 800;
	}

	.homework-score-num {
		color: #3E3D3D;
	}

	.homework-score-title {
		color: #484646;
		font-size: 20rpx;
		margin-bottom: 23rpx;
		font-weight: 400;
		letter-spacing: 1px;
	}

	.homework-score {
		margin-right: 16rpx;
	}

	.homework-score:last-child {
		margin-right: 0;
	}

	.examComponents-right {
		flex-shrink: 0;
		height: 122rpx;
		background: #FFFFFF;
		padding: 22rpx 26rpx 15rpx 26rpx;
		border-radius: 30rpx;
		justify-content: space-between;
		/* margin: 0 18rpx; */
	}

	.examComponents.activeThree .operation-name {
		color: #282828;
	}

	.examComponents.activeTwo .operation-name {
		color: #282828;
	}

	.examComponents.activeOne .operation-name {
		color: #FFFFFF;
	}
	.examComponents-right{
		flex-shrink: 0;
	}
	.operation-name {
		font-size: 26rpx;
		letter-spacing: 1px;
		font-weight: 500;
		margin-bottom: 20rpx;
	}

	.examComponents-left {
		flex: 1;
	}

	.examComponents-center {
		flex-direction: column;
	}
	.examComponents-center-line {
		width: 4rpx;
		height: 23px;
		background: #FEFEFE;
		position: absolute;
		left: 0;
		top: 33rpx;
	}

	.examComponents.activeThree .examComponents-center-box {
		background: #EEEEEE;
	}

	.examComponents.activeTwo .examComponents-center-box {
		background: #DBE9FB;
	}

	.examComponents.activeOne .examComponents-center-box {
		background: #1E7BF5;
	}

	.examComponents-center-box {
		position: relative;
		border-radius: 30rpx;
		padding: 31rpx 18rpx 21rpx 24rpx;
		margin-bottom: 50rpx;
	}

	.examComponents-year {
		width: 127rpx;
		line-height: 111rpx;
		text-align: center;
		position: absolute;
		left: -125rpx;
		top: -110rpx;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653476346000_445.png')no-repeat;
		background-size: 100% 100%;
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;

	}

	.examComponents.activeThree .examComponents-point {
		background: #C1C1C1;
	}

	.examComponents.activeTwo .examComponents-point {
		background: #282828;

	}

	.examComponents.activeOne .examComponents-point {
		background: #1E7BF5;
		box-shadow: 0px 0px 12px 0px rgba(30, 123, 245, 0.46);
	}

	.examComponents-point {
		width: 19rpx;
		height: 19rpx;
		position: absolute;
		top: 20rpx;
		left: -13rpx;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.46);
	}

	.examComponents-center-box::after {   /* div是你需要添加背景图片的盒子*/
	    content: "";
		/* background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1654062518000_33.png); */
		background-position: right 20rpx top 43rpx;
		background-size: 74rpx auto;
		background-repeat: no-repeat;
	    opacity: 0.3;
	    position: absolute;  
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	}

	.examComponents-line {
		width: 4rpx;
		height: 100%;
		background: #F1F1F1;
		margin-left: 46rpx;
		margin-right: 46rpx;
		position: relative;
	}

	.examComponents-time {
		width: 61rpx;
		height: 55rpx;
		color: #CCC8C6;
		font-size: 20rpx;
		border-radius: 20rpx;
		padding: 14rpx 13rpx;
		background: #F6F6F6;
		zoom: .9;
	}

	.examComponents {
		justify-content: space-between;
		padding: 0 50rpx;
	}

	.examComponents-box {
		margin-top: 30rpx;
	}
</style>
