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

<script>
	export default {
		name: 'myScatter',
		props: ['scatterData'],
		data() {
			return {
				originArr: [],
				dataArr: [],
				childIndex: 0,
				activeItemIndex: 0
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {

			// 调整图表所需数据结构格式
			renderData(data) {
				let analysisJson = data
				let newArr = []
				analysisJson.forEach(item => {
					let arr2 = []
					arr2.push((+item.x).toFixed(2))
					arr2.push((item.y))
					arr2.push(item.name)
					arr2.push(item.memberId)
					newArr.push(arr2)
				})
				return newArr
			},

			// 渲染散点图
			drawLine(data) {
				// 基于准备好的dom，初始化echarts实例
				let myScatter = this.$echarts.init(document.getElementById('myScatter'), 'chalk')
				let _this = this
				// 指定图表的配置项和数据
				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.base_name')}：${item.data[2]}
                        <br/>${_this.$t('totalAnalysis.sca_chart_text1')}：${item.data[1]}%
                        <br/>${_this.$t('totalAnalysis.sca_chart_text2')}：${item.data[0]}
                       `
						}
					},
					legend: {
						data: [_this.$t('totalAnalysis.sca_text4')]
					},
					// toolbox: {
					//    show: true,
					//    right: '70px',
					//    feature: {
					//        dataZoom: { show: true },
					//        restore: { show: false }
					//    }
					// },
					xAxis: [{
						type: 'value',
						splitNumber: 2,
						min:0,
						max:1,
						name: _this.$t('totalAnalysis.sca_chart_text2'),
						nameTextStyle: {
							color: '#e4eadb'
						},
						scale: true,
						splitLine: {
							show: true,
							lineStyle: {
								color: '#595959'
							}
						}
					}],
					yAxis: [{
						type: 'value',
						name: _this.$t('totalAnalysis.sca_chart_text1'),
						nameTextStyle: {
							color: '#e4eadb'
						},
						max: 100,
						min: 0,
						splitLine: {
							show: false,
							lineStyle: {
								color: '#595959'
							}
						},
						interval: 25,
						axisLabel: {
							show: true,
							formatter: function(value) {
								let val = []
								if (value !== 25) {
									val.push(value + '%')
								}
								return val
							}
						},
						spiltArea: {
							show: true
						}
					}],
					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'
							}
						}
					],
					series: [{
						name: _this.$t('totalAnalysis.sca_text4'),
						type: 'scatter',
						symbolSize: 15,
						z: 0,
						data: data,
						itemStyle: {
							color: '#79c8e8'
						},
						emphasis: {
							itemStyle: {
								color: '#ff99cc'
							}
						},
						markLine: {
							silent: true,
							animation: false,
							data: [{
								yAxis: 75
							}, {
								yAxis: 50
							}, {
								yAxis: 100
							}],
							label: {
								color: '#e4eadb',
								formatter: '{c}%'
							},
							lineStyle: {
								color: '#595959',
								type: 'solid'
							}
						},
						markArea: {
							silent: true,
							data: [
								[{
									xAxis: '0.5',
									yAxis: '100',
									itemStyle: {
										color: 'rgba(90,90,90,.1)'

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

								}, {
									xAxis: '0',
									yAxis: '75',
									itemStyle: {
										color: ''

									}

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

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

								}, {
									xAxis: '0.5',
									yAxis: '75'
								}],
								[{
									xAxis: '0.5',
									yAxis: '75',
									itemStyle: {
										color: 'rgba(128,128,128,0)'

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

								}, {
									xAxis: '0',
									yAxis: '50'
								}],
								[{
									xAxis: '1',
									yAxis: '75',
									itemStyle: {
										color: 'rgba(90,90,90,.1)'

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

								}, {
									xAxis: '0.5',
									yAxis: '50'
								}],
								[{
									xAxis: '0.5',
									yAxis: '50',
									itemStyle: {
										color: 'rgba(90,90,90,.1)'

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

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

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

								}, {
									xAxis: '0.5',
									yAxis: '0'
								}]
							]
						}
					}]
				}

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

				// 散点图元素点击事件
				myScatter.on('click', function(item) {
					_this.activeItemIndex = item.dataIndex
				})
			}
		},

		mounted() {
			// 缓存有数据则渲染缓存数据
			// if (this.getAnalysisJson) {
			// 	this.drawLine(this.renderData(this.getAnalysisJson))
			// }
		},

		computed: {
			// 获取最新散点图数据
			getAnalysisJson() {
				return this.$store.state.totalAnalysis.analysisJson
			}
		},
		watch: {
			scatterData: {
				deep: true,
				handler(val) {
					if (val.length) {
						this.drawLine(this.renderData(val)) // 获取最新落点图数据 进行渲染
					} else {
						this.drawLine([])
					}
				}

			}
		}
	}
</script>

<style scoped>
	#myScatter {
		width: 100%;
		height: 500px;
		margin: 0 auto;
		display: block;
	}
</style>
