<template>
	<view class="jobDetails-box flex" :class="{'fenxi':type==3}" style="flex-direction: column;">
        <view class="jobDetails-box-bj"></view>
        <navbar class="navbarSticky" bg="rgba(255,255,255,0)">
			<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" v-if="type!=3">
                        <text>仅看未匹配</text>
						<van-switch :checked="unSelectCheck" size="18px" active-color="#07c160" @change="changeUnSelect"/>
                    </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">
                <van-empty description="暂无数据" v-if="ExamStu.length === 0" />
                <examDetailsComponents v-if="ExamStu.length>0" :ExamStu="ExamStu" :type="type" :checkUnKnow='unSelectCheck'></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:[],
				unSelectCheck:false,
				type:1
			});
            let methods = {
				changeUnSelect({ detail }){
					data.unSelectCheck=detail
				},
				//获取考试学生列表
				getExamStuList(){
                    uni.showLoading()
					proxy.$request("/Exam/GetExamStuList", data.Msg).then(res => {
						data.ExamStu = res.Data;
                        uni.hideLoading()
					})
				},
                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;
			this.type = json.Type
		},
		onShow() {
			this.userData = uni.getStorageSync('userInfo');
			this.getExamStuList();
		}
	};
</script>
<style scoped>
    .noData {
		text-align: center;
		flex: 1;
		width: 100%;
		margin-top: 171rpx;
	}
	
	.noData image {
		width: 200rpx;
		margin-bottom: 40rpx;
	}

	.noData view {
		font-size: 24rpx;
		color: #cecece;
		text-align: center;
	}
    .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{
        font-size: 24rpx;
		font-weight: 400;
		color:grey;
		text-align: right;
		display: block;
		margin-bottom: 10rpx;
    }
    .conten-title-right{
        flex-shrink: 0;
		text-align: right;
		margin-left: 20rpx;
    }
    .conten-title-left view{
		font-size: 36rpx;
		font-weight: 600;
		color: #282828;
		
		display:-webkit-box;         
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2;        
		overflow:hidden;             
		text-overflow:ellipsis;
    }
    .conten-title-left text{
        margin-bottom: 10rpx;
		font-size: 24rpx;
		font-weight: 400;
		color:grey;
    }
    .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-box.fenxi{
		background: linear-gradient(0deg, #E53F4E, #EE7F82);
		background-size: 100% 570rpx;
	}
	.fenxi .jobDetails-num,
	.fenxi .conten-title-left view,
	.fenxi .conten-title-left text{
		color:#FFFFFF !important;
	}
    .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>
