<template>
	<view class="item" :class="item.examStatText == 'Y' ? 'completed' : 'incomplete'" @click="gotoDetails(item)">
		<view class="subscript" v-if="item.examStatText === 'N'">未完成</view>
		<view class="subscript" v-if="item.examStatText === 'Y'">已完成</view>
		<view class="title ellipsis-text">
			{{ item.papersName }}
		</view>
		<view class="time">
			<text class="color_3">起止时间：</text>
			<text class="color_class">{{ item.examStartTm.substr(0 , 10) }}至{{ item.examEndTm.substr(0 , 10) }}</text>
		</view>
		<view class="num_div">
			<text class="color_3">完成人数：</text>
			<text class="color_2">{{ item.execPersionNumer }}/{{ item.planPersionNumber }}</text>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { setPageCache } from '@/common/common';
	import common from '@/common/common';
	const props = defineProps({
		item: {
			type: Object,
			default: () => {}
		}
	});
	const emit = defineEmits(['click_item']);
	const item = computed(() => props.item);
	const gotoDetails = (item) => {
		setPageCache('testing_hall_details', item)
		common.navigateTo('/pages/testingHall/details');
	}
</script>

<style scoped lang="scss">
	
	.subscript {
		position: absolute;
		right: 0;
		top: 0;
		width: 92rpx;
		height: 46rpx;
		border-radius: 0px 0px 0px 22rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 22rpx;
		line-height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.incomplete {
		// 进行中
		.subscript {
			color: #ffffff;
			background-color: #ef5705;
		}
	
		.color_class {
			color: #d70c18;
		}
	}
	
	.completed {
		// 已完成
		.subscript {
			color: #ffffff;
			background-color: #33c583;
		}
	
		.color_class {
			color: #0066ff;
		}
	}
	
	.item {
		padding: 30rpx 44rpx 20rpx 38rpx;
		// margin: 0rpx 22rpx 22rpx 22rpx;
		margin-top: 22rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;

		.title {
			font-family: PingFangSC;
			font-weight: 600;
			font-size: 30rpx;
			color: #000000;
			line-height: 46rpx;
			text-align: left;
			font-style: normal;
		}

		.time {
			font-size: 24rpx;
			color: #999999;
			line-height: 30rpx;
			font-family: PingFangSC;
			font-weight: 400;
			color: #666666;
			margin-top: 28rpx;
			margin-bottom: 16rpx;
		}

		.num_div {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
		}

		.color_1 {
			color: #d70c18;
		}

		.color_2 {
			color: #333333;
		}

		.color_3 {
			color: #666666;
		}
	}
</style>
