<template>
    <div class="achievement-container">
        <!-- 及格率统计 -->
		<Row>
            <span class="component-title" style="margin-top:40px">{{$t('totalAnalysis.ach_title1')}}</span>
        </Row>
        <Row class-name="component-percents">
			<div v-for="(item,index) in passRate" :key="index">
				<div class="percent-item" v-if="isAllSubject || (!isAllSubject && curSubjectIndex === (index - 1))">
				    <div class="fl-col-center" >
				        <span class="percent-name">{{item.name}}</span>
				        <span class="percent-value"><span class="percent-line" :style="{background:colorList[index]}"></span>{{item.sRate}} <span style="font-size: 22px;">%</span></span>
						<div style="margin-left: 30px;">
							<p>{{ $t('totalAnalysis.echarts_text15') }}：{{item.average.toFixed(1)}} </p>
							<p>{{ $t('totalAnalysis.ach_table_text4') }}：{{item.standard.toFixed(1)}}</p>
						</div>
				    </div>
				</div>
			</div>
            
        </Row>
		
        <Row>
			<Col span="12">
				<span class="component-title">{{$t('totalAnalysis.ach_title2')}}</span>
				<BaseBar :echartsData="baseBarData" :subjectIndex="curSubjectIndex" ref="baseBar"></BaseBar>
			</Col>
			<Col span="12">
				<div v-if="isAllSubject">
					<span class="component-title">{{$t('totalAnalysis.ach_title3')}}</span>
					<BaseEntryBar :echartData="classDatas" echartsId="entryNumberBar"></BaseEntryBar>
				</div>
				<div v-else>
					<span class="component-title">{{$t('totalAnalysis.scoreRate')}}</span>
					<BaseScoreRateBar echartsId="sRateBar1" :subjectIndex="curSubjectIndex" :echartsData="getAnalysisJson.students"></BaseScoreRateBar>
				</div>
			</Col>
			<!-- <Col span="8">
				<span class="component-title">{{$t('totalAnalysis.ach_title3')}}</span>
				<BaseScoreRateBar></BaseScoreRateBar>
			</Col> -->
        </Row>
		
		<Row></Row>
		<Row v-if="isAllSubject">
			<Col span="12">
				<span class="component-title">{{$t('totalAnalysis.scoreRate')}}</span>
				<BaseScoreRateBar echartsId="sRateBar11" :echartsData="getAnalysisJson.students"></BaseScoreRateBar>
			</Col>
			<Col span="12">
				
			</Col>
		</Row>
		<!-- 进线情况统计 -->
        <EntryTables ref="entryTable" :subjectIndex="curSubjectIndex"></EntryTables>
    </div>
</template>

