<template>
	<page-meta :page-style="showPopu?'overflow:hidden;':''">
	<view class="workSituationpage">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="index-header-box" @click="back">
				<view class="index-header-img">
					<van-image width="100%" height="100%" fit="cover" class="img"
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_713.png" />
				</view>
				<view class="index-header-tetx">
					<view class="index-header-title">
						welcome
					</view>
					<view class="index-header-name">{{userData.AccountName}}</view>
				</view>
			</view>
		</navbar>
		<view style="margin: 40rpx 0 10rpx 0;" class="workSituationAccountName flex">
			<view style="padding:0 50rpx;font-weight: 800;color: #282828;">
				<view style="font-size: 36rpx;">Hi，</view>
				<view style="font-size: 50rpx;">{{userData.AccountName}}老师</view>
				
			</view>
			<view class="set-text">
				<view class="flex" @click="goSet">
					<text>设置评语</text>
					<van-image class="img" width="14rpx" height="13rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653977684000_601.png" />
				</view>
			</view>
		</view>
        <courseCard @changePopStatus='changePopStatusHandler' @change="changeCourseHandler"></courseCard>
        <view class="index-student-information">
            <view class="workSituation-title-box flex">
                <view class="workSituation-title"
                :class="tabNme==t.name?'active':''"
                v-for="(t,index) in titleList" :key="index"
                @click="toggleTitle(t.name)">
                    <text class="name">{{t.name}}</text>
                    <view class="num">({{t.num}})</view>
                </view>
            </view>
			<van-empty description="暂无数据" v-if="currentCourseId === 0" />
			<scroll-view
				:scroll-top="0"
				scroll-y="true"
				class="scroll-box"
				@scrolltolower="lower"
				v-if="currentCourseId > 0"
				>
				<operation v-if="tabNme=='作业情况'" :dataList="homeWorks"></operation>
				<studentList @selected="selectStuHandler" v-if="tabNme=='学生列表'" :dataList="students"></studentList>
				<examList @change="changeExamHandler" v-if="tabNme=='考试信息'" :dataList="exams" :CourseId="currentCourseId"></examList>
			</scroll-view>
			<!-- <Loadmore :state="pageState" /> -->
		</view>
	</view>
	</page-meta>
</template>

