<template>
	<div class="scatter-container">
		<Row>
			<Col span="12">
			<span class="component-title">{{$t('totalAnalysis.ta_title1')}}</span>
			<BaseTestScatter @handleIndexClick="handleIndexClick" :scatterData="scatterData"
				:currentIndex="currentExerciseIndex"></BaseTestScatter>
			</Col>
			<Col span="12">
			<div class="scatter-statistics">
				<div class="scatter-table-line">
					<span>{{$t('totalAnalysis.ta_text1')}}</span>
					<span>{{$t('totalAnalysis.ta_text2')}}</span>
					<span>{{$t('totalAnalysis.ta_text3')}}</span>
					<span>{{$t('totalAnalysis.ta_text4')}}</span>
				</div>
				<div class="scatter-table-line">
					<span>A</span>
					<span class="scatter-explain"
						:title="$t('totalAnalysis.ta_text6')">{{$t('totalAnalysis.ta_text6')}}</span>
					<span>{{A1List.length}}</span>
					<div class="index-box"><span v-for="(item,index) in A1List" :key="index"
							class="scatter-exercise-index"
							@click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span>
					</div>
				</div>
				<Divider />
				<div class="scatter-table-line">
					<span>A'</span>
					<span class="scatter-explain"
						:title="$t('totalAnalysis.ta_text7')">{{$t('totalAnalysis.ta_text7')}}</span>
					<span>{{A2List.length}}</span>
					<div class="index-box"><span v-for="(item,index) in A2List" :key="index"
							class="scatter-exercise-index"
							@click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span>
					</div>
				</div>
				<Divider />
				<div class="scatter-table-line">
					<span>B</span>
					<span class="scatter-explain"
						:title="$t('totalAnalysis.ta_text8')">{{$t('totalAnalysis.ta_text8')}}</span>
					<span>{{B1List.length}}</span>
					<div class="index-box"><span v-for="(item,index) in B1List" :key="index"
							class="scatter-exercise-index"
							@click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span>
					</div>
				</div>
				<Divider />
				<div class="scatter-table-line">
					<span>B'</span>
					<span class="scatter-explain"
						:title="$t('totalAnalysis.ta_text9')">{{$t('totalAnalysis.ta_text9')}}</span>
					<span>{{B2List.length}}</span>
					<div class="index-box"><span v-for="(item,index) in B2List" :key="index"
							class="scatter-exercise-index"
							@click="handleIndexClick(item.id)">{{Number(item.id) > 9 ? item.id : '0' + item.id}}</span>
					</div>
				</div>
			</div>
			</Col>
		</Row>
		<Divider />
		<!-- 年级单题得分率表 -->
		<Row>
			<span class="component-title">
				<span>{{$t('totalAnalysis.ta_title2')}}</span>
				<div class="index-wrap" style="display: unset">
					<span v-for="(item,index) in exerciseIndexList" :key="index" :title="index"
						class="exercise-item-index" @click="onIndexClick(item)"
						:style="{background: (+item > 9 ? item : '0' + item) === currentExerciseIndex ? '#d482ab':'#018B99' }">
						{{+item > 9 ? item : '0' + item}}
					</span>
				</div>
			</span>
			<div>
				<BaseLineBar :exerciseIndex="currentExerciseIndex" ref="lineBar"></BaseLineBar>
			</div>
		</Row>
		<!-- 试题分析总表 -->
		<Row class-name="base-table-row">
			<BaseTable :columns="tableColumns" :tableDatas="tableData" :tableName="$t('totalAnalysis.ta_title3')"
				tableRef="exerciseAnalsisTable" ref="analysisTable" :tips="$t('totalAnalysis.ta_table_tip2')">
			</BaseTable>
		</Row>
		<!-- 试题得分率表 -->
		<Row class-name="base-table-row">
			<BaseTable :columns="exerciseColumns" :tableDatas="tableData" :tableName="$t('totalAnalysis.ta_title4')"
				tableRef="exerciseScoreRateTable" ref="scoreRateTable" :tips="$t('totalAnalysis.ta_table_tip1')">
			</BaseTable>
		</Row>
	</div>
</template>

