<template>
    <div class="scatter-container">
        <Row>
            <Col span="12">
            <div class="component-title">
                <span>{{$t('totalAnalysis.sca_title1')}}</span>
<!--                <Select v-model="currentClass" @on-change="onClassSelect">
                    <Option v-for="(item,index) in classList" :value="index" :key="item">{{ item }}</Option>
                </Select> -->
            </div>
            <BaseScatter :scatterData="tableData"></BaseScatter>
            </Col>
            <Col span="12">
            <div class="scatter-statistics">
                <div class="scatter-table-line">
                    <span>{{$t('totalAnalysis.sca_text1')}}</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text2')}}</span>
                    <span>{{$t('totalAnalysis.sca_text3')}}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>A</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text5')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === 'A').length }}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>A'</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text6')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === "A'").length }}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>B</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text7')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === 'B').length }}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>B'</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text8')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === "B'").length }}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>C</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text9')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === 'C').length }}</span>
                </div>
                <Divider />
                <div class="scatter-table-line">
                    <span>C'</span>
                    <span style="text-align: left;width: 250px;">{{$t('totalAnalysis.sca_text10')}}</span>
                    <span>{{ tableData.filter(item => item.scatter === "C'").length }}</span>
                </div>
            </div>
            </Col>
        </Row>

        <!-- 学生稳定度统计表 -->
        <Row class-name="base-table-row">
            <!-- <span class="component-title">{{$t('totalAnalysis.sca_title2')}}</span> -->
            <div>
                <BaseTable :columns="tableColumns" 
				:tableDatas="tableData" 
				:tableName="$t('totalAnalysis.sca_title2')"
				 tableRef="scatterTable"
				  ref="scatterTable" ></BaseTable>
            </div>
        </Row>
    </div>
</template>

