<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view
			v-show="echartData && echartData.option && echartData.option.series && echartData.option.series.length"
			class="echarts"
			:id="id"
			:prop="echartData"
			:change:prop="echarts.updateEcharts"
			@click.stop="onClick($event)"
		></view>
		<view class="loadingSeven" v-show="echartData && Object.keys(echartData.option).length == 0">
			<span 
				class="loading-seven-item"
				v-for="(item, index) in 5" :key="index"
				:style="{
					'--delay': `${index * 0.1}s`
				}"
			></span>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	/**
	 * H5、APP echarts组件
	 * @description H5 echarts组件
	 * @property {Object} chartOption echarts配置参数
	 * @event {Function()} echartClick 点击类目触发 返回 index, option
	 * @event {Function()} blankClick 点击的是空白
	 */
	export default {
		name: 'k-echarts',
		props: {
			// 配置参数， 必传
			chartOption: Object,
			// 自动缩放， false
			autoResize: Boolean, 
		},
		data() {
			return {
				id: this.getUUID(),
				echartData: {
					id: '',
					option: {},
					isChange: false
				},
				clickA: false,
				clickB: false
			}
		},
		mounted() {
			this.init()
		},
		watch:{
			chartOption: {
				deep: true,
				handler(newVal, oldVal) {
					this.init()
				}
			}
		},
		methods: {
			init() {
				let that = this
				if(this.chartOption && Object.keys(this.chartOption).length) {
					this.echartData.option = JSON.parse(JSON.stringify(this.chartOption));
					this.echartData.id = this.id
				}
				// uni.onWindowResize((res) => {
				// 	that.debounce(that.setResize(), 500)
				// })
			},
			// 屏幕尺寸变化
			setResize() {
				// console.log("屏幕变化")
				this.echartData.isChange = JSON.parse(JSON.stringify(!this.echartData.isChange))
			},
			// 防抖
			debounce(fn, delay) {
				let time = null;//time用来控制事件的触发
				return function () {
					if (time !== null) {
						clearTimeout(time);
					}
					time = setTimeout(() => {
						fn();
					}, delay)
				}
			},
			// 获取uuid
			getUUID() {
				return 'kxxx-yxxxxxxx'.replace(/[xy]/g, function (c) {
					let r = (Math.random() * 16) | 0,
						v = c == 'x' ? r : (r & 0x3) | 0x8;
					return v.toString(16);
				});
			},
			onViewClick() { // 
				console.log("点击空白区域触发", )
			},
			echartClick({option, index}) { // 点击类目触发
				this.clickA = !this.clickA
				// 点击类目轴触发 返回 索引index，和配置option
				this.$emit('echartClick', index, option)
			},
			// 点击整个空白触发
			onClick(e) { // 点击的是空白
				if(this.clickA != this.clickB) { // 点击的是类目轴
					this.clickB = this.clickA
				} else { 
					// 点击空白区域事件
					this.$emit('blankClick')
				}
				
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart = {}
	let chartId = ''
	let isFullScreen = false
	import * as echarts from 'echarts';
	window.wx = undefined
	export default {
		mounted() {
			if (typeof window.echarts === 'object') {
				this.initEcharts()
			} else {
				// // 动态引入较大类库避免影响页面展示
				// const script = document.createElement('script')
				// // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				// script.src = 'static/echarts.js'
				// script.onload = this.initEcharts.bind(this)
				// document.head.appendChild(script)
			}
			window.onresize = () => {
				if(this.autoResize) {
					for (let s in myChart) {
						// console.log("=onresize==", s)
						myChart[s].resize()
					}
				}
			}
		},
		watch: {
			autoResize() {
				if(this.autoResize) {
					for (let s in myChart) {
						// console.log("=onresize==", s)
						myChart[s].resize()
					}
				}
			}
		},
		methods: {
			initEcharts() {
				// 观测更新的数据在 view 层可以直接访问到
				// if(this.echartData && Object.keys(this.echartData.option).length && myChart) {
				// 	console.log("echarts初始化", this.echartData.option)
				// 	myChart.setOption(this.echartData.option)
				// }
			},
			formatThousands(value) {
			  if (value === undefined || value === null) {
			    value = ''
			  }
			  if (!isNaN(value)) {
			    value = value + ''
			  }
				let n1 = String(value).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
			  return n1
			},
			tooltipFormatter(tooltip) {
			  return params => {
			    let result = ''
			    for (let i in params) {
			      if (i == 0) {
			        result += tooltip.nameUnit ? params[i].axisValueLabel + tooltip.nameUnit : params[i].axisValueLabel
			      }
			      let value = '-'
						let unit = '' 
			      if (params[i].data !== null && params[i].data !== '' && params[i].data !== '-') {
			        value = params[i].value
							// 格式单位
			        if (tooltip.valueFormat) { // 格式化单位
								unit = +value >= tooltip.valueStandard ? tooltip.unitStandard[1] : tooltip.unitStandard[0]
							} else {
								unit = tooltip.unitStandard && tooltip.unitStandard[0] ? tooltip.unitStandard[0] : ''
							}
							if (tooltip.valueFormat) { // 格式化数值
								value = +value
								value = value >= tooltip.valueStandard ? (value / tooltip.valueStandard)  : value
							}
							if (tooltip.decimals) { // 保留两位小数
								value = +value
								value = value.toFixed(tooltip.decimals)
							}
			        // 添加千分位
			        value = this.formatThousands(value)
			      }
			      // #ifdef H5
			      result += '<br/>' + params[i].marker + params[i].seriesName + '<span style="margin-left: 20px;"></span>' + value + ' ' + '<span style="letter-spacing: -1px;">'+ unit +'</span>'
			      // #endif
			      
			      // #ifdef APP-PLUS
			      result += '<br/>' + params[i].marker + params[i].seriesName + '&nbsp;&nbsp;' + value + ' ' + '<span style="letter-spacing: -1px;">'+ unit +'</span>'
			      // #endif
			    }
			    return result
			  }
			},
			labelFormatter(label) {
				return params => {
					let value = '-'
					let unit = '' 
					if (params.data !== null && params.data !== '' && params.data !== '-') {
					  value = params.value
						// 格式单位
					  if (label.valueFormat) { // 格式化单位
							unit = +value >= label.valueStandard ? label.unitStandard[1] : label.unitStandard[0]
						} else {
							unit = label.unitStandard && label.unitStandard[0] ? label.unitStandard[0] : ''
						}
						if (label.valueFormat) { // 格式化数值
							value = +value
							value = value >= label.valueStandard ? (value / label.valueStandard)  : value
						}
						if (label.decimals) { // 保留两位小数
							value = +value
							value = value.toFixed(label.decimals)
						}
					  // 添加千分位
					  value = this.formatThousands(value)
						
						return value + unit;
					}
				}
			},
			// 半圆格式化detail
			detailFormatter(detail) {
				return params => {
					// console.log(params)
					let value = '-'
					let unit = '' 
					if (params !== null && params !== '' && params !== '-') {
					  value = params
						// 格式单位
					  if (detail.valueFormat) { // 格式化单位
							unit = +value >= detail.valueStandard ? detail.unitStandard[1] : detail.unitStandard[0]
						} else {
							unit = detail.unitStandard && detail.unitStandard[0] ? detail.unitStandard[0] : ''
						}
						if (detail.valueFormat) { // 格式化数值
							value = +value
							value = value >= detail.valueStandard ? (value / detail.valueStandard)  : value
						}
						if (detail.decimals) { // 保留两位小数
							value = +value
							value = value.toFixed(detail.decimals)
						}
					  // 添加千分位
					  value = this.formatThousands(value)
						
						return value + unit;
					}
				}
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// console.log("层数据变更")
				// 监听 service 层数据变更
				if(newValue && newValue.option && newValue.option.series && newValue.option.series.length) {
					this.debounce(this.setEcharts(newValue), 500)
				}
			},
			setEcharts(newValue) {
				chartId = newValue.id
				let option = newValue.option
				if (option.tooltip) {
					// 判断是否格式化tooltip
					if (option.tooltip.formatterStatus) {
						option.tooltip.formatter = this.tooltipFormatter(option.tooltip)
					}
					option.tooltip.confine = true
					// 设置tooltip浮层层级
					option.tooltip.extraCssText = 'z-index: 9999999;'
				}
				for (let item of option.series) {
					if(item.label && item.label.formatterStatus) {
						item.label.formatter = this.labelFormatter(item.label)
					} else if(item.detail && item.detail.formatterStatus) { // 半圓的格式化
						item.detail.formatter = this.detailFormatter(item.detail)
					}
				}
				myChart[newValue.id] = echarts.init(document.getElementById(newValue.id))
				myChart[newValue.id].clear() 
				myChart[newValue.id].setOption(option, option.notMerge)
				let series = myChart[newValue.id].getOption().series[0].data
				let that = this
				// 点击类目事件
				myChart[newValue.id].off('click')
				myChart[newValue.id].on('click', function(params) {
					let data = {
						option,
						index: params.seriesIndex
					}
					that.$ownerInstance.callMethod('echartClick', data)
				})
				// // 点击空白事件
				// myChart[newValue.id].getZr().off('click')
				// myChart[newValue.id].getZr().on('click', function(params) {
				//   var pointInPixel = [params.offsetX, params.offsetY]
				//   if (myChart[newValue.id].containPixel('grid', pointInPixel)) {
				//     //红色文字空白处事件
				// 		that.onBlankClick(), 1000)
				//   }
				//   else{
				// 		//橘黄色文字空白处事件
				// 		that.onBlankClick()
				//   }
				// })
			},
			// 防抖
			debounce(fn, delay) {
				let time = null;//time用来控制事件的触发
				return function () {
					if (time !== null) {
						clearTimeout(time);
					}
					time = setTimeout(() => {
						fn.call(this);
					}, delay)
				}
			},
			// 空白区域点击事件
			onBlankClick(event, ownerInstance) {
				// 调用 service 层的方法
				console.log("点击外空白事件22",)
				this.$ownerInstance.callMethod('onViewClick')
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
	}
	.echarts {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loadingSeven{
		width: 40px;
		height: 26px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.loadingSeven .loading-seven-item{
		display: inline-block;
		width: 6px;
		height: 100%;
		border-radius: 4px;
		animation: loadsaven 1.1s ease infinite;
		animation-delay: var(--delay);
	}
	@keyframes loadsaven {
		0%,
		100% {
			height: 30%;
			background: #bbd6da;
		}
		50% {
			height: 100%;
			background: #5ba1c6;
		}
	}
</style>
