<template>
	<view class="examDetailsComponents-box">
        <view class="examDetailsComponents activeOne flex" v-for="(item,index) in ExamStu" :key="index" :class="item.StuId ==0?'mismatchActive':''">
            <view class="examDetailsComponents-time-box flex">
                <view class="examDetailsComponents-time flex">
                    <view>{{item.StuName.substring(0,1)}}</view>
                    <text>{{item.StuName.substring(1,item.StuName.length)}}</text>
                </view>
                <view class="examDetailsComponents-line">
                    <view class="examDetailsComponents-point"></view>
                </view>
            </view>
            <view class="examDetailsComponents-center-box">
				<view class="Mismatch-box" v-if="item.StuId ===0">
				    <view class="Mismatch-title flex">
				        <van-icon name="warning" />
				        <text>学员未匹配</text>
				    </view>
				</view>
                <view class="examDetailsComponents-center flex">
                    <view class="homework-score flex">
                        <view class="homework-score-title">
                            得分
                        </view>
                        <view class="homework-score-num">
                            <text>{{item.TScore}}</text>分
                        </view>
                    </view>
                    <view class="homework-score flex">
                        <view class="homework-score-title">
                            排名
                        </view>
                        <view class="homework-score-num">
                            <text>{{item.Rank}}</text>名
                        </view>
                    </view>
                    <view class="homework-score flex">
                        <view class="homework-score-title">
                            排名率 
                        </view>
                        <view class="homework-score-num">
                                <text>{{(item.RankRate * 100).toFixed(0)}}</text>%
                        </view>
                    </view>
                </view>
            </view>
        </view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			ExamStu:[]
		},
		components: {},
		setup() {

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
			});
            let methods = {
                
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
	};
</script>
<style scoped>
    .homework-score-num{
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 10rpx;
    }
    .homework-score-num text{
        font-size: 46rpx;
        font-weight: 800;
        font-style: italic;
        padding: 0 30rpx 0 17rpx;
    }
    .homework-score-title{
        color: #282828;
        font-size: 20rpx;
        font-weight: 400;
        letter-spacing: 1px;
        margin-bottom: 20rpx;
    }
    .homework-score{
        align-items: center;
        flex-direction: column;
    }
    .operation-state-text{
        font-size: 20rpx;
        letter-spacing: 2px;
    }
    .examDetailsComponents.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;
    }
    .examDetailsComponents.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;
    }
    .examDetailsComponents.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{
        font-size: 20rpx;
        white-space: nowrap;
        color: #282828;
    }
    .operation-name{
        font-size: 16rpx;
        letter-spacing: 1px;
        font-weight: 500;
        color: #C2BCBA;
    }
    .examDetailsComponents-left{
        justify-content: space-between;
        align-items: center;
        margin-bottom: 17rpx;
    }
    .examDetailsComponents-center{
        justify-content: space-between;
    }
    .examDetailsComponents.mismatchActive .Mismatch-box{
        display: block;
    }
    .Mismatch-title van-icon{
        font-size: 42rpx;
        margin-right: 8rpx;
    }
    .Mismatch-title{
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
        font-weight: bold;
        color: #C91727;
        letter-spacing: 1rpx;  
    }
    .Mismatch-box{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: none;
    }
    .examDetailsComponents.mismatchActive .examDetailsComponents-center-box{
        background: rgba(200, 23, 39, 0.1);
        border: 2px solid #FD3869;
        position: relative;
    }
    .examDetailsComponents .examDetailsComponents-center-box{
        background: #FFFFFF;
    }
    .examDetailsComponents-center-box{
        flex-grow: 1;
        border-radius: 30rpx;
        padding: 17rpx 26rpx 23rpx 21rpx;
        margin-bottom: 40rpx;
        
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 20px;
    }
    .examDetailsComponents.activeThree .examDetailsComponents-point{
        background: #C1C1C1;
    }
    .examDetailsComponents.activeTwo .examDetailsComponents-point{
        background: #282828;
        
    }
    .examDetailsComponents.activeOne .examDetailsComponents-point{
        background: #C81727;
        box-shadow: 0px 0px 12px 0px rgba(200, 23, 39, 0.46);
    }
    .examDetailsComponents .examDetailsComponents-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);
    }
    .examDetailsComponents-line{
        width: 4rpx;
        height: 100%;
        background: #F1F1F1;
        margin-left: 46rpx;
        margin-right: 46rpx;
        position: relative;
    }
    .examDetailsComponents-time text{
        font-size: 20rpx;
        font-weight: bold;
        white-space: nowrap;
        margin-top: 18rpx;
        margin-left: 4rpx;
    }
    .examDetailsComponents-time{
        color: #282828;
        font-size: 36rpx;
        font-weight: bold;
        letter-spacing: 1rpx;
    }
    .examDetailsComponents-time-box{
        
    }
	.examDetailsComponents{
        justify-content: space-between;
        padding: 0 50rpx;
    }
    .examDetailsComponents-box{
        height: 800rpx;
        overflow-y: auto;
        box-sizing: border-box;
    }
</style>