<script>
    import BaseScatter from '@/components/student-analysis/total/BaseScatter.vue'
    import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
    export default {
        components: {
            BaseScatter, BaseTable
        },
        data() {
            return {
                tableData: [],
				originTableData:[],
                currentClass: 0,
                classList: [],
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.base_name'),
                        key: 'name',
                        minWidth: 110
                    },
                    {
                        title: this.$t('totalAnalysis.base_class'),
                        key: 'className',
                        minWidth: 60
                    },
                    {
                        title: this.$t('totalAnalysis.base_id'),
                        key: 'no',
                        sortable: 'custom',
                        minWidth: 50,
						renderType: function(h, params) {
						    return h('span', params.row.no || '-')
						}
                    },
					{
					    title: this.$t('totalAnalysis.sca_chart_text1'),
					    key: 'sRate',
					    sortable: 'custom',
					    minWidth: 50,
						renderType: function(h, params) {
						    return h('span', (Number(params.row.sRate)).toFixed(2) + '%')
						},
					},
					{
					    title: this.$t('totalAnalysis.sca_table_text6'),
					    key: 'scatter',
					    minWidth: 60,
						filters: [
						    {
						        label: "A",
						        value: "A"
						    },
						    {
						        label: "A'",
						        value: "A'"
						    },{
						        label: "B",
						        value: "B"
						    },
						    {
						        label: "B'",
						        value: "B'"
						    },{
						        label: "C",
						        value: "C"
						    },
						    {
						        label: "C'",
						        value: "C'"
						    }
						],
						filterMultiple: false,
						filterRemote(value, row) {
						}
					},
					{
					    title: this.$t('totalAnalysis.sca_table_text5'),
					    sortable: true,
						key: 'x',
						renderType: function(h, params) {
						    return h('span', Number(params.row.x).toFixed(2))
						},
					    minWidth: 60
					},
                    {
                        title: this.$t('totalAnalysis.sca_table_text1'),
                        key: 'trueNum',
                        sortable: 'custom',
                        minWidth: 60
                    },
                    {
                        title: this.$t('totalAnalysis.sca_table_text2'),
                        key: 'falseNum',
                        sortable: 'custom',
                        minWidth: 60
                    },
                    {
                        title: this.$t('totalAnalysis.sca_table_text3'),
                        minWidth: 120,
                        key: 'hardList',
                        renderType: 'renderHard'
                    },
                    {
                        title: this.$t('totalAnalysis.sca_table_text4'),
                        minWidth: 120,
                        key: 'carefulList',
                        renderType: 'renderCareful'
                    },
                    
                ]
            }
        },
        created() {
			this.$EventBus.$off('onExport')
            this.$EventBus.$on("onExport", exportTables => {
                console.log('收到')
                console.log(exportTables)
                if (exportTables[0] === 'scatterTable') {
                    this.$refs.scatterTable.exportData(3)
                }
            })
			this.$parent.$parent.$parent.isShowQuestions = false
        },

        methods: {
            onClassSelect(val) {
                if (val === 0) {
                    this.tableData = this.originTableData
                } else {
                    this.tableData = this.originTableData.filter(item => item.className === this.classList[val])
                }
				console.log('落点图',this.tableData.map(i => i.name))
            },
			
			// 调整图表所需数据结构格式
			renderData(analysisJson) {
				let curSubject = this.$store.state.totalAnalysis.currentSubject
				let result = []
				analysisJson.subjects.forEach((subject, subjectIndex) => {
					if(subject.name === curSubject){
						result.push({
							subject: subject.name,
							students: this.getSubjectStudents(analysisJson, subjectIndex)
						})
					}
				})
				return result[0].students
			},
			
			/* 获取每个学生每个科目下的落点数据 */
			getSubjectStudents(analysisJson, subjectIndex) {
				let result = []
				analysisJson.students.forEach(stu => {
					let obj = {}
					analysisJson.scatterKey.forEach((key, index) => {
						stu.subjects[subjectIndex].scatter[0] = stu.name
						obj[key] = stu.subjects[subjectIndex].scatter[index]
						obj.no = stu.no
						obj.sRate = Number(stu.subjects[subjectIndex].sRate)
					})
					result.push(obj)
				})
				return result
			},
        },

        mounted() {
            this.$refs.scatterTable.$el.childNodes[1].style.borderRight = '0'
            if (this.getAnalysisJson) {
                this.tableData = this.renderData(this.getAnalysisJson)
				console.log(this.tableData)
				this.originTableData = JSON.parse(JSON.stringify(this.tableData)) 
                this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(this.getAnalysisJson.classes.map(item => item.className))]) // 获取班级列表
            }
			
			this.$EventBus.$off('onSubjectChange')
			this.$EventBus.$on('onSubjectChange',val => {
				this.tableData = this.renderData(this.getAnalysisJson)
				this.originTableData = JSON.parse(JSON.stringify(this.tableData)) 
				this.currentClass = 0
			})
			
			this.onClassSelect(this.$store.state.totalAnalysis.curClassIndex + 1)
			
			this.$EventBus.$off('changeClassName')
			this.$EventBus.$on('changeClassName',val => {
				console.log('落点选择的班级',val)
				console.log(this.classList)
				 this.onClassSelect(this.classList.indexOf(val))
			})
        },

        computed: {
            // 获取最新散点图数据
            getAnalysisJson() {
                return this.$store.state.totalAnalysis.analysisJson
            }
        },
        watch: {
            getAnalysisJson: {
                deep: true,
                handler(val) {
                    if (val) {
                        this.tableData = this.renderData(JSON.parse(JSON.stringify(val)) )
						this.originTableData = JSON.parse(JSON.stringify(this.tableData)) 
                        this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(val.classes.map(item => item.className))])
                    }
                }

            }
        }
    }
</script>

<style src="./ScatterAnalysis.css" scoped></style>
<style>
    .scatter-container .ivu-select {
        margin-left:10px;
        margin-bottom:5px;
        width:120px;
    }
</style>
