<template>
    <div class="scatter-container">
		<div v-show="!hasKnowledge" class="analysis-no-data">
			<EmptyData :top="200" :textContent="$t('totalAnalysis.noKnowPointTip')"></EmptyData>
		</div>
		<div v-show='hasKnowledge'>
			<Row>
			    <Col span="12">
			        <span class="component-title">{{$t('totalAnalysis.ka_title1')}}</span>
			        <BasePie pieId="knowPie"></BasePie>
			    </Col>
			    <Col span="12" style="position:relative">
			        <!-- <BaseKnowledgeRadar echartsId="knowPie2"></BaseKnowledgeRadar> -->
					<span class="component-title">{{$t('totalAnalysis.ka_title7')}}</span>
					<BaseRadar echartsId="knowRadar" :classIndex="isAllClasses"></BaseRadar>
			    </Col>
			</Row>
			<Row class-name="base-table-row" v-show="isAllClasses === 0">
			    <!-- 得分率关系表 -->
			    <div>
			        <BaseMyTable :columns="tableColumns"
			                     :tableName="$t('totalAnalysis.ka_title3')"
			                      tableRef="pointScoreRateTable"
			                     :tableDatas="knowledgeData"></BaseMyTable>
			    </div>
			</Row>
			<Divider />
			<ScoreDetails ref="detailsRef" :classIndex="isAllClasses"></ScoreDetails>
		</div>
        
    </div>
</template>

<script>
    import BasePie from '@/components/student-analysis/total/BasePie.vue'
	import BaseRadar from '@/components/student-analysis/total/BaseRadar.vue'
    import BaseKnowledgeRadar from '@/components/student-analysis/total/BaseKnowledgeRadar.vue'
    import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
    import ScoreDetails from '@/view/student-analysis/total-analysis/KnowledgeAnalysis/ScoreDetails.vue'
    export default {
        components: {
            BasePie, BaseKnowledgeRadar, BaseMyTable, ScoreDetails,BaseRadar
        },
        data() {
            return {
				isAllClasses:0,
                isShowPie: true,
                currentBlock: '全部',
				classList:[],
                tableData: [],
                classDatas: [],
                barData: [],
                knowledgeData: [],
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.ka_table_text1'),
                        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.knowledgeData.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', (( isNaN(origin[params.row.name][index]) ? 0 : 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)
				console.log(arr)
                this.knowledgeData = arr
            }

        },
        mounted() {
            if (this.getKnowledgeData && this.hasKnowledge) {
                this.doRender(this.getKnowledgeData)
				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: {
            // 获取最新散点图数据
            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
            },
			
			getAnalysisJson() {
			    return this.$store.state.totalAnalysis.analysisJson
			},
			
			hasKnowledge(){
				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.pointList.length
			}
        },
		
		watch: {
		    getKnowledgeData(val) {
		        if (!val) return
				this.doRender(val)
		    }
		}
    }
</script>

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