<script>
    import BaseBar from '@/components/student-analysis/total/BaseBar'
    import BaseEntryBar from '@/components/student-analysis/total/BaseEntryBar.vue'
    import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
    import EntryTables from '@/view/student-analysis/total-analysis/AchievementAnalysis/EntryTables.vue'
    import BaseScoreRateBar from '@/components/student-analysis/total/BaseScoreRateBar.vue'
    export default {
        components: {
            BaseBar, BaseEntryBar, BaseTable, EntryTables,BaseScoreRateBar
        },
        data() {
            return {
                passRate: [],
                subjectList: [],
                colorList: ['#ff6b68', '#ffa1f4', '#41b0c7', '#1cd1a1', '#83dc07'],
                earlyWarningData: [],
                baseBarData: null,
                classDatas: [],
				isAllSubject:true,
				curSubjectIndex:NaN,
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.base_class'),
                        key: 'classId',
                        renderType: 'renderClassName',
                    },
                    {
                        title: this.$t('totalAnalysis.ach_text7'),
                        sortable: 'custom',
                        key: 'totalNum'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text3'),
                        key:'average',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.average)).toFixed(2))
                        },
                        sortable: 'custom'
                    },
                    {
                        title: this.$t('totalAnalysis.ach_table_text4'),
                        key: 'standardDeviation',
                        sortable: 'custom'
                    },
                    // {
                    //     title: this.$t('totalAnalysis.ach_table_text5'),
                    //     key: 'overAverageRate',
                    //     sortable: 'custom'
                    // },
                    {
                        title: this.$t('totalAnalysis.ach_table_text1'),
                        key: 'gradeRank',
                        sortable: 'custom',
                        renderType: function(h, params) {
                            const row = params.row
                            return h('span', {
                                domProps: {
                                    className: 'badge-wrap'
                                }
                            }, [
                                h('span', {
                                    domProps: {
                                        className: 'table-rank-badge'
                                    },
                                    style: {
                                        color: row.changesStatus === 1 ? '#0ccb0c' : '#ff5d5d'
                                    }
                                }, (row.changesStatus === 1 && row.changesVal !== 0) ? '+' + row.changesVal : (row.changesStatus === -1 && row.changesVal !== 0) ? '-' + row.changesVal : ''),
                                h('span', {
                                    domProps: {
                                        className: 'table-rank-value'
                                    }
                                }, row.gradeRank)

                            ]
                            )
                        }
                    }
                ]
            }
        },

        created() {
            this.$parent.$parent.$parent.isShowQuestions = false
        },
        methods: {
			/* 获取成绩分析模块 -- 及格率统计数据 */
			getPassRate(analysisJson){
				console.log(analysisJson)
				let result = [{
					name: this.$t('totalAnalysis.allSubjects'),
					average:analysisJson.all.average,
					sRate:analysisJson.all.sRate,
					standard:analysisJson.all.standard
				}]
				analysisJson.subjects.forEach((item,index) => {
					let o = {}
					o.name = item.name
					let classAverage = 0
					analysisJson.classes.forEach((classItem,classIndex) => {
						classAverage += classItem.subjects[index].passPercent
					})
					result.push({
						name:item.name,
						average:item.average,
						sRate:item.sRate,
						standard:item.standard
					})
				})
				return result
			},
			
			/* 获取成绩分西-预警统计表格数据 */
			getEarlyWarningData(analysisJson){
				let result = []
				analysisJson.classes.forEach((item,index) => {
					result.push({
						classId:item.className,
						totalNum:item.stuCount,
						average:item.totalAverage,
						standardDeviation:item.standardDeviation.toFixed(2),
						overAverageRate:0,
						gradeRank:0
					})
				})
				
				let rateRanks = result.sort((a, b) => { return Number(a.average) - Number(b.average) })
				result.forEach(item => {
					item.gradeRank = rateRanks.map(i => i.classId).indexOf(item.classId) + 1
				})
				return result
			},
			
			
			
			
			
        },
        mounted() {
            this.$parent.dataSelectIndex = 0
            // this.$refs.achievementTable.$el.childNodes[1].style.borderRight = '0'
			
			

            // 如果有缓存的数据 则读取缓存数据
            if (this.getAnalysisJson) {
                this.earlyWarningData = this.getEarlyWarningData(this.getAnalysisJson)
                this.subjectList = this.getAnalysisJson.classes.subjects
                this.passRate = this.getPassRate(this.getAnalysisJson)
				console.log('achievement页面接收的JSON',this.getAnalysisJson)
            }else if(localStorage.getItem('curExam')){
				console.log('没有')
				let item = JSON.parse(localStorage.getItem('curExam'))
				this.$store.dispatch('getAnalysisJson',{
					code:item.code.replace('Exam-',''),
					id:item.id
				}).then(res => {
					this.earlyWarningData = this.getEarlyWarningData(this.getAnalysisJson)
					this.subjectList = this.getAnalysisJson.classes.subjects
					this.passRate = this.getPassRate(this.getAnalysisJson)
					console.log('achievement页面接收的JSON',this.getAnalysisJson)
				})
			}
			this.$EventBus.$off('onExport')
            this.$EventBus.$on("onExport", exportTables => {
                console.log(exportTables)
                if (exportTables.indexOf('achievementTable') > -1) {
                    this.$refs.achievementTable.exportData(3)
                }
            })
			
			
			this.$EventBus.$off('onEarlySubjectChange')
			this.$EventBus.$on('onEarlySubjectChange', index => {
				if(index === 0){
					this.isAllSubject = true
					this.curSubjectIndex = NaN
				}else{
					this.isAllSubject = false
					this.curSubjectIndex = index - 1
				}
			})
        },
        computed: {
			
			// 获取最新成绩分析模块数据
			getAnalysisJson() {
			    return this.$store.state.totalAnalysis.analysisJson
			},
			
            // 获取最新成绩分析模块数据
            getAchievementData() {
                return this.$store.state.totalAnalysis.achievementData
            },
            // 获取最新成绩分析模块数据
            getSubjectList() {
                return this.$store.state.totalAnalysis.subjectList
            }
        },
        watch: {
            // 渲染最新预警统计数据
            getAnalysisJson(val) {
                if (!val) return
                // this.earlyWarningData = this.$tools.jsonTransform(val.earlyWarning) // 预警统计表格
                // this.passRate = val.passRate // 及格率统计
                // this.subjectList = val.average.datas.map(item => item.name) // 科目列表
				this.subjectList = val.subjects
				this.earlyWarningData = this.getEarlyWarningData(this.getAnalysisJson)
				// this.passRate = this.getPassRate(val)
            },
            // 渲染最新预警统计数据
            getSubjectList(val) {
                if (!val) return
                this.subjectList = val
            }
        }
    }
</script>

<style src="./AchievementAnalysis.less" lang="less" scoped></style>
