<template>
	<view class="analysisTest-box">
        <view class="analysisTest-table-box flex">
            <table
            class="analysisTest-content flex"
            cellspacing="0"
            cellpadding="0"
            >
            <tr class="analysisTest-content-left">
                <th
                v-for="(item, index) in TitleList"
                :key="index"
                width="200" :style="{'height':t==1?'10.325%':'11.8%'}"><text style="width: 100%;text-align: center;">{{item}}</text></th>
            </tr>
            <tr class="analysisTest-content-right">
				<scroll-view scroll-x="true" class="flex" style="width:100%;" :style="{'height':t==1?'627.6rpx':'561.6rpx'}">
                <view style="height: 100%;display: flex;flex-direction: row;flex-wrap: nowrap;" >
                	<template v-for="x in groups">
					<td class="analysisTest-td" :class="{'groups':t==1}" style="min-width: 56rpx;" :style="{'min-width':(item.KnowledgePoint.length*20+20)+'rpx'}" v-for="(item,index) in x.data" :key="index">
                	    <view v-if="t==1" style="position: relative;">
							<view v-if="index==0" style="position: absolute;left: 0px;z-index: 2;" :style="{'width':`${x.w}rpx`}">{{x.key}}</view>
                	    	
                	    </view>
						<view class="analysisTest-number">{{item.Sort}}</view>
                	    <view class="analysisTest-difficulty">						
                			<template v-if="item.Difficulty == '易'"><van-icon name="star" v-for="(s,i) in 1" :key="i"/></template>
                			<template v-else-if="item.Difficulty == '中'"><van-icon name="star" v-for="(s,i) in 2" :key="i"/></template>
                			<template v-else-if="item.Difficulty == '难'"><van-icon name="star" v-for="(s,i) in 3" :key="i"/></template>
                	    </view>
                	    <view class="analysisTest-KnowledgePoint">{{item.KnowledgePoint}}</view>
                	    <view class="analysisTest-ScoreOne">{{item.QScore}}</view>
                	    <view class="analysisTest-ScoreTwo">{{item.Score}}</view>
                	    <view class="analysisTest-scoringRate">{{(item.ScoreRate * 100).toFixed(0)}}%</view>
                	    <view class="analysisTest-TheAverageAcore">{{item.AvgScore.toFixed(1)}}</view>
                	    <view class="analysisTest-averageScoringRate">{{(item.AvgScoreRate * 100).toFixed(0)}}%</view>
                	</td>
					</template>
                </view>
				</scroll-view>
            </tr>
            
        </table>
        </view>
        <view class="analysisTest-hint">
            向<br/>右<br/>滑<br/>动<br/>查<br/>看<br/>更<br/>多
        </view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: ["ScoreList"],
		components: {},
		setup(props) {
			
			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				t:1,//t0为普通的考试信息，1为AB卷
				showPhone: false,
				scores:[],
				groups:[],
				showLogin: true, //多次点击
                TitleList:['分组','题号','难度','知识点','分值','得分','得分率','平均分','平均得分率']
			});
			//伪装数据
			data.scores=props.ScoreList
			data.t=data.scores[0].GroupName==""?0:1
			const groupBy=(array, f)=>{
				const groups = {};        
				array.forEach(function (o) { //注意这里必须是forEach 大写
					const group = JSON.stringify(f(o));
					groups[group] = groups[group] || [];
					groups[group].push(o);
				});
				let result=[]
				Object.keys(groups).map(x=>{
					let tempReuslt={}
					tempReuslt.key=JSON.parse(x)[0]
					tempReuslt.data=groups[x]
					result.push(tempReuslt)
				})
				return result
			}
			
			if(data.t!=1){
				data.TitleList.splice(0,1)
			}
			data.groups=groupBy(data.scores, (item)=>{
				return [item.GroupName];
			});
			data.groups.forEach(x=>{
				let w=0
				x.data.forEach(y=>{
					w+=y.KnowledgePoint.length*20+20
				})
				x.w=w
			})
			return {
				...toRefs(data),
			};
		},
	};
</script>
<style scoped>
    .analysisTest-difficulty van-icon {
      color: #F39801;
      font-size: 24rpx;
    }
    .analysisTest-td view:nth-child(2n){
        background: #FCEEEF;
    }
    .analysisTest-td view:last-child{
        height: 17.4% !important;
    }
	.analysisTest-td.groups view{
		height: 10.325%;
		line-height: 10.325%;
	}
    .analysisTest-td view{
        background: #F7D8DA;
        border-right: 1px solid #F6DDDF;
        height: 11.8%;
        line-height: 11.8%;
        font-size: 20rpx;
        color: #E0A9AC;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .analysisTest-td view.analysisTest-number{
        color: #282828;
    }
    .analysisTest-td{
        width: 100%;
        height: 100%;
    }
    .analysisTest-content-right{
        /* background: red; */
        overflow-x: auto;
    }
    .analysisTest-content-left th:nth-child(2n){
        background: #363636;
    }
    .analysisTest-content-left th{
        background: #282828;
            padding: 0rpx 24rpx;
            height: 11.8%;
            overflow: hidden;
            display: flex;
            align-items: center;
            text-align: center;
    }
	.analysisTest-content-left th:last-child{
		height: 17.4% !important;
	}
    .analysisTest-content-left{
        width: 120rpx;
        border-radius: 35rpx 0 0 35rpx;
        flex-shrink: 0;
        color: #FFFFFF;
        font-size: 22rpx;
        text-align: center;
        overflow: hidden;
        letter-spacing: 1rpx;
    }
    .analysisTest-content tr:first-child th{
        position: sticky;
        left: 0px;
    }
    .analysisTest-content{
        width: 100%;
        border-collapse: collapse;
        box-sizing: border-box;
    }
    .analysisTest-table-box{
        width: 100%;  
    }
    .analysisTest-hint{
        position: absolute;
        right: 0;
        top: 10%;
        width: 77rpx;
        height: 363rpx;
        background: #FFFFFF;
        opacity: 0.33;
        text-align: center;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653551643000_608.png')no-repeat center;
        background-size: auto 100%;
        padding: 80rpx 0 0 22rpx;
        font-size: 26rpx;
    }
    .analysisTest-box{
        position: relative;
    }
</style>
