<template>
	<view class="graspTheSituation-box flex">
        <view class="graspTheSituation-title flex">
            <view v-for="(T,index) in TitleList" :key="index">{{T}}</view>
        </view>
        <view class="graspTheSituation-content flex">
            <view class="graspTheSituation-num flex" v-for="(item,index) in DifficultyRateList" :key="index">
                <text>{{item.Difficulty}}</text>
                <text>{{(item.ScoreRate * 100).toFixed(0)}}<text>%</text></text>
                <text>{{(item.AvgScoreRate * 100).toFixed(0)}}<text>%</text></text>
            </view>
        </view>
        
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

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

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                TitleList:['题目难度','个人得分率','平均得分率'],
                letftTitleList:['简单题','中档题','难题']
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
<style scoped>
    .graspTheSituation-num text text{
        margin-left: 10rpx;
    }
    .graspTheSituation-num text:first-child{
        font-size: 20rpx;
        font-weight: 400;
        font-style: initial;
    }
    .graspTheSituation-num text{
        flex: 0 0 33.33%;
        text-align: center;
    }
    .graspTheSituation-num:last-child{
        margin-bottom: 47rpx;
    }
    .graspTheSituation-num{
        flex: 1;
        font-size: 36rpx;
        font-weight: 800;
        font-style: italic;
        color: #282828;
        align-items: center;
        margin-top: 40rpx;
    }
    .graspTheSituation-content{
        flex-direction: column; 
    }
    .graspTheSituation-title view:first-child{
        font-weight: bold;
        color: #282828;
    }
    .graspTheSituation-title view{
        flex: 0 0 33.33%;
        color: #A1A1A1;
    }
    .graspTheSituation-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;
    }
    .graspTheSituation-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>
