<template>
	<view class="page-bg">
		<Navigation :title_name="'教育中心'" :isReturn="3" :color="'#000000'" :bgc="'#FFFFFF'" :isCenter="true" />
		<view class="ech" v-if="person.studentList[person.studentActive]">
			<CurrItem v-if="person.studentList[person.studentActive]" :datas="person.studentList[person.studentActive]"
				@changeStu="getChangeStu" :isChange="true" :listLength="person.studentList.length"
				:bgIndex="person.studentActive" />
			<view class="ech-list">
				<view class="time-logo">
					<view class="time-reserve" @tap="reverseSort">排序:按时间 <view class="time-icon"
							:class="showTimeIcon?'dowm-time-icon':'up-time-icon'"></view>
					</view>
				</view>
				<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true"
					class="scrollHeight">
					<template v-if="person.data.list&&person.data.list.length>0">
						<view class="ech-item" v-for="(rep,repIndex) in person.data.list" :key="repIndex">
							<view class="ech-item-type"
								:class="[rep.ExamType==='周考'?'ech-type-blue':rep.ExamType==='月考'?'ech-type-green':rep.ExamType==='期中'?'ech-type-purple':'ech-type-purple']">
								{{rep.ExamType}}
							</view>
							<view class="left">
								<view class="item-tit">{{rep.Name}}</view>
								<view class="time">时间：{{rep.Time}}</view>
							</view>
							<view class="right" @click="lookReport(rep,repIndex)">查看<br />报告</view>
						</view>
						<view class="more_text" v-if="person.showMoreData">没有数据了...</view>
					</template>
					<template v-else>
						<view class="empty_box">
							<image src="@/static/null_icon.png" mode=""></image>
							<text>暂无数据~</text>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
		<view v-else class="empty_box">
			<image src="@/static/null_icon.png" mode=""></image>
			<text>暂无数据~</text>
		</view>
		<Popups :isShow="showChangeStudent" :bgColor="'#fff'">
			<view class="dio-card">
				<view class="stu-item" :class="[person.studentActive===stuIndex?'active-bg':'']"
					v-for="(stu,stuIndex) in person.studentList" :key="stuIndex"
					@click.stop="studentChange(stu,stuIndex)">
					<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode=""></image>
					<view class="stu-name">{{stu.RealName}}</view>
				</view>
			</view>
		</Popups>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import Popups from "@/components/popups/index.vue";
	import CurrItem from "@/components/currItem/index.vue";
	import Navigation from '@/components/navigation/index.vue'
	import {
		getChangeStudent,
		getBindStudentList,
		getUserReportList
	} from "@/api/exam-data";
	import {
		getUserInfo,
		postRegister
	} from "@/api/user";

	let person = reactive({
		showMoreData: false,
		// 学生列表
		studentActive: 0,
		studentList: [],
		// 报告列表
		data: {
			list: [],
			pageIndex: 1,
			pageSize: 10,
			total: 0
		}
	})

	// 刷新页面加载
	onShow(() => {
		person.data.pageIndex=1
		person.data.list=[]
		uni.pageScrollTo({
			scrollTop: 0
		});
		GetBindStudentList()
		if (person.data.pageIndex * person.data.pageSize >= person.data.total) return person.showMoreData = true
	})

	//点击时间排序的互动
	const showTimeIcon = ref(false)
	const reverseSort = () => {
		showTimeIcon.value = !showTimeIcon.value
		if (person.data.list && person.data.list.length > 0) {
			if (showTimeIcon.value) {
				// 降序
				person.data.list = person.data.list.sort(dateData("Time", true))
			} else {
				// 升序
				person.data.list = person.data.list.sort(dateData("Time", false))
			}
		}
	}
	// 时间排序
	const dateData = (property, bol) => {
		return function(a, b) {
			let value1 = a[property];
			let value2 = b[property];
			if (bol) {
				// 升序
				return Date.parse(value1) - Date.parse(value2);
			} else {
				// 降序
				return Date.parse(value2) - Date.parse(value1)
			}
		}
	}

	//关于弹窗出现和关闭
	const showChangeStudent = ref(false)
	const getChangeStu = () => {
		showChangeStudent.value = !showChangeStudent.value
	}

	// 学生切换
	const studentChange = (item, index) => {
		person.studentActive = index
		showChangeStudent.value = false
		if (showChangeStudent.value === false) {
			person.data.pageIndex = 1
			person.data.list = []
			person.data.total = 0
			GetChangeStudent(item.Id)
		}
	}

	//跳转查看报告
	const lookReport = (item, index) => {
		uni.navigateTo({
			url: '/pages/examReport/index?examId=' + item.ExamId
		})
	}

	//触底加载
	const lowerBottom = () => {
		// 判断是否还有下一页数据
		if (person.data.pageIndex * person.data.pageSize >= person.data.total) return person.showMoreData = true
		// 让页码值自增 +1
		person.data.pageIndex += 1
		// 重新获取列表数据
		// 调接口
		GetUserReportList()
	}
	// 下拉刷新 
	const getFresh = () => {}

	// 获取切换学生
	const GetChangeStudent = (Id) => {
		getChangeStudent({
			studentId: Id
		}).then(res => {
			let {
				Code,
				Data
			} = res
			if (Code === 200 && Data) {
				GetUserReportList()
			}
		})
	}
	// 获取绑定的学生列表
	const GetBindStudentList = () => {
		getBindStudentList().then(res => {
			let {
				Code,
				Data,
				Message
			} = res
			if (Code === 200 && Data) {
				person.studentList = Data
				if (person.studentList && person.studentList.length > 0) {
					GetChangeStudent(person.studentList[person.studentActive].Id)
				}
			} else {
				uni.showToast({
					title: Message,
					icon: 'none'
				})
			}
		})
	}
	// 获取学生报告列表
	const GetUserReportList = () => {
		let obj = {
			PageIndex: person.data.pageIndex,
			PageSize: person.data.pageSize
		}
		getUserReportList(obj).then(res => {
			let {
				Code,
				Data,
				Message
			} = res
			if (Code === 200 && Data) {
				setTimeout(() => {}, 200)
				person.data.list = [...person.data.list, ...Data.Data]
				person.data.total = Data.Total
			} else {
				uni.showToast({
					title: Message,
					icon: 'none'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.page-bg {
		height: calc(100vh - 4rpx);
		overflow: hidden;
	}

	// 上拉分页
	.scrollHeight {
		height: calc(100vh - 550rpx);

		.more_text {
			margin: 20rpx 0;
			color: #999;
			font-size: 24rpx;
			text-align: center;
		}
	}

	.ech {
		width: 100vw;
		padding: 10px 20px 0 20px;
		box-sizing: border-box;
		position: relative;
	}

	.ech-card {
		position: absolute;
		z-index: 10;
	}

	.ech-list {
		border-radius: 0 0 10px 10px;
		background: #FFF;
		box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		padding-bottom: 20px;
		margin-top: -15px;

		.ech-item {
			margin: 0 auto 10px auto;
			width: 303px;
			border-radius: 6px;
			background: linear-gradient(180deg, rgba(228, 233, 255, 0.74) 0%, rgba(255, 255, 255, 0.49) 29.69%, rgba(128, 151, 255, 0.67) 100%);
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 20px 10px 20px 10px;
			position: relative;

			.ech-item-type {
				position: absolute;
				top: 0;
				left: 0;
				padding: 2px 20px;
				border-radius: 6px 0 10px 0;
				font-size: 12px;
				font-weight: 600;
			}

			.ech-type-blue {
				color: #4F6FFF;
				background: #E3E8FF;
			}

			.ech-type-green {
				color: #00B6DE;
				background: #C0F4FF;
			}

			.ech-type-purple {
				color: #9361FF;
				background: #E8DEFE;
			}

			.left {
				width: 78%;

				.item-tit {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					color: #5B5B5B;
					font-size: 15px;
					font-weight: 600;
					letter-spacing: 0.78px;
				}

				.time {
					margin-top: 7px;
					height: 20px;
					color: #5E5E5E !important;
					font-size: 12px;
					letter-spacing: 0.6px;
				}
			}
		}
	}


	.time-logo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 10px 0;

		.time-reserve {
			margin-right: 20px;
			height: 15px;
			line-height: 15px;
			color: #777;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			letter-spacing: 0.6px;
			display: flex;
			align-items: center;

			.time-icon {
				margin-left: 5px;
				width: 14px;
				height: 14px;
				background-size: 100% 100%;
			}
		}
	}

	.dowm-time-icon {
		background: url('@/static/education/reverse.png');
	}

	.up-time-icon {
		background: url('@/static/education/reverse_up.png');
	}

	.right {
		width: 50px;
		height: 54px;
		background: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #6B86FF;
		font-family: PingFang SC;
		font-size: 12px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 0.72px;
	}

	.dio-card {
		width: 202px;
		height: 100%;
		overflow: auto;
		max-height: 250px;

		&::-webkit-scrollbar {
			display: none;
		}

		.stu-item {
			width: 100%;
			height: 91px;
			border-radius: 8px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #EFEFEF;
			color: #0D0A0A;

			image {
				width: 68px;
				height: 68px;
				border-radius: 50%;
			}

			.stu-name {
				margin-left: 20px;
				font-size: 16px;
				letter-spacing: 0.9px;
				width: 30%;
				text-align: left;
			}
		}

		.active-bg {
			color: #FFF;
			background: #6B86FF;
		}
	}
</style>