<template>
    <div class="scatter-container">
        <Row>
            <Col span="12">
                <span class="component-title">{{$t('totalAnalysis.le_title1')}}</span>
                <BasePie pieId="levelPie"></BasePie>
            </Col>
            <Col span="12" style="position:relative">
                <!-- <BaseLevelRadar echartsId="levelPie2" v-if="isShowPie"></BaseLevelRadar> -->
				<span class="component-title">{{$t('totalAnalysis.le_title7')}}</span>
				<BaseRadar echartsId="levelRadar" :classIndex="isAllClasses"></BaseRadar>
            </Col>
        </Row>
        <Row class-name="base-table-row"  v-show="isAllClasses === 0">
                <BaseMyTable :columns="tableColumns"
                             :tableName="$t('totalAnalysis.le_title3')"
                              tableRef="levelScoreRateTable"
                             :tableDatas="levelData"></BaseMyTable>
        </Row>
        <Divider />
        <ScoreDetails ref="detailsRef" :classIndex="isAllClasses"></ScoreDetails>
    </div>
</template>

<script>
	import BaseRadar from '@/components/student-analysis/total/BaseRadar.vue'
    import BasePie from '@/components/student-analysis/total/BaseLevelPie.vue'
    import BaseLevelRadar from '@/components/student-analysis/total/BaseLevelRadar.vue'
    import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
    import ScoreDetails from '@/view/student-analysis/total-analysis/LevelAnalysis/ScoreDetails.vue'
    export default {
        components: {
            BasePie,BaseRadar, BaseLevelRadar, BaseMyTable, ScoreDetails
        },
        data() {
            return {
				isAllClasses:0,
                isShowPie: true,
                currentBlock: '全部',
                tableData: [],
                classDatas: [],
                barData: [],
                levelData: [],
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.ka_table_text2'),
                        key: 'name',
                        width: 200
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text3'),
                        key: 'gradeRate',
                        sortable: true,
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.gradeRate)).toFixed(2) + '%')
                        },
                        width: 150
                    }
                ]
            }
        },
        created() {
            this.isShowPie = !(this.levelData.length > 10)
			this.$parent.$parent.$parent.isShowQuestions = false
        },

        methods: {
            renderClassColumns(classData,origin) {
				let classColumns = []
                // 渲染得分率关系表格的班级数据
            	classData.classes.forEach((item,index) => {
            	    let classColumn = {
            	        title: item.className,
            	        sortable: 'custom',
            	        key: item.className,
            	        renderType: (h, params) => {
            	            return h('span', ((Number(origin[params.row.name][index]))).toFixed(2) + '%')
            	        },
            	        minWidth: 150
            	    }
            	    classColumns.push(classColumn)
            	})
				
				// 清除之前的科目columns 添加当前评测的科目columns
				this.tableColumns.splice(2,this.tableColumns.length - 2,...classColumns)
            },

            changePieOrBar() {
                this.isShowPie = !this.isShowPie
            },

            doRender(data) {
                let origin = data.classpercent
                let pointList = data.pointList
                let arr = []
                for (let i = 0; i < pointList.length; i++) {
                    let o = {}
                    o.name = pointList[i]
                    o.gradeRate = data.stupercent.grade[i]
                    for (let j = 0; j < origin.className.length; j++) {
                        o[origin.className[j]] = origin[pointList[i]][j]
                    }
                    arr.push(o)
                }
                this.renderClassColumns(this.getAnalysisJson,origin)
                this.levelData = arr
            }

        },
        mounted() {
            if (this.getLevelData) {
                this.doRender(this.getLevelData)
				this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(this.getAnalysisJson.classes.map(item => item.className))]) // 获取班级列表
            }
			
			this.isAllClasses = this.$store.state.totalAnalysis.curClassIndex + 1
			
			this.$EventBus.$off('changeClassName')
			this.$EventBus.$on('changeClassName', val => {
				this.isAllClasses = this.classList.indexOf(val)
			})
        },

        computed: {
            // 获取最新散点图数据
            getLevelData() {
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let levelJson = this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].levelKey
				let transArr = this.$GLOBAL.EXERCISE_LEVELS()
				levelJson.pointList = levelJson.pointList.map((i,index) => transArr[index])
				for(let key in levelJson.classpercent){
					if(!isNaN(key)){
						let newKey = transArr[+key - 1]
						levelJson.classpercent[newKey] = levelJson.classpercent[key]
						levelJson.stupercent[newKey] = levelJson.stupercent[key]
					}
				}
				return levelJson
            },
			getAnalysisJson() {
			    return this.$store.state.totalAnalysis.analysisJson
			},
			getKnowledgeData() {
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
			    return this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].pointKey
			},
        },
        watch: {
            getKnowledgeData(val) {
                if (!val) return
        		this.doRender(this.getLevelData)
            }
        }
    }
</script>

<style src="./LevelAnalysis.css" scoped></style>
