<template>
    <div class="scatter-container">
        <Row>
            <Col span="12">
                <span class="component-title">{{$t('totalAnalysis.ka_title4')}}</span>
                <!-- <span class="pie-to-bar" @click="changeRadarOrBar"><Icon :type="isShowRadar ? 'ios-podium' : 'ios-pie'" />{{isShowRadar?$t('totalAnalysis.ka_chart_text1'):$t('totalAnalysis.ka_chart_text2')}}</span> -->
                <div>
                    <BaseDetailBar echartsId="knowDetailBar" :classIndex="classIndex"  @handleItemClick="handleItemClick" ref="detailsBar"></BaseDetailBar>
                </div>
               <!-- <div v-if="isShowRadar">
                    <BaseRadar echartsId="knowRadar" :classIndex="classIndex"></BaseRadar>
                </div> -->
            </Col>
            <Col span="12"  style="padding: 30px 100px 0 0">
            <!-- 知识点得分详情 -->
                <span class="component-title-point"><span>{{$t('totalAnalysis.ka_text2')}}：{{currentPoint}}</span></span>
                <div>
                    <BaseMyTable :columns="detailsColumns"
                                 :tableName="$t('totalAnalysis.ka_title5')"
                                  tableRef="pointScoreTable"
                                 :tableDatas="tableData"
                                 ref="detailsTable"></BaseMyTable>
                </div>
            </Col>
        </Row>
        <Divider />
        <Row class-name="base-table-row">
            <div>
                <BaseMyTable :columns="tableColumns"
                             :tableName="$t('totalAnalysis.ka_title6')"
                              tableRef="pointWrongTable"
                             :tableDatas="numData"
                             ref="numTable"
                             :tips="$t('totalAnalysis.ka_tip1')"></BaseMyTable>
            </div>
            <!--<span style="/*font-size:14px;font-weight:bold;margin-left:60px;color:#66cccc*/"></span>-->
        </Row>
    </div>
</template>

<script>
    import BaseDetailBar from '@/components/student-analysis/total/BaseKnowledgeDetail.vue'
    import BaseMyTable from '@/components/student-analysis/total/BaseMyTable.vue'
    import BaseRadar from '@/components/student-analysis/total/BaseRadar.vue'
    export default {
		props:{
			classIndex:{
				type:Number,
				default:-1
			}
		},
        components: {
            BaseDetailBar, BaseMyTable, BaseRadar
        },
        data() {
            return {
                isShowRadar: false,
				curClassIndex: -1,
				classList:[],
                tableData: [],
                classDatas: [],
                currentPoint: '',
                tipContent: '* RH:高分区段  /  RL:低分区段 （模拟数据,仅供参考）',
                knowledgeData: [],
                numData: [],
                tableColumns: [
                    {
                        title: this.$t('totalAnalysis.ka_table_text1'),
                        key: 'name',
                        minWidth: 150
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text4'),
                        key: 'point',
                        minWidth: 100,
                        sortable: 'custom',
                        renderType: function(h, params) {
                            return h('span', Number(params.row.point).toFixed(2))
                        }
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text7'),
                        key: 'itemNO',
                        renderType: 'renderHard',
                        width: 250
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text8'),
                        key: 'persent',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.persent) * 100).toFixed(2) + '%')
                        },
                        sortable: 'custom',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text9'),
                        key: 'wrong',
                        sortable: 'custom',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text10'),
                        key: 'rhw',
                        sortable: 'custom',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text11'),
                        key: 'rlw',
                        sortable: 'custom',
                        minWidth: 100
                    }
                ],
                detailsColumns: [
                    {
                        title: this.$t('totalAnalysis.base_name'),
                        key: 'id',
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.base_class'),
                        key: 'className',
                        width: 120
                    },
                    {
                        title: this.$t('totalAnalysis.base_id'),
                        key: 'seatNO',
                        width: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text4'),
                        key: 'point',
                        sortable: 'custom',
                        renderType: function(h, params) {
                            return h('span', Number(params.row.point).toFixed(1))
                        },
                        minWidth: 100
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text5'),
                        key: 'anwPoint',
                        minWidth: 100,
                        sortable: 'custom',
                        renderType: function(h, params) {
                            return h('span', Number(params.row.anwPoint).toFixed(1))
                        }
                    },
                    {
                        title: this.$t('totalAnalysis.ka_table_text6'),
                        key: 'persent',
                        minWidth: 100,
                        sortable: 'custom',
                        renderType: function(h, params) {
                            return h('span', (Number(params.row.persent) * 100).toFixed(2) + '%')
                        }
                    }
                ]
            }
        },
        created() {

        },

        methods: {

            changeRadarOrBar() {
                this.isShowRadar = !this.isShowRadar
            },

            // 点击柱状图某个点事件
            handleItemClick(item) {
                console.log(item)
                this.currentPoint = item.name
                this.doRender(this.getKnowledgeData, this.currentPoint,this.curClassIndex)
            },

            doRender(data, point) {
				let classIndex = this.$store.state.totalAnalysis.curClassIndex
                let origin = data.stupercent
                let keys = origin.keys
                let datas = classIndex === -1 ? (origin[point] || []) : origin[point].filter(i => i[1] === this.classList[classIndex + 1])
				this.currentPoint = point
                this.tableData = this.$tools.jsonTransform({ datas: datas, keys: keys })
            },

            doRenderWrong(data) {
				let classIndex = this.$store.state.totalAnalysis.curClassIndex
                let origin = data.wrong
				let allWrongData = this.$tools.jsonTransform({ datas: origin.datas, keys: origin.keys })
                this.numData = classIndex === -1 ?  allWrongData : this.getClassWrongData(allWrongData,classIndex)
            },
			
			getClassWrongData(allWrongData){
				let classIndex = this.$store.state.totalAnalysis.curClassIndex
				let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
				let curItem = this.getAnalysisJson.classes[classIndex].subjects[curSubjectIndex]
				allWrongData.forEach((item,index) => {
					item.persent = curItem.krate[index]
					item.rhw =  curItem.phc[index]
					item.rlw = curItem.plc[index]
					item.wrong = curItem.pc[index]
				})
				return allWrongData
			}
			

        },
        mounted() {
            this.$refs.detailsTable.$el.childNodes[1].style.borderRight = '0'
            this.$refs.numTable.$el.childNodes[1].style.borderRight = '0'
            if (this.getKnowledgeData) {
                this.doRender(this.getKnowledgeData, this.getKnowledgeData.pointList[0],this.curClassIndex)
                this.doRenderWrong(this.getKnowledgeData,this.curClassIndex)
				this.classList = [this.$t('totalAnalysis.allClasses')].concat([...new Set(this.getAnalysisJson.classes.map(item => item.className))]) // 获取班级列表
            }
			
			
        },
        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
			},
        },
        watch: {
            getKnowledgeData: {
                deep: true,
                handler(val) {
                    if (val) {
                        this.doRender(val,val.pointList[0],this.curClassIndex)
						this.doRenderWrong(val,this.curClassIndex)
                    }
                }
            },
			classIndex(n,o){
				this.curClassIndex = n - 1
				this.doRender(this.getKnowledgeData,this.getKnowledgeData.pointList[0],n - 1)
				this.doRenderWrong(this.getKnowledgeData,n - 1)
			}
        }
    }
</script>

<style src="./KnowledgeAnalysis.css" scoped></style>
<style>
	.component-title-point{
		position: absolute;
		font-size: 14px;
		font-weight: 600;
		right: 200px;
		top: 40px;
		color: #47dbfc;
	}
</style>