<template>
	<div id="testScatter"></div>
</template>

<script>
	export default {
		name: 'testScatter',
		props: ['currentIndex','scatterData'],
		data() {
			return {
				originArr: [],
				dataArr: [],
				activeItemIndex: 0,
				exersicesType: this.$GLOBAL.EXERCISE_TYPES(),
			}
		},
		created() {

		},

		methods: {
			drawLine(data) {
				// 基于准备好的dom，初始化echarts实例
				let myScatter = this.$echarts.init(document.getElementById('testScatter'), 'chalk')
				let _this = this
				console.log('试题落点数据',data)

				// 指定图表的配置项和数据
				var option = {
					tooltip: {
						trigger: 'item',
						showDelay: 0,
						axisPointer: {
							show: true,
							lineStyle: {
								type: 'dashed',
								width: 1
							}
						},
						textStyle: {
							height: '160px'
						},
						formatter: function(params) {
							const item = params
							return `${_this.$t('totalAnalysis.ta_table_text1')}：${item.data[3]}
                        <br/>${_this.$t('totalAnalysis.ta_table_text2')}：${that.exersicesType[item.data[2]]}
                        <br/>${_this.$t('totalAnalysis.ta_chart_text2')}：${item.data[1]}%
                       `
						}
					},
					legend: {
						data: [_this.$t('totalAnalysis.ta_chart_text1')]
					},
					dataZoom: [{
							show: true,
							type: 'inside',
							start: 0,
							end: 100,
							bottom: 10,
							height: 15
						},
						{
							show: true,
							type: 'slider',
							start: 0,
							end: 100,
							bottom: 0,
							height: 35,
							textStyle: {
								color: '#BBBBBB'
							}
						}
					],
					xAxis: [{
						type: 'value',
						splitNumber: 2,
						min:0,
						max:1,
						name: _this.$t('totalAnalysis.ta_chart_text3'),
						nameTextStyle: {
							color: '#e4eadb'
						},
						scale: false,
						splitLine: {
							show: true,
							lineStyle: {
								color: '#595959'
							}
						}
					}],
					yAxis: [{
						type: 'value',
						name: _this.$t('totalAnalysis.ta_chart_text2'),
						nameTextStyle: {
							color: '#e4eadb'
						},
						max: 100,
						min: 0,
						splitLine: {
							show: false,
							lineStyle: {
								color: '#595959'
							}
						},
						interval: 50,
						axisLabel: {
							show: true,
							formatter: function(value) {
								let val = []
								if (value !== 25) {
									val.push(value + '%')
								}
								return val
							}
						},
						spiltArea: {
							show: true
						}
					}],
					series: [{
						name: _this.$t('totalAnalysis.ta_chart_text1'),
						type: 'scatter',
						data: data,
						symbolSize: 20,
						emphasis: {
							itemStyle: {
								color: '#ff99cc'
							}
						},
						// itemStyle: {
						//  color: "#79c8e8"
						// },
						itemStyle: {
							color: function(params) {
								var key = params.dataIndex
								if (key === _this.activeItemIndex) {
									return '#ff99cc'
								} else {
									return '#79c8e8'
								}
							},
							width: 20
						},
						markLine: {
							silent: true,
							animation: false,
							data: [{
								yAxis: 50
							}, {
								yAxis: 100
							}],
							label: {
								color: '#e4eadb',
								formatter: '{c}%'
							},
							lineStyle: {
								color: '#595959',
								type: 'solid'
							}
						},
						markArea: {
							silent: true,
							data: [
								[{
									xAxis: '0.5',
									yAxis: '50',
									itemStyle: {
										color: 'rgba(128,28,128,0)'
									},
									label: {
										show: true,
										position: ['90%', '10%'],
										color: '#66ff33',
										fontSize: 20,
										formatter: 'B'
									}
								}, {
									xAxis: '0',
									yAxis: '0'
								}],
								[{
									xAxis: '1',
									yAxis: '50',
									itemStyle: {
										color: 'rgba(90,90,90,.2)'

									},
									label: {
										show: true,
										position: ['5%', '10%'],
										color: '#66ff33',
										fontSize: 20,
										formatter: "B'"
									}

								}, {
									xAxis: '0.5',
									yAxis: '0'
								}],
								[{
									xAxis: '0.5',
									yAxis: '100',
									itemStyle: {
										color: 'rgba(90,90,90,.2)'

									},
									label: {
										show: true,
										position: ['90%', '80%'],
										color: '#66ff33',
										fontSize: 20,
										formatter: 'A'
									}

								}, {
									xAxis: '0',
									yAxis: '50'
								}],
								[{
									xAxis: '1',
									yAxis: '100',
									itemStyle: {
										color: 'rgba(128,128,128,0)'

									},
									label: {
										show: true,
										position: ['5%', '40%'],
										color: '#66ff33',
										fontSize: 20,
										formatter: "A'"
									}
								}, {
									xAxis: '0.5',
									yAxis: '0'
								}]
							]
						}
					}]
				}

				// 绘制图表
				myScatter.setOption(option)
				window.addEventListener('resize', function() {
					myScatter.resize()
				})

				let that = this
				myScatter.on('click', function(item) {
					that.activeItemIndex = item.dataIndex
					that.$emit('handleIndexClick', item.dataIndex + 1)
					myScatter.setOption(option)
				})
			}
		},
		watch: {
			scatterData:{
				deep: true,
				handler(val) {
					if (val) {
						this.drawLine(val)
					}
				}
			},
			currentIndex: {
				deep: true,
				handler(val) {
					if (val && this.scatterData) {
						this.activeItemIndex = +val - 1
						this.drawLine(this.scatterData)
					}
				}
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#testScatter {
		width: 100%;
		height: 500px;
		margin: 0 auto;
		display: block;
	}
</style>
