<template>
	<view class="jobDetails-box flex" style="flex-direction: column;">
        <view class="jobDetails-box-bj"></view>
        <navbar class="navbarSticky" bg="#FCEEEF">
			<view class="jobDetails-header-box">
				<van-icon class="jobDetails-header-left" name="arrow-left" @click="back"/>
                <text class="jobDetails-header-title">考试详情</text>
            </view>
		</navbar>
        <view class="jobDetails-content flex" style="flex-direction: column;flex:1;height:1px">
            <view class="jobDetails-content-header">
                <view class="jobDetails-conten-title flex">
                    <view class="conten-title-left flex">
                        <text>{{CreateTime}}</text>
                        <view>{{ExamName}}</view>
                    </view>
                    <view class="conten-title-right">
                        <text>仅查看未匹配学员</text>
                    </view>
                </view>
                <view class="jobDetails-num-box flex">
                    <view class="jobDetails-num flex">
                        <text>人数</text>
                        <view>{{ExamNum}}</view>
                    </view>
                    <view class="jobDetails-num flex">
                        <text>平均得分</text>
                        <view>{{AvgScore}}</view>
                    </view>
                </view>
            </view>
            <view class="index-student-information" style="flex:1;height:1px">
                <examDetailsComponents :ExamStu="ExamStu"></examDetailsComponents>
            </view>
        </view>
	</view>
</template>
<script>
    import examDetailsComponents from '@/components/index/scoreDetails/examDetailsComponents'
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";
	import navbar from '../../components/navbar.vue'
	export default {
		props: {
			
		},
		components: {
            examDetailsComponents,
			navbar
        },
		setup() {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				Msg:{
					ExamId:0,
					StuName:""
				},
				CreateTime:"2022-05-30",
				ExamName:"测试需要绑",
				ExamNum:0,
				AvgScore:0,
				ExamStu:[]
			});
            let methods = {
				//获取考试学生列表
				getExamStuList(){
					proxy.$request("/Exam/GetExamStuList", data.Msg).then(res => {
						console.log(res.data);
						data.ExamStu = res.Data;
					})
				},
                back(){
                    uni.navigateBack({
                    	delta:1
                    })
                }
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
		onLoad(options){
			let json=JSON.parse(decodeURIComponent(options.exam))
			this.Msg.ExamId = json.ExamId;
			this.CreateTime = json.CreateTime;
			this.ExamName = json.ExamName;
			this.ExamNum = json.StuNum;
			this.AvgScore = json.AvgScore;
		},
		onShow() {
			this.userData = uni.getStorageSync('userInfo');
			this.getExamStuList();
		}
	};
</script>
<style scoped>
    .index-student-information{
        min-height: 800rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 0 0;
		padding: 71rpx 0 30rpx 0;
    }
    .jobDetails-num view{
        font-size: 36rpx;
        font-weight: 800;
        font-style: italic;
        margin-top: 15rpx;
    }
    .jobDetails-num text{
        font-size: 20rpx;
        font-weight: 400;
    }
    .jobDetails-num{
        flex-direction: column;
        color: #CE8086;
    }
    .jobDetails-num-box{
        justify-content: space-between;
        padding: 70rpx 185rpx 35rpx 185rpx;
    }
    .conten-title-right text{
        background: #C91727;
        border-radius: 27rpx;
        font-size: 24rpx;
        font-weight: bold;
        color: #FFFFFF;
        padding: 10rpx 19rpx;
        display: block;
    }
    .conten-title-right{
        flex-shrink: 0;
    }
    .conten-title-left view{
        font-size: 50rpx;
        font-weight: 800;
    }
    .conten-title-left text{
        font-size: 36rpx;
        font-weight: 400;
        margin-bottom: 10rpx;
    }
    .conten-title-left{
        color: #282828;
        flex-direction: column;
    }
    .jobDetails-conten-title{
        padding: 50rpx 50rpx 0 50rpx;
        letter-spacing: 1rpx;
        justify-content: space-between;
    }
    .jobDetails-content-header{
        
    }
    .jobDetails-content{
        position: relative;
        z-index: 2;  
    }
    .jobDetails-box{
        background: #FCEEEF;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
    }
    .jobDetails-header-title{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding: 37rpx 31rpx;
        text-align: center;
        letter-spacing: 1rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #282828;
    }
    .jobDetails-header{
        margin: 50rpx 50rpx 0 50rpx;
        align-items: center;
    }
    .jobDetails-header-left{
        font-size: 40rpx;
        position: relative;
        z-index: 3;
    }
	.jobDetails-header-box{
        padding: 37rpx 31rpx;
        position: relative;
    }
    .navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
</style>