<script>
	import BaseTestScatter from '@/components/student-analysis/total/BaseTestScatter.vue'
	import BaseTable from '@/components/student-analysis/total/BaseMyTable.vue'
	import BaseLineBar from '@/components/student-analysis/total/BaseLineBar.vue'
	export default {
		components: {
			BaseTestScatter,
			BaseTable,
			BaseLineBar
		},
		data() {
			return {
				tableData: [],
				scatterData: [],
				exerciseIndexList: [],
				currentExerciseIndex: 0,
				A1List: [],
				A2List: [],
				B1List: [],
				B2List: [],
				exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
				tableColumns: [{
						title: this.$t('totalAnalysis.ta_table_text1'),
						key: 'id',
						width: 100,
						renderType: 'renderEventIndex'
					},
					{
						title: this.$t('totalAnalysis.ta_table_text2'),
						key: 'type',
						minWidth: 100,
						renderType: (h, params) => {
							return h('span', this.exersicesType[params.row.type] || '暂无')
						},
					},
					{
						title: this.$t('totalAnalysis.ta_table_text3'),
						key: 'knowledge',
						minWidth: 150,
						renderType: function(h, params) {
							return h('span', params.row.knowledge || '暂无')
						},
					},
					{
						title: this.$t('totalAnalysis.sca_table_text6'),
						key: 'areaName',
						minWidth: 100,
						filters: [
						    {
						        label: "A",
						        value: "A"
						    },
						    {
						        label: "A'",
						        value: "A'"
						    },{
						        label: "B",
						        value: "B"
						    },
						    {
						        label: "B'",
						        value: "B'"
						    }
						],
						filterMultiple: false,
						filterRemote(value, row) {
						}
					},
					{
						title: this.$t('totalAnalysis.ta_table_text4'),
						key: 'score',
						sortable: true,
						minWidth: 80
					},
					{
						title: this.$t('totalAnalysis.ta_table_text5'),
						key: 'diff',
						sortable: true,
						minWidth: 100,
						renderType: function(h, params) {
							return h('span', Number(params.row.diff).toFixed(2))
						},
					},
					{
						title: this.$t('totalAnalysis.ta_table_text6'),
						key: 'identify',
						renderType: function(h, params) {
							return h('span', Number(params.row.identify).toFixed(2))
						},
						minWidth: 120
					},
					{
						title: 'R1',
						key: 'R1',
						sortable: true,
						renderType: function(h, params) {
							return h('span', (Number(params.row.R1) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					},
					{
						title: 'R2',
						key: 'R2',
						sortable: true,
						renderType: function(h, params) {
							return h('span', (Number(params.row.R2) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					},
					{
						title: 'R3',
						sortable: true,
						key: 'R3',
						renderType: function(h, params) {
							return h('span', (Number(params.row.R3) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					},
					{
						title: 'R4',
						sortable: true,
						key: 'R4',
						renderType: function(h, params) {
							return h('span', (Number(params.row.R4) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					},
					{
						title: 'R5',
						sortable: true,
						key: 'R5',
						renderType: function(h, params) {
							return h('span', (Number(params.row.R5) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					},
					{
						title: 'R6',
						sortable: true,
						key: 'R6',
						renderType: function(h, params) {
							return h('span', (Number(params.row.R6) * 100).toFixed(0) + '%')
						},
						minWidth: 100
					}
				],
				exerciseColumns: [{
						title: this.$t('totalAnalysis.ta_table_text1'),
						key: 'id',
						fixed: 'left',
						width: 100,
						renderType: 'renderEventIndex'
					},
					{
						title: this.$t('totalAnalysis.ta_table_text10'),
						key: 'PH',
						sortable: true,
						renderType: function(h, params) {
							return h('span', (Number(params.row.PH) * 100).toFixed(0) + '%')
						},
						width: 150
					},
					{
						title: this.$t('totalAnalysis.ta_table_text11'),
						key: 'PL',
						sortable: true,
						renderType: function(h, params) {
							return h('span', (Number(params.row.PL) * 100).toFixed(0) + '%')
						},
						width: 150
					},
					{
						title: this.$t('totalAnalysis.ta_table_text8'),
						key: 'examScoreRate',
						sortable: true,
						renderType: function(h, params) {
							return h('span', (Number(params.row.examScoreRate)).toFixed(0) + '%')
						},
						width: 150
					},
					// {
					//     title: this.$t('totalAnalysis.ta_table_text9'),
					//     key: 'areaScoreRate',
					//     sortable: true,
					//     renderType: function(h, params) {
					//         return h('span', (Number(params.row.areaScoreRate)).toFixed(0) + '%')
					//     },
					//     width: 150
					// }
				]
			}
		},
		created() {
			this.$parent.$parent.$parent.isShowQuestions = false
			
		},

		methods: {
			renderClassColumns(classData) {
				let classCloumns = []
				// 渲染进线表格的班级数据
				classData.classes.forEach(item => {
					let classColumn = {
						title: item.className,
						sortable: 'custom',
						key: item.className,
						renderType: (h, params) => {
							return h('span', (Number(params.row[item.className])).toFixed(0) + '%')
						},
						minWidth: 150
					}
					classCloumns.push(classColumn)
				})

				this.exerciseColumns.splice(4, this.exerciseColumns.length - 4, ...classCloumns)
			},

			// 点击落点图某个点事件
			handleItemClick(item) {
				let index = item.data[item.data.length - 1]
				this.currentExerciseIndex = index > 9 ? '' + index : '0' + index

				// 题目编号联动
				this.$nextTick(() => {
					let indexDomList = Array.prototype.slice.call(document.getElementsByClassName(
						'scatter-exercise-index'))
					let hignlightIndexDom = indexDomList.filter(item => +item.innerText === +this
						.currentExerciseIndex)
					indexDomList.forEach(item => {
						item.style.background = 'transparent'
					})
					if (hignlightIndexDom.length) {
						hignlightIndexDom[0].style.background = '#018b99'
						hignlightIndexDom[0].style.borderRadius = '50%'
					}
				})
			},

			onIndexClick(item) {
				this.handleItemClick({
					data: [+item]
				})
			},

			handleIndexClick(index) {
				this.$router.push({
					path: '/total/questionList',
					query: {
						QIndex: index
					}
				})
			},


			// 调整图表所需数据结构格式
			renderData(data) {
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis
					.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].value.forEach((exercise, exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})

					analysisJson.classes.forEach(classItem => {
						obj[classItem.className] = classItem.subjects[curSubjectIndex].item[exerciseIndex]
					})
					result.push(obj)
				})
				console.log(result)
				return result
			},

			doRender(analysisJson) {
				let exerciseList = this.renderData(analysisJson)
				this.renderClassColumns(analysisJson)
				this.exerciseIndexList = exerciseList.map(item => item.id)
				this.A1List = exerciseList.filter(item => item.areaName === 'A')
				this.A2List = exerciseList.filter(item => item.areaName === "A'")
				this.B1List = exerciseList.filter(item => item.areaName === 'B')
				this.B2List = exerciseList.filter(item => item.areaName === "B'")
				this.tableData = JSON.parse(JSON.stringify(exerciseList))
				this.getScatterData()
				console.log('最新试题数据', this.tableData)
			},

			getScatterData() {
				let analysisJson = JSON.parse(JSON.stringify(this.getAnalysisJson))
				let curSubjectIndex = analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis
					.currentSubject)
				let result = []
				analysisJson.paper[curSubjectIndex].value.forEach((exercise, exerciseIndex) => {
					let obj = {}
					analysisJson.paperKey.forEach((key, index) => {
						obj[key] = exercise[index]
					})
					result.push(obj)
				})
				let arr = result
				let newArr = []
				arr.forEach(item => {
					let arr2 = []
					arr2.push((+item.X).toFixed(2))
					arr2.push((item.Y * 100).toFixed(2))
					arr2.push(item.type)
					arr2.push(item.id)
					newArr.push(arr2)
				})
				this.scatterData = newArr
			},

			getLineBarData() {

			}
		},

		mounted() {
			this.$refs.analysisTable.$el.childNodes[1].style.borderRight = '0'
			this.handleItemClick({
				data: [1]
			})
			this.getAnalysisJson && this.doRender(this.getAnalysisJson)

			this.$EventBus.$off('onSubjectChange')
			this.$EventBus.$on('onSubjectChange', val => {
				this.doRender(this.getAnalysisJson)
				// this.$nextTick(() => {
				// 	this.$refs.lineBar.renderData(this.getAnalysisJson)
				// })
			})
		},
		computed: {
			// 获取最新试题分析模块数据
			getAnalysisJson() {
				return this.$store.state.totalAnalysis.analysisJson
			}
		}
	}
</script>

<style src="./TestAnalysis.css" scoped></style>
<style>
	.scatter-container .ivu-poptip-content {
		max-width: 520px;
	}
</style>
