<template>
	<view class="scoreDetailspage" v-if="!Loading">
		<navbar class="navbarSticky" bg="#F6F6F6">
			<view class="scoreDetails-header-box">
				<van-icon class="scoreDetails-header-left" name="arrow-left" @click="back"/>
			</view>
		</navbar>
        <view class="scoreDetails-header flex">
            <view class="scoreDetails-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="scoreDetails-header-tetx">
                <view class="scoreDetails-header-name">
                    {{ExamScore.StuName}}
                </view>
                <view class="scoreDetails-header-title">{{ExamScore.ExamName}}</view>
            </view>
            <view class="scoreDetails-header-num flex">
                <view>总分</view>
                <text>{{ExamScore.TScore}}</text>
            </view>
        </view>
        <view class="scoreDetails-Fraction flex">
           <view class="scoreDetails-Fraction-content flex">
               <view class="scoreDetails-Fraction-img activeOne"></view>
               <view class="scoreDetails-Fraction-num">
                   <view>
                       <text>{{ExamScore.Rank}}</text>
                   </view>
                   <view>排名</view>
               </view>
           </view>
           <view class="scoreDetails-Fraction-content flex">
                <view class="scoreDetails-Fraction-img activeTwo"></view>
                <view class="scoreDetails-Fraction-num">
                    <view>
                        <text>{{(ExamScore.ScoreRate * 100).toFixed(0)}}</text>%
                    </view>
                    <view>得分率</view>
                </view>
            </view>
            <view class="scoreDetails-Fraction-content flex">
                <view class="scoreDetails-Fraction-img activeThree"></view>
                <view class="scoreDetails-Fraction-num">
                    <view>
                        <text>{{(ExamScore.RankRate * 100).toFixed(0)}}</text>%
                    </view>
                    <view>领先度</view>
                </view>
            </view>
        </view>
        <view class="scoreDetails-title flex">
			<text>各小题得分分析考</text>
			<view>(共{{ExamScore.ScoreList.length}}小题)</view>
		</view>
        <analysisTest :ScoreList="ExamScore.ScoreList"></analysisTest>
        <view class="scoreDetails-title flex">
			<text>各板块掌握情况</text>
		</view>
        <view class="index-student-information">
            <penta :ModuleList="ExamScore.ModuleList" v-if="!Loading"></penta>
            <allGraspTheSituation :ModuleList="ExamScore.ModuleList"></allGraspTheSituation>
        </view>
        <view class="scoreDetails-title flex">
            <text>试卷难度分析</text>
        </view>
        <view class="index-student-information">
           <line :DifficultyList="ExamScore.DifficultyList" v-if="!Loading"></line> 
           <dfficultyAnalysis :DifficultyList="ExamScore.DifficultyList"></dfficultyAnalysis>
        </view>
        <view class="scoreDetails-title flex">
            <text>难度掌握情况</text>
        </view>
        <view class="index-student-information">
            <triangle :DifficultyRateList="ExamScore.DifficultyRateList" v-if="!Loading"></triangle>
            <graspTheSituation :DifficultyRateList="ExamScore.DifficultyRateList"></graspTheSituation>
        </view>
	</view>
</template>

