<template>
<Navigation :title_name="person.reportInfo.ExamName"
		:isReturn="person.studentId?4:0"
        :color="'#000000'"
        :bgc="'#FFFFFF'"
		:isCenter="false"/>
<view class="page-bg">
	<!-- 用户信息 -->
	<view class="report_user" v-if="person.reportInfo.BaseInfoTitle">
		<view class="report_user_info" v-if="person.reportInfo.BaseInfoTitle.ReachSubjctCount==0&&person.reportInfo.BaseInfoTitle.TargetLevelName=='民办本科'">
			<text>{{person.reportInfo.BaseInfoTitle.UserName}}</text>同学，你本次考试超过专科线，还未达到民办本科线，还需继续努力哟
		</view>
		<view class="report_user_info" v-else>
			<text>{{person.reportInfo.BaseInfoTitle.UserName}}</text>同学，
			你本次考试有<text>{{person.reportInfo.BaseInfoTitle.ReachSubjctCount}}门</text>学科超过<text>
			{{person.reportInfo.BaseInfoTitle.TargetLevelName}}</text>线，
			<template v-if="person.reportInfo.BaseInfoTitle.LowerSubjctCount>0">还有<text>{{person.reportInfo.BaseInfoTitle.LowerSubjctCount}}门</text>未达到{{person.reportInfo.BaseInfoTitle.TargetLevelName}}线，</template>还需继续努力哦！
		</view>
		<view class="report_user_tag flex">
			<view class="report_tag_item flex" v-for="(educa,edIndex) in person.educaList" :key="edIndex">
				<view v-if="person.reportInfo.BaseInfoTitle.TargetLevelName===educa.name" class="tag_item_active">
					<image src="../../static/report/book_icon.png" mode=""></image>
				</view>
				<view class="tag_item_active_txt" v-if="person.reportInfo.BaseInfoTitle.TargetLevelName===educa.name||person.educaActive-1===edIndex">
					{{educa.name}}
				</view>
				<view v-else>{{educa.name}}</view>
			</view>
		</view>
		<view class="report_user_txt">(注: 本结论只针对于本次考试分数分析，<text>仅供参考</text>）</view>
	</view>
	<!-- echarts -->
	<view class="report_echarts">
		<view class="report_rate_title bold">
			{{person.reportInfo.ExamType}} {{dateName}}
		</view>
		<view class="report_echart_cont" style="margin-top: 20rpx;">
			<view class="cont_table" v-if="person.reportInfo.IsJuniorSchool">
			  <view class="table_title">
				  <view class="table_title_txt" style="'width:25%;'">
					<view class="txt_item">类别</view>
					<view class="txt_item">进退步（班/年）</view>
					<view class="txt_item">等级</view>
					<view class="txt_item">原卷</view>
				  </view>
				</view>
				<view class="table_name">
					<view class="table_name_txt" v-for="(tab, taIndex) in person.subjectScore" :key="taIndex">
						<view class="txt_item">{{ tab.SubjectName }}</view>
						<view class="txt_item flex">
							<view class="flex">
								{{ tab.ClassRankingChange }}
								<image v-if="tab.ClassRankingChange<0" src="@/static/report/down_icon.png" mode=""></image>
								<image v-else src="@/static/report/top_icon.png" mode=""></image>
							</view>
							<view class="flex">
								{{'  /  '+tab.GradeRankingChange }}
								<image v-if="tab.GradeRankingChange<0" src="@/static/report/down_icon.png" mode=""></image>
								<image v-else src="@/static/report/top_icon.png" mode=""></image>
							</view>
						</view>
						<view class="txt_item">{{ tab.Score }}</view>
						<view class="txt_item">
							<view class="txt_item_press" v-if="taIndex===0">
								<slider disabled :value="((person.reportInfo.Score/person.reportInfo.TotalSocre)*100).toFixed(2)" activeColor="rgba(0,0,0,0)" block-color="rgba(0,0,0,0)" block-size="1"/>
							</view>
							<view class="txt_item_btn" v-else-if="tab.ExamJoin" @click.stop="seeTest(tab,person.reportInfo)">查看答卷</view>
							<view class="txt_item_red" v-else>缺考</view>
						</view>
					 </view>
				</view>
			</view>
			<view class="cont_table" v-else>
			  <view class="table_title">
				  <view class="table_title_txt" style="'width:25%;'">
					<view class="txt_item">类别</view>
					<view class="txt_item">分数<br/>（个人/年级）</view>
					<view class="txt_item">进退步<br/>（班/年）</view>
					<view class="txt_item">排名<br/>（班/年）</view>
					<view class="txt_item">原卷</view>
				  </view>
				</view>
				<view class="table_name">
					<view class="table_name_txt" v-for="(tab, taIndex) in person.subjectScore" :key="taIndex">
						<view class="txt_item">{{ tab.SubjectName }}</view>
						<view class="txt_item">{{ tab.Score+'/'+tab.GradeScore }}</view>
						<view class="txt_item flex">
							<view class="flex">
								{{ tab.ClassRankingChange }}
								<image v-if="tab.ClassRankingChange<0" src="@/static/report/down_icon.png" mode=""></image>
								<image v-else src="@/static/report/top_icon.png" mode=""></image>
							</view>
							<view class="flex">
								{{'  / '+tab.GradeRankingChange }}
								<image v-if="tab.GradeRankingChange<0" src="@/static/report/down_icon.png" mode=""></image>
								<image v-else src="@/static/report/top_icon.png" mode=""></image>
							</view>
						</view>
						<view class="txt_item">{{ tab.ClassRanking+'/'+tab.GradeRanking }}</view>
						<view class="txt_item">
							<view class="txt_item_press" v-if="taIndex===0">
								<slider disabled :value="((person.reportInfo.Score/person.reportInfo.TotalSocre)*100).toFixed(2)" activeColor="rgba(0,0,0,0)" block-color="rgba(0,0,0,0)" block-size="1"/>
							</view>
						    <view class="txt_item_btn" v-else-if="tab.ExamJoin" @click.stop="seeTest(tab,person.reportInfo)">查看答卷</view>
						    <view class="txt_item_red" v-else>缺考</view>
						</view>
					 </view>
				</view>
			</view>
		</view>
		<view class="report_echart_cont" v-if="person.studentScore && person.studentScore.length > 0&&person.reportInfo.BaseInfoTitle.UserName">
			<PublicLine v-if="person.studentScore && person.studentScore.length > 0&&person.reportInfo.BaseInfoTitle.UserName" :id="'studentGrade'"
			  :datas="person.studentScore" :studentName="person.reportInfo.BaseInfoTitle.UserName" />
		</view>
	</view>
	<view v-if="person.testInfo">
		<view class="report_echarts">
			<view class="report_echart_cont">
				<view class="report_rate_title bold">
					{{person.testInfo.IntroTitle}}
				</view>
				<view class="report_ccc">{{person.testInfo.IntroDesc}}</view>
				<view class="report_blue">{{person.testInfo.IntroFooter}}</view>
			</view>
			<view class="report_echart_cont">
				<view class="report_rate_title bold">
					学习力测评
				</view>
				<view class="report_rate_score">{{person.testInfo.ReportName}}测评报告</view>
				<view class="report_rate_info">
					姓名：<text class="report_blue" v-if="person.reportInfo.BaseInfoTitle">{{person.reportInfo.BaseInfoTitle.UserName}}</text>
					学校：<text class="report_blue">{{person.testInfo.schoolName}}</text><br/>
					测评时间：<text class="report_blue">{{person.testInfo.ReportTime}}</text>
				</view>
				<PublicGauge v-if="person.testInfo.Score" :Title="person.testInfo.ReportName" :percentage="person.testInfo.Score" :rate="person.testInfo.exceedRate" />
			</view>
		</view>
		<!-- 领取报告 -->
		<view class="report_receive">
			<view class="report_receive_des">
				<view class="report_blue" v-if="person.reportInfo.BaseInfoTitle">
					{{person.reportInfo.BaseInfoTitle.UserName}}同学本月参加了学习能力测评——{{person.testInfo.ReportName}}测评
				</view>
				<view>
					{{person.testInfo.ReportName}}测评：得分<text>{{person.testInfo.Score}}</text>分，超过<text>{{person.testInfo.exceedRate}}%</text>的同龄孩子
				</view>
				<view>
					考试成绩：
					<template v-if="person.reportInfo.IsJuniorSchool">
						等级{{person.subjectScore[0].Score}}
					</template>
					<template v-else>
						总分<text>{{person.reportInfo.TotalSocre}}</text>分，排名<text>{{person.reportInfo.TotalRanking}}</text>名
					</template>
				</view>
				<view class="mar-top" v-if="person.testInfo.levelDescription">
					<view class="receive_des_title">根据学习能力测评和考试成绩综合分析：</view>
					<view class="receive_des">
						{{person.testInfo.levelDescription}}
					</view>
				</view>
				<view v-if="person.testInfo.methodDescription">
					<view class="receive_des_title">建议您对孩子采用以下训练方法：</view>
					<view class="receive_des">
						{{person.testInfo.methodDescription}}
					</view>
				</view>
			</view>
			<view class="report_receive_btn flex">
				<text @click="receiveReport">领取完整报告及训练工具</text>
			</view>
			<Popups :isShow="person.IsReceiveReport" :width="280" :height="360" :bgColor="'#6B86FF'">
				<view class="p_cont">
					<view class="popup_cont_title">
						领取报告
					</view>
					<view class="popup_cont_pic" >
						<image :show-menu-by-longpress="true" :src="person.cusSerInfo.EQImgUrl" mode=""></image>
					</view>
					<view class="popup_cont_des">
						长按屏幕识别上方二维码
					</view>
					<view class="popup_list">
						<view class="popup_item flex">
							<text>客服电话</text>
							<text>{{person.cusSerInfo.ServiceNumber}}</text>
						</view>
						<view class="popup_item flex">
							<text>教师电话</text>
							<text>{{person.cusSerInfo.TeacherNumber}}</text>
						</view>
					</view>
				</view>
			</Popups>
		</view>
		<!-- 测评进度 -->
		<view class="report_rate">
			<view class="report_rate_title bold">
				测评进度<text>（注:蓝色表示已完成）</text>
			</view>
			<view class="report_rate_list">
				<view class="report_rate_item" :class="[rate.Score>0?'report_rate_blue':'']" v-for="(rate,raIndex) in person.testInfo.reports" :key="raIndex">
					{{rate.ReportName}}
				</view>
			</view>
		</view>
	</view>
	<view v-else class="lock_box">
		<image src="@/static/report/lock_icon.png" mode=""></image>
		您的孩子未完成测评<br/>
		完成后解锁报告
	</view>
</view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app";
import PublicLine from "@/components/echarts/publicLine.vue"
import PublicGauge from "@/components/echarts/publicGauge.vue"
import Popups from "@/components/popups/index.vue";
import Navigation from '@/components/navigation/index.vue'
import { getChangeStudent, getUserReportDetails, getTestReportData, getTestInfo } from "@/api/exam-data";
import {postRegister,getUserInfo} from "@/api/user";
let person=reactive({
	// 学历
	educaActive:0,
	educaList:[
		{name:'专科'},
		{name:'民办本科'},
		{name:'公办本科'},
		{name:'211'},
		{name:'985'},
		{name:'C9'}
	],
	subjectScore:[], // 学生各科成绩
	studentScore:[], // 学生总成绩
	IsReceiveReport:false, // 是否领取报告
	reportInfo:{}, // 考试报告信息
	testInfo:null, // 测评报告信息
	cusSerInfo:{}, // 客服信息
	examId:0, // 获取考试Id
	studentId:0 // 获取学生Id
})

onLoad((e)=>{
	// e 获取路由参数
	person.examId=e.examId
	person.studentId=e.studentId
})
// 初始化加载
onShow(async ()=>{
	if(person.studentId){
		GetChangeStudent(person.studentId)
	}else{
		await GetUserReportDetails()
		await GetTestReportData()
	}
	if(person.reportInfo.ExamName){
		uni.setNavigationBarTitle({
			title: person.reportInfo.ExamName
		})
	}
})
// 查看试卷
const seeTest=(item,info)=>{
	if(item.ExamJoin){
		if(item.ExamSubjectId>0){
			let infos={
				examName:info.ExamName,
				userName:info.BaseInfoTitle.UserName,
				totalScore:info.IsJuniorSchool?'等级'+item.Score:item.Score+'分',
				subject:item.SubjectName,
				baseScore:item.BaseScore,
				isJuniorSchool:info.IsJuniorSchool
			}
			uni.navigateTo({
				url:'/pages/examTest/index?Id='+item.ExamSubjectId+'&info='+JSON.stringify(infos)
			})
		}
	}
}
// 领取报告
const receiveReport=()=>{
	person.IsReceiveReport=!person.IsReceiveReport
	if(!person.cusSerInfo.EQImgUrl){
		GetTestInfo()
	}
}

// 获取切换学生
const GetChangeStudent = (Id) => {
	getChangeStudent({studentId: Id}).then(res => {
		let { Code, Data } = res
		if (Code === 200 && Data) {
			GetUserReportDetails()
			GetTestReportData()
		}
	})
}
const dateName=ref('')
// 获取学生报告列表接口
const GetUserReportDetails = () => {
	if(person.examId){
		uni.showLoading({title: '加载中'});
		getUserReportDetails({examId: person.examId}).then(res => {
			let { Code, Data, Message } = res
			if(Code===200&&Data){
				setTimeout(()=>{
					uni.hideLoading();
				},100)
				let { BaseInfo, ExamRecord, Study, Subjects }=res.Data
				person.reportInfo = BaseInfo
				dateName.value=person.reportInfo.StartTime.replace('-','年').replace('-','月')+'日'
				person.studentScore = ExamRecord
				person.subjectScore = Subjects
				person.educaActive = person.educaList.findIndex(f=>{return f.name===BaseInfo.BaseInfoTitle.TargetLevelName})
			}else{
					uni.hideLoading();
					uni.showToast({
						title: Message,
						icon: 'none'
					})
			}
		})
	}
}
// 获取测评报告接口
const GetTestReportData = () => {
	getTestReportData({examId: person.examId}).then(res => {
		let { Code, Data, Message } = res
		if(Code===200&&Data){
			person.testInfo=Data
		}
	})
}
// 获取评测客服信息接口
const GetTestInfo = () => {
	getTestInfo().then(res => {
		let { Code, Data, Message } = res
		if(Code===200&&Data){
			person.cusSerInfo=Data
		}
	})
}
</script>

<style lang="scss" scoped>
.page-bg{
	padding-bottom: 40rpx;
}
.lock_box{
	height: 500px;
	background-image: radial-gradient(#6b84f4 0, #d3d5de 100%);
	color: #fff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin: 32rpx;
	font-size: 30rpx;
	image{
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto 20rpx auto;
	}
}
.cont_table{
	.table_title{
		font-size: 26rpx;
		.table_title_txt{
			display: flex;
			text-align: center;
			color: #6471AC;
			font-weight: 600;
			border-right: 2rpx solid #fff;
			border-bottom: 2rpx dotted #8093d7;
			padding: 20rpx 0rpx;
			white-space: nowrap;
			.txt_item{
				width: 25%;
				line-height: 35rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

			}
		}
    }
	.table_name{
		font-size: 26rpx;
		text-align: center;
		.table_name_txt{
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 70rpx;
			.txt_item{
				width: 25%;
				height: 70rpx;
				overflow: hidden;
				color: #6F6F70;
				justify-content: center;
				white-space: nowrap;
				image{
					width: 20rpx;
					height: 20rpx;
				}
				:deep(.txt_item_press){
					uni-slider{
						.uni-slider-handle-wrapper{
							width: 120rpx;
							height: 20rpx;
							background-image: linear-gradient(to right, #DBE1FF, #6B86FF);
						}
						.uni-slider-thumb{
							background: rgba(0,0,0,0) !important;
							border-radius: 0;
							box-shadow: inherit !important;
							top: 28rpx;
							transform: rotate(180deg);
							&::after{
								content: "";
								width: 0 !important;
								height: 0 !important;
								border-style: solid;
								border-width: 0rpx 12rpx 12rpx 12rpx;
								border-color: transparent transparent #6B86FF transparent;
								border-radius: 0;
							}
						}
						.uni-slider-track{
							background: rgba(0,0,0,0) !important;
						}
						.uni-slider-wrapper {
							justify-content: center;
						}
						.uni-slider-tap-area{
							flex: inherit;
						}
					}

				}
				.txt_item_btn{
					color: #6B86FF;
				}
				.txt_item_red{
					color: red;
				}
			}
		}
    }
}
:deep(.txt_item_press){
	wx-slider{
		border-radius: 40rpx;
		width: 85% !important;
		height: 20rpx !important;
		background-image: linear-gradient(to right, #DBE1FF, #6B86FF) !important;
		margin: 30rpx auto 0 auto;
		border: 0;
		.wx-slider-handle{
			width: 1px;
			height: 1px;
			margin-top: -20rpx;
			position: relative;
			transform: rotate(180deg);
			border: 0;
			&::before{
				position: absolute;
				left: -45rpx;
				content: "";
				width: 0 !important;
				height: 0 !important;
				border-style: solid;
				border-width: 0rpx 12rpx 12rpx 12rpx;
				border-color: transparent transparent #6B86FF transparent;
				border-radius: 0;
			}
		}
		.wx-slider-handle-wrapper{
			height: 0;
		}
		.wx-slider-thumb{
			box-shadow: inherit !important;
		}
	}
}

.report_user{
	border-top: 2rpx solid #eee;
	background: #ffffff;
	padding: 32rpx;
	margin: 0 0 40rpx 0;
	.report_user_info{
		color: #4A4A4A;
		font-size: 30rpx;
		text-indent: 2em;
		text{
			color: #FFA066;
		}
	}
	.report_user_tag{
		background-image: linear-gradient(to right, #DBE1FF, #6B86FF);
		padding: 32rpx;
		border-radius: 20rpx;
		margin: 20rpx 0;
		justify-content: space-between;
		.report_tag_item{
			color: #ffffff;
			font-size: 22rpx;
			white-space: nowrap;
			text-align: center;
			justify-content: center;
			&:last-child{
				margin-right: 0;
			}
			.tag_item_active_txt{
				font-size: 28rpx;
				font-weight: 600;
			}
			.tag_item_active{
				position: relative;
				// &::before{
				// 	position: absolute;
				// 	top: 18rpx;
				// 	left: -32rpx;
				// 	content: "";
				// 	width: 0 !important;
				// 	height: 0 !important;
				// 	border-style: solid;
				// 	border-width: 0rpx 10rpx 18rpx 10rpx;
				// 	border-color: transparent transparent #fff transparent;
				// 	border-radius: 0;
				// }
				image{
					position: absolute;
					top: -14rpx;
					left: -42rpx;
					width: 28rpx;
					height: 26rpx;
				}
			}
			
		}
	}
	.report_user_txt{
		color: #FF0000;
		font-size: 24rpx;
		text-align: right;
		text{
			font-size: 26rpx;
			font-weight: 600;
		}
	}
}
.report_echarts{
	margin: 0 32rpx;
	.report_echart_cont{
		border-radius: 20rpx;
		background: #ffffff;
		margin-top: 40rpx;
		padding: 30rpx 30rpx;
		line-height: 60rpx;
		font-size: 28rpx;
	}
	:deep(.cont_table){
		.uni_table{
			.uni-tr{
				width: 100%;
				border: 1px solid red;
			}
		}
	}
}
.report_receive{
	margin: 30rpx 30rpx;
	.report_receive_des{
		font-size: 30rpx;
		color: #736F6D;
		line-height: 45rpx;
		.mar-top{
			margin-top: 40rpx;
		}
		.receive_des_title{
			font-weight: 600;
		}
		.receive_des{
			text-indent: 2em;
		}
		text{
			color: #FFA755;
		}
	}
	.report_receive_btn{
		justify-content: center;
		margin-top: 60rpx;
		text{
			background: #6B86FF;
			color: #ffffff;
			border-radius: 40rpx;
			font-size: 30rpx;
			padding: 20rpx 100rpx;
			text-align: center;
			letter-spacing: 4rpx;
		}
	}
	.p_cont{
		color: #fff;
		font-size: 28rpx;
		.popup_cont_title{
			font-size: 38rpx;
			font-weight: 600;
		}
		.popup_cont_pic{
			margin: 40rpx auto 20rpx auto;
			background: #fff;
			width: 380rpx;
			height: 380rpx;
			border-radius: 30rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.popup_cont_des{
			color: #fff;
		}
		.popup_list{
			padding: 0rpx 20rpx;
			margin-top: 70rpx;
			.popup_item{
				justify-content: space-between;
				padding: 12rpx 0;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.21);
				&:last-child{
					border-bottom: 0;
				}
			}
		}
	}
}
.report_rate_score{
	font-size: 30rpx;
	white-space: nowrap;
	line-height: 38rpx;
	margin: 30rpx 0;
	.score_blue{
		color: #152FA0;
	}
	text{
		font-size: 28rpx;
	}
}
.report_rate_info{
	font-size: 28rpx;
	line-height: 38rpx;
	margin-bottom: 28rpx;
	text{
		margin-right: 40rpx;
	}
}
.report_rate_title{
	font-size: 32rpx;
	text{
		font-size: 24rpx;
		font-weight: 400;
	}
}
.report_ccc{
	color: #787878;
}
.report_blue{
	color: #6B86FF;
}
.report_orange{
	color: #FFA755;
}
.report_rate{
	margin: 0 32rpx;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 20rpx;
	.report_rate_list{
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		.report_rate_item{
			margin-top: 20rpx;
			margin-right: 30rpx;
			white-space: nowrap;
		}
		.report_rate_blue{
			color: #6B86FF !important;
		}
	}
}
</style>