<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">{{item}}</th>
            </tr>
            <tr class="analysisTest-content-right flex">
                <td class="analysisTest-td" style="min-width: 56rpx;" :style="{'min-width':(item.KnowledgePoint.length*20+20)+'rpx'}" v-for="(item,index) in ScoreList" :key="index">
                    <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>
            </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() {

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                TitleList:['题号','难度','知识点','分值','得分','得分率','平均分','平均得分率']
			});
			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%;
    }
    .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: 18rpx 24rpx;
    }
    .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>
