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

<script>
import * as echarts from 'echarts';
import { defineComponent } from '@vue/composition-api';
import resize from './dashboard/mixins/resize';
import {option} from './options/mid_bot_options';
export default defineComponent({
	mixins: [resize],
	props: {
		year: null,
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '400px'
		},
		height: {
			type: String,
			default: '230px'
		},
		productionData : {
			type : Object,
			default () {
				return {}
			}
		}
	},
	data() {
		return {
			// myChart: null,
			loading: true,
			dataForCount: [],
			dataForWeight: [],
			chartOptions : {}
		};
	},
	async mounted() {
		// await this.getTypeData()
		this.chartOptions =JSON.parse(JSON.stringify(option))
		// this.initChart()
	},
	watch : {
		productionData : {
			handler (newValue) {
				console.log('this.chartOptions ==>',this.chartOptions);
				let series1Data = newValue.wiredrawingNumWeek.map(item => item.putNum);
				let series2Data = newValue.wiredrawingNumWeek.map(item => item.outNum);
				let xAxisData = newValue.wiredrawingNumWeek.map(item => item.date);
				this.chartOptions.xAxis.data = xAxisData;
				this.chartOptions.series[0].data = series1Data;
				this.chartOptions.series[1].data = series2Data;
			this.initChart();
		},
		deep : true
		}
	},
	beforeUnmount() {
		// if (!this.myChart) {
		// 	return;
		// }
		// this.myChart.dispose();
		// this.myChart = null;
	},
	methods: {
		initChart() {
			let myChart = echarts.init(this.$el);
			myChart.setOption(this.chartOptions);
			this.$nextTick(() => {
				myChart.resize()
				this.$emit('endLoading', 11)
			})
		}
	}
});
</script>