<script>
    import analysisTest from '@/components/index/scoreDetails/analysisTest'
    import penta from '@/components/charts/penta'
    import allGraspTheSituation from '@/components/index/scoreDetails/allGraspTheSituation'
    import line from '@/components/charts/line'
    import dfficultyAnalysis from '@/components/index/scoreDetails/dfficultyAnalysis'
    import triangle from '@/components/charts/triangle'
    import graspTheSituation from '@/components/index/scoreDetails/graspTheSituation'
	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,
            analysisTest,
            penta,
            allGraspTheSituation,
            line,
            dfficultyAnalysis,
            triangle,
            graspTheSituation
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				userData: {},
				Msg:{
					ExamId:0,
					StuUId:0
				},
				ExamScore:{},
				Loading :true
			});

			let methods = {
				//获取学生成绩
				getExamStuScore(){
					proxy.$request("/Exam/GetExamStuScoreInfo", data.Msg).then(res => {
						data.ExamScore = res.Data;
						data.Loading = false;
					})
				},
				back() {
					uni.navigateTo({
                        url: '/pages/index/index'
                    });
				},
			};

			onMounted(() => {

			});
			return {
				...toRefs(data),
				...methods,
			};
		},
		onLoad(options){
			this.Msg.ExamId = options.examId;
			this.Msg.StuUId = options.stuUId;
		},
		onShow() {
			this.userData = uni.getStorageSync('userInfo');
			this.getExamStuScore();
		},
		onShareAppMessage() {
			return {
				title: "甲小鹤",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
		onShareTimeline() {
			return {
				title: "甲小鹤",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
	};
</script>

<style scoped>
    .index-student-information{
        min-height: 500rpx;
		background: rgba(255,255,255,.7);
		border-radius: 50rpx;
        padding: 65rpx 0 70rpx 0;
    }
    .scoreDetails-title view{
        font-size: 25rpx;
		color: #ABABAB;
		margin-left: 20rpx;
		padding: 13rpx 0 0 0;
    }
    .scoreDetails-title text{
        font-size: 36rpx;
		font-weight: 800;
		color: #282828;
    }
    .scoreDetails-title{
        margin: 70rpx 50rpx 45rpx 50rpx;
    }
    .scoreDetails-Fraction-num view:last-child{
        font-size: 20rpx;
        color: #EDCFD1;
        margin-top: 5rpx;
        letter-spacing: 1rpx;
    }
    .scoreDetails-Fraction-num view text{
        font-size: 40rpx;
        font-weight: 800;
        font-family: Source Han Sans CN;
        font-style: italic;
        color: #282828;
        margin-right: 10rpx;
    }
    .scoreDetails-Fraction-num view:first-child{
        color: #747474;
        font-size: 20rpx;
    }
    .scoreDetails-Fraction-img.activeThree{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653531754000_932.png')no-repeat center #FFF0F1;
        background-size: 36rpx 36rpx;
    }
    .scoreDetails-Fraction-img.activeTwo{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653531758000_626.png')no-repeat center #FFF0F1;
        background-size: 36rpx 36rpx;
    }
    .scoreDetails-Fraction-img.activeOne{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653531750000_401.png')no-repeat center #FFF0F1;
        background-size: 36rpx 36rpx;
    }
    .scoreDetails-Fraction-img{
        width: 62rpx;
        height: 62rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 19rpx;
        flex-shrink: 0;
    }
    .scoreDetails-Fraction-content{
        align-items: center;
    }
    .scoreDetails-Fraction{
        border-radius: 50rpx;
        background: #FFFFFF;
        padding: 52rpx 48rpx 38rpx 60rpx;
        justify-content: space-between;
        margin: 56rpx 50rpx 0 50rpx;
    }
    .scoreDetails-header-num text{
        font-size: 60rpx;
        font-weight: 800;
    }
    .scoreDetails-header-num view{
        font-size: 26rpx;
        font-weight: 400;
        margin-top: 10rpx;
    }
    .scoreDetails-header-num{
        width: 122rpx;
        height: 122rpx;
        background: #DA2F3E;
        border-radius: 30rpx;
        flex-direction: column;
        color: #FFFFFF;
        flex-shrink: 0;
        text-align: center;
    }
    .scoreDetails-header-title{
        font-size: 50rpx;
        font-weight: 800;
        color: #282828;
    }
    .scoreDetails-header-name{
        font-size: 30rpx;
        font-weight: 400;
        color: #505050;
        letter-spacing: 1rpx;
        margin-bottom: 18rpx;
    }
    .scoreDetails-header-tetx{
        flex-grow: 1;
    }
    .scoreDetails-header-img .img{
        display: block;
		border: 2rpx solid rgba(164, 164, 164, 0.32);
		border-radius: 50%;
		width: 115rpx;
		height: 115rpx;
		box-sizing: border-box;
		margin: 4rpx;
    }
    .scoreDetails-header-img{
        width: 122rpx;
        height: 122rpx;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        background: #FFFFFF;
        margin-right: 30rpx;
    }
    .scoreDetails-header{
        margin: 50rpx 50rpx 0 50rpx;
        align-items: center;
    }
    .scoreDetails-header-left{
        font-size: 40rpx;
    }
	.scoreDetails-header-box{
        padding: 37rpx 31rpx;
    }
    .scoreDetailspage{
        min-height: 100vh;
		background-color: #f6f6f6;
		box-sizing: border-box;
		background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653530983000_409.png');
		background-position: 0 300rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;
    }
	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}
	
</style>
