<template>
	<view class="allGraspTheSituation-box flex">
        <view class="allGraspTheSituation-title flex">
            <view v-for="(T,index) in TitleList" :key="index">{{T}}</view>
        </view>
        <view class="allGraspTheSituation-content flex">
            <view class="allGraspTheSituation-num flex" v-for="(item,index) in ModuleList" :key="index">
                <text class="name">{{item.Module}}</text>
                <text class="Score">{{item.Score}}</text>
                <text class="ScoreRate"
                :class="item.ScoreRate<0.5?'failed':
                (item.ScoreRate==1?'fullScore':'')">{{(item.ScoreRate * 100).toFixed(0)}}<text>%</text></text>
                <text class="AvgScoreRate">{{(item.AvgScoreRate * 100).toFixed(0)}}<text>%</text></text>
            </view>
            
        </view>
        
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			ModuleList:[]
		},
		components: {},
		setup() {

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                TitleList:['考点','分数','个人得分率','平均得分']
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
<style scoped>
    .allGraspTheSituation-num .ScoreRate.failed{
        color: #EE8790;
    }
    .allGraspTheSituation-num .ScoreRate.failed text{
        color: #EE8790;
    }
    .allGraspTheSituation-num .ScoreRate.fullScore{
        color: #4AC698;
    }
    .allGraspTheSituation-num .ScoreRate.fullScore text{
        color: #4AC698;
    }
    .allGraspTheSituation-num text text{
        font-size: 20rpx;
        margin-top: 10rpx;
        margin-left: 5rpx;
    }
    .allGraspTheSituation-num text{
        flex: 0 0 25%;
        font-size: 36rpx;
        font-weight: 800;
        font-style: italic;
    }
    .allGraspTheSituation-num .name{
        font-size: 20rpx;
        font-style: inherit;
        font-weight: 400;
        color: #282828;
    }
    .allGraspTheSituation-num:last-child{
        margin-bottom: 44rpx;
    }
    .allGraspTheSituation-num{
        flex: 1;
        color: #282828;
        font-weight: 400;
        flex-direction: row;
        align-items: center;
        margin-top: 41rpx;
    }
    .allGraspTheSituation-content{
        flex-direction: column;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        color: #282828;
    }
    .allGraspTheSituation-title view:first-child{
        font-weight: bold;
        color: #282828;
    }
    .allGraspTheSituation-title view{
        flex: 0 0 25%;
        color: #A1A1A1;
    }
    .allGraspTheSituation-title{
        flex-shrink: 0;
        font-size: 20rpx;
        font-weight: 400;
        color: #282828;
        padding: 41rpx 0 21rpx 0;
        border-bottom:2rpx solid #EDEDED;
        text-align: center;
    }
    .allGraspTheSituation-box{
        margin: 30rpx 50rpx 0 50rpx;
        background: #FFFFFF;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 30px;
        flex-direction: column;
    }
</style>
