<template>
	<view class="indexpage">
		<navbar class="navbarSticky" bg="#fff">
			<view class="student-header-box flex">
				<van-icon class="student-header-left" name="arrow-left" @click="back"/>
				<text class="student-header-title">学员详情</text>
			</view>
		</navbar>
		<view style="margin: 40rpx 0 10rpx 0;">
			<view style="padding:0 50rpx;font-weight: 800;color: #282828;">
				<view style="font-size: 36rpx;">{{stuName}}的</view>
			</view>
		</view>
		<view class="index-student-title flex">
			<text>学情反馈</text>
			<view>(共{{workList!=null&&workList.length>0?workList.length:0}}条)</view>
		</view>
		<view class="index-student-information" v-if="workList.length>0">
			<template v-for="(item,index) in workList">
				<JobComponents v-if="item.ResultType==1" :jobData="item"></JobComponents>
				<examComponents  v-if="item.ResultType==2" :jobData="item"></examComponents>
				<commentsComponents  v-if="item.ResultType==3" :jobData="item"></commentsComponents>
			</template>
		</view>
		<van-empty description="暂无数据" v-if="workList.length === 0" />
	</view>
</template>

<script>
	import JobComponents from '@/components/index/JobComponents'
	import examComponents from '@/components/index/examComponents'
	import commentsComponents from '@/components/index/commentsComponents'
	import navbar from '../../components/navbar.vue'
	import vue, {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
		nextTick,
	} from "vue";

	export default {
		components: {
			JobComponents,
			examComponents,
			commentsComponents,
			navbar
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				stuCourseList: [], //学员课程列表
				userData: {}, //用户信息
				//学员作业和考试查询参数
				workMsg: {
					courseId: 0,
					stuId:0
				},
				stuName:'',
				workList: [],//学员作业、考试、评语数据
			});

			let methods = {
				back(){
					uni.navigateBack({
						delta: 1
					})
				},
				//获取学员作业、考试、评语
				getStuHomeWorkAndExam() {
					data.workList = [];
					proxy.$request("/Stu/GetStuWork", data.workMsg).then(res => {
						data.workList = res.Data;
					})
				}
			};

			onMounted(() => {

			});
			return {
				...toRefs(data),
				...methods,
			};			
		},
		onLoad(option) {
			this.workMsg.stuId = option.stuId
			this.workMsg.courseId = option.courseId
			this.stuName=decodeURIComponent(option.stuName)
			this.getStuHomeWorkAndExam()
		}
		
	};
</script>

<style scoped>
	.student-header-box{
	    padding: 20rpx 42rpx;
		flex-direction: row;
		align-items: center;
	}
	.student-header-title{
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #282828;
		flex:1;
		    text-align: center;
		    padding-right: 40rpx;
	}
	.student-header-left{
	    font-size: 40rpx;
	    position: relative;
	    z-index: 3;
	}
	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
	.index-student-title view {
		font-size: 25rpx;
		color: #ABABAB;
		margin-left: 20rpx;
		padding: 13rpx 0 0 0;
	}
	
	.index-student-title text {
		font-size: 36rpx;
		font-weight: 800;
		color: #282828;
	}
	
	.index-student-title {
		padding: 0 50rpx 45rpx;
	}
	
	.index-student-information {
		min-height: 500rpx;
		background: rgba(255, 255, 255, .7);
		border-radius: 50rpx 50rpx 0 0;
		padding: 71rpx 0 0 0;
	}
</style>
