<template>
	<view class="JobComponents-box">
		<view class="JobComponents flex" :class="[{'activeOne':jobData.DataObj.HomeWorkStatus==2},{'activeTwo':jobData.DataObj.HomeWorkStatus==1},{'activeThree':jobData.DataObj.HomeWorkStatus==0}]">
			<view class="JobComponents-time-box flex">
				<view class="JobComponents-time">
					<view>{{jobData.CreateTime}}</view>
				</view>
				<view class="JobComponents-line">
					<view class="JobComponents-point"></view>
					<view class="JobComponents-year" v-if="jobData.TimeTile&&jobData.TimeTile!=''">
						{{jobData.TimeTile}} 年
					</view>
				</view>
			</view>
			<view class="JobComponents-center-box" @click="JobDetails">
				<view class="JobComponents-center-line"></view>
				<view class="JobComponents-center flex">
					<view class="JobComponents-left">
						<view class="operation-name">{{jobData.Title}}</view>
						<view class="operation-state flex">
							<view class="operation-state-img"></view>
							<view class="operation-state-text">{{jobData.DataObj.HomeWorkStatusStr}}</view>
						</view>
					</view>
					<view class="JobComponents-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>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: ["jobData"],
		components: {},
		setup() {
			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
			});
			let methods = {
				JobDetails() {
					// uni.navigateTo({
					// 	url: '/pages/index/jobDetails?tabNme=' + '作业情况'
					// });
				}
			}
			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{
		width:116rpx;
		overflow: hidden;
	}
	.homework-score:first-child {
		margin-right: 16rpx;
	}

	.JobComponents-right {
		height: 122rpx;
		background: #FFFFFF;
		padding: 22rpx 26rpx 15rpx 26rpx;
		border-radius: 30rpx;
		justify-content: space-between;
		flex-shrink: 0;
		margin-left: 11rpx;
		zoom: .9;
	}
	
	.JobComponents-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;
	}

	.JobComponents.activeThree .operation-state-text {
		color: #CD3D47;
	}

	.JobComponents.activeTwo .operation-state-text {
		color: #4E4A4A;
	}

	.JobComponents.activeOne .operation-state-text {
		color: #FFFFFF;
	}

	.operation-state-text {
		font-size: 20rpx;
		letter-spacing: 2px;
	}

	.JobComponents.activeThree .operation-state-img {
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_480.png')no-repeat;
		background-size: 22rpx 22rpx;
	}

	.JobComponents.activeTwo .operation-state-img {
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_781.png')no-repeat;
		background-size: 22rpx 22rpx;
	}

	.JobComponents.activeOne .operation-state-img {
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_44.png')no-repeat;
		background-size: 22rpx 22rpx;
	}

	.operation-state-img {
		width: 22rpx;
		height: 22rpx;
		margin-right: 9rpx;
		margin-top: 4rpx;
	}

	.operation-state {
		margin-top: 35rpx;
		font-size: 20rpx;
	}

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

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

	.JobComponents.activeOne .operation-name {
		color: #FFFFFF;
	}

	.operation-name {
		font-size: 26rpx;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-top: 9rpx;
		letter-spacing: 1px;
		font-weight: 500;
	}

	.JobComponents-left {
		flex: 1;
		flex-grow: 1;
	}

	.JobComponents-center {
		justify-content: space-between;
	}

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

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

	.JobComponents.activeTwo .JobComponents-center-box {
		background: #F9E0E2;
	}

	.JobComponents.activeOne .JobComponents-center-box {
		background: #E64150;
	}

	.JobComponents-center-box {
		flex-grow: 1;
		position: relative;
		border-radius: 30rpx;
		padding: 21rpx 18rpx 21rpx 24rpx;
		margin-bottom: 50rpx;
	}

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

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

	}

	.JobComponents.activeOne .JobComponents-point {
		background: #C81727;
		box-shadow: 0px 0px 12px 0px rgba(200, 23, 39, 0.46);
	}

	.JobComponents .JobComponents-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);
	}
	
	.JobComponents-center-box::after {   /* div是你需要添加背景图片的盒子*/
	    content: "";
		background-image: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653917724000_233.png);
		background-position: 30rpx bottom;
		background-size: 74rpx auto;
		background-repeat: no-repeat;
	    opacity: 0.3;
	 
	    position: absolute;  
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	}

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

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

	.JobComponents-time-box {}

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

	.JobComponents-box {
		
	}
</style>