<script>
	import Loadmore from "@/components/loadmore.vue";
    import courseCard from '@/components/index/workSituation/courseCard'
    import operation from '@/components/index/workSituation/operation'
    import studentList from '@/components/index/workSituation/studentList'
    import examList from '@/components/index/workSituation/examList'
	import vue, {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
		nextTick,
	} from "vue";

	 import {
		 getSweepCode
	 } from '../../api/index.js'
	import {
		getImageColor
	} from '../../utils/index.js'
	import indexassembly from './components/indexassembly.vue'
	import navbar from '../../components/navbar.vue'
	import bottom from '../../components/bottom.vue'
	export default {
		components: {
			navbar,
            courseCard,
            operation,
            studentList,
            examList,
			Loadmore
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				titleList:[
                    {name:'学生列表',num:0},
                    {name:'作业情况',num:0},
                    {name:'考试信息',num:0},
                ],
                tabNme:'作业情况',
				Msg:{
                    PageIndex: 1,
                    PageSize: 20,
                    ExamName:'',
					CourseId:''
                },
				OperationMsg:{
					courseId:'',
				},
				pageCount: 0,
				timer: null, //防抖
				students:[],
				homeWorks:[],
				exams:[],
				pageState: "more",
				currentCourseId:0,
				userData:{},
				loading:false,
				showPopu:false,
				CourseName:''
			});
			data.userData=uni.getStorageSync("userInfo")
			let methods = {
				changePopStatusHandler(status){
					data.showPopu=status==1
				},
				goSet(){
					let url='/pages/setComments/setComments?CourseId='+data.currentCourseId+'&CourseName='+data.CourseName;
					uni.navigateTo({
						url:url
					})
				},
				back(){
					uni.navigateBack({
						delta: 1
					})
				},
				selectStuHandler(id,name){
					uni.navigateTo({
						url:'/pages/student/student?stuId='+id+'&courseId='+data.currentCourseId+'&stuName='+encodeURIComponent(name)
					})
				},
				changeCourseHandler(id,name){
					data.Msg.courseId=id
					data.OperationMsg.courseId=id
					data.currentCourseId=id
					data.CourseName = name
					methods.getCourseStuList()
					methods.getExamPageList()
					methods.getCourseHomeWorkList()
				},
				changeExamHandler(){
					methods.getExamPageList()
				},
                toggleTitle(t) {
                    data.tabNme = t
                },
				//获取学生列表
				getCourseStuList(){
					data.pageState = "loading";
					proxy.$request("/Teacher/GetCourseStu", data.OperationMsg).then(res => {
						if(res){
							data.titleList.forEach(item => {
								if(item.name=='学生列表'){
									item.num = res.Data.length
								}
							});
							data.students = res.Data;
							data.pageState = "none";
						}
					})
				},
				//获取作业情况列表
				getCourseHomeWorkList(){
					data.pageState = "loading";
					proxy.$request("/Teacher/GetCourseHomeWork", data.OperationMsg).then(res => {
						if(res){
							data.titleList.forEach(item => {
								if(item.name=='作业情况'){
									item.num = res.Data.length
								}
							});
							data.homeWorks = res.Data;
							data.pageState = "none";
						}
					})
				},
				//获取考试信息列表
				getExamPageList(){
					data.pageState = "loading";
					proxy.$request("/Exam/GetExamPageList", data.Msg).then(res => {
						if(res){
							data.titleList.forEach(item => {
								if(item.name=='考试信息'){
									item.num = res.Data.RowsCount
								}
							});
							if (data.timer) data.timer = null;
							if (data.Msg.PageIndex === 1) {
								data.exams = res.Data.PageData;
							} else {
								data.exams = [...res.Data.PageData, ...data.exams];
							}
							data.pageCount = res.Data.PageCount;
							if (data.Msg.PageIndex >= res.Data.PageCount) {
								data.pageState = "none";
							} else {
								data.pageState = "more";
							}
						}
					})
				},
				lower(e) {
					if (data.Msg.PageIndex < data.pageCount) {
						data.pageState = "loading";
						data.Msg.PageIndex++;
						if (data.timer) clearTimeout(data.timer);
							data.timer = setTimeout(() => {
								if(data.tabNme=='学生列表'){
									this.getCourseStuList()
								}else if(data.tabNme=='作业情况'){
									this.getCourseHomeWorkList()
								}else{
									this.getExamPageList()
								}
							}, 1000);
						} else {
						data.pageState = "none";
					}
				},
			};

			onMounted(() => {

			});
			let that = methods;
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad(option) {
			
		},
		onShow() {
			
		},
		onShow() {
			

			
		},
		onShareAppMessage() {
			return {
				title: "进阶思维学情反馈",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
		onShareTimeline() {
			return {
				title: "进阶思维学情反馈",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
	};
</script>

<style scoped>
	.set-text view .img{
		margin-left: 10rpx;
	}
	.set-text view{
		width: 160rpx;
		line-height: 50rpx;
		background: #FFFFFF;
		border: 1rpx solid #E6A9AE;
		border-radius: 25rpx;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #C91727;
		letter-spacing: 1rpx;
	}
	.set-text{
		width: 160rpx;
		flex-shrink: 0;
		margin-right: 50rpx;
	}
	.workSituationAccountName{
		justify-content: space-between;
	}
    .num{
        font-size: 20rpx;
        display: inline-block;
        margin-top: 5rpx;
    }
    /* .current-title-box{
        color: #FFFFFF;
        background: #282828;
        padding: 26rpx 36rpx;
        width: 80%;
        position: absolute;
        left: -18%;
        right: 0;
        top: -28rpx;
        border-radius: 39rpx;
        justify-content: center;
    } */
    .workSituation-title.active{
        position: relative;
		background-color: #282828;
		color: #FFF;
    }
	.workSituation-title.active .name{
		font-size: 30rpx;
		font-weight: bold;
	}
	.workSituation-title.active .num{
		font-size: 20rpx;
	}
    .workSituation-title{
        flex: 1;
        color: #282828;
        font-size: 26rpx;
        text-align: center;
		border-radius: 39rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #282828;
		line-height: 77rpx;
    }
    .workSituation-title-box{
        margin-bottom: 30rpx;
        margin: 0 50rpx 50rpx;
        height: 77rpx;
        background: #F0F0F0;
        border-radius: 39rpx;
    }
    .index-student-information{
        min-height: 800rpx;
		background: rgba(255,255,255,.7);
		border-radius: 50rpx 50rpx 0 0;
        padding: 50rpx 0 30rpx 0;
	}
    .index-header-name{
		font-size: 30rpx;
		color: #474747;
	}
	.index-header-tetx{
		color: #D0D0D0;
		font-size: 24rpx;
	}
    .index-header-img .img{
		display: block;
		border: 2rpx solid rgba(164, 164, 164, 0.32);
		border-radius: 50%;
		overflow: hidden;
		width: 60rpx;
		height: 60rpx;
		box-sizing: border-box;
		margin: 4rpx;
	}
	.index-header-img{
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		margin-right: 20rpx;
		background: #FFFFFF;
	}
    .workSituationpage {
		min-height: 100vh;
		background-color: #f6f6f6;
		box-sizing: border-box;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653464014000_398.png');
		background-position: 0 200rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}
	.index-header-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding:0rpx 42rpx ;
	}
	.index-header-box .index-header-title{
		font-size: 24rpx;
		font-weight: 400;
		color: #B8B8B8;
	}
	.index-header-box .index-header-name{
		font-size: 30rpx;
		font-weight: 800;
		color: #282828;
	}
	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
	
</style>
