<template>
	<div :id="'container'+index" class="chart">
	</div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HightchartsExport from 'highcharts/modules/exporting';
import HighchartszhCN  from '@/utils/highcahrts-zh_CN'
HighchartszhCN(Highcharts)
HightchartsExport(Highcharts)
const elementResizeDetectorMaker = require("element-resize-detector");//引入监听dom变化的组件
const erd = elementResizeDetectorMaker();

import { defaultOpts } from '@/utils/defaultOptions'
export default {
	name:'',
	props: {
		chartId: {
			type: Number,
		},
		options: {
			type: Object,
		},
		/* 置于页面 还是弹窗 弹窗固定高度*/
		inset: {
			type: Boolean,
			default: false,
		},
		//maxHeight
		height: {
			type: String,
			default: ''
		},
		minHeight: {
			type: String,
			default: ''
		},
		//多个chart的情况
		index: {
			type: String,
			default: '1'
		}
	},
	watch: {
		'options': {
			handler(newval) {
				console.log('重绘')
				this.init()
			},
			deep:true
		}
	},
	data () {
		return {
			chart:null,
		};
	},
	methods: {

		init() {
			if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
				this.$nextTick(()=>{
					// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
					// console.log(h)
					// this.options.xAxis.offset=-h/2;
					const h=$(`#container${this.index}`)[0].style.height
					if(h=='500px'){
						this.options.xAxis.offset=-200.5
					}else if(h=='440px'){
						this.options.xAxis.offset=-170.5
					}else if(h=='350px'){
						this.options.xAxis.offset=-125.5
					}
				})
			}

			const options = {...defaultOpts,...this.options}
			let thatThis = this
			//stock不支持线形图只支持时间图 画散点图用原始chart
			let is_linear = this.options.series 
				? this.options.series.every(_ => _.type === 'scatter' ) || this.options.series.some(_ => _.chartType === 'linear'  )
				: false ;

			Highcharts.setOptions({ global: { useUTC: false } });
			this.chart = is_linear ? 
			Highcharts.chart(`container${this.index}`, options,function(chart) {
				let {yAxis,xAxis} = chart
				yAxis.map(item => {
					if(item.axisTitle){
						// 绑定竖轴标题的点击事件
						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
					}
				})
				xAxis.map(item => {
					if(item.axisTitle){
						// 绑定横轴标题的点击事件
						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickXAxisTitle)
					}
				})
			}) 
			: Highcharts.stockChart(`container${this.index}`,options,function(chart) {
				let {yAxis} = chart
				yAxis.map((item,index) => {
					if(item.axisTitle){
						// 绑定竖轴标题的点击事件
						Highcharts.addEvent(item.axisTitle.element,'click',thatThis.clickYAxisTitle)
					}
				})
			});
			let that = this;
      if(!$('#right')[0]) return
			erd.listenTo($('#right')[0], function (element) { //执行监听 
				that.$nextTick(function () {
					that.chart.reflow(); //变化重新渲染
				})
			})
		},
		// 点击Y轴标题监听事件
		clickYAxisTitle(){
			this.$emit('clickYAxisTitle')
		},
		// 点击X轴标题监听事件  散点图
		clickXAxisTitle(){
			// 目前点击Y轴标题和X轴都是同一个方法 所以直接派发跟Y轴点击的方法
			this.$emit('clickYAxisTitle')
		},
		initHeight() {
			/* 1550以下 */
			if($(window).width() <= 1710) {
				$(`#container${this.index}`)[0].style.height = this.minHeight || '350px';
			}else {
				$(`#container${this.index}`)[0].style.height = this.height || '440px';
			}
			if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
				this.$nextTick(()=>{
					const h=$(`#container${this.index}`)[0].style.height
					if(h=='500px'){
						this.options.xAxis.offset=-200.5
					}else if(h=='440px'){
						this.options.xAxis.offset=-170.5
					}else if(h=='350px'){
						this.options.xAxis.offset=-125.5
					}
					// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
					// this.options.xAxis.offset=-h/2;
				})
			}

		}
	},
	created() {},
	mounted() {
		this.initHeight();
		this.init();
		window.addEventListener('resize', this.initHeight);
	},
	destroyed() {
		window.removeEventListener('resize', this.initHeight);
		
	}
}
</script>
<style lang='scss' scoped>
.chart {
	/* width: 100%; */
	min-height:300px;
}
</style>