<template>
	<div ref="echarts" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from 'echarts';
import T from './echarts-theme-T.js';
import propsDefault from './propsDefault';
import { merge } from 'lodash';
echarts.registerTheme('T', T);
const unwarp = obj => obj && (obj.__v_raw || obj.valueOf() || obj);
export default {
	...echarts,
	name: 'ZxEcharts',
	props: {
		height: { type: String, default: '100%' },
		width: { type: String, default: '100%' },
		nodata: { type: Boolean, default: false },
		option: { type: Object, default: () => {} }
	},
	data() {
		return {
			isActivat: false,
			myChart: null
		};
	},
	watch: {
		option: {
			deep: true,
			handler(v) {
				unwarp(this.myChart).setOption(v);
			}
		}
	},
	computed: {
		myOptions() {
			return merge({}, propsDefault, this.option);
		}
	},
	activated() {
		if (!this.isActivat) {
			this.$nextTick(() => {
				this.myChart.resize();
			});
		}
	},
	deactivated() {
		this.isActivat = false;
	},
	mounted() {
		this.isActivat = true;
		this.$nextTick(() => {
			this.draw();
		});
	},
	methods: {
		draw() {
			var myChart = echarts.init(this.$refs.echarts, 'T');
			myChart.setOption(this.myOptions);
			this.myChart = myChart;
			window.addEventListener('resize', () => myChart.resize());
			this.handleEvent();
		},
		getChart() {
			return this.myChart;
		},
		setOption(options) {
			this.myChart.setOption(options, true);
		},
		clear() {
			this.myChart.clear();
		},
		handleEvent() {
			this.myChart.on('click', param => {
				this.$emit('click', param);
			});
		}
	}
};
</script>
