<template>
	<div
		ref="lineChart"
		:id="id"
		:class="className"
		:style="{ height: height, width: width, marginLeft: '10px' }" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons'); // echarts theme
import resize from '@/utils/chartMixins/resize';
import { parseTime } from '../../mixins/code-filter';

const animationDuration = 1000;
export default {
	name: 'lineChart',
	mixins: [resize],
	props: {
		id: {
			type: String,
			default: 'chart',
		},
		className: {
			type: String,
			default: 'chart',
		},
		title: {
			type: String,
			default: '',
		},
		width: {
			type: String,
			default: '100%',
		},
		height: {
			type: String,
			default: '300px',
		},
		barData: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			chart: null,
		};
	},
	mounted() {
		if (!this.chart) {
			this.chart = echarts.init(this.$refs.lineChart);
			this.$nextTick(() => {
				this.initChart();
			});
		}
	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	watch: {
		barData: {
			handler() {
				if (this.chart) {
					this.$nextTick(() => {
						this.initChart();
					});
				} else {
					this.$nextTick(() => {
						this.chart = echarts.init(this.$refs.lineChart);
						this.initChart();
					});
				}
			},
			deep: true,
			immediate: true,
		},
	},
	methods: {
		initChart() {
			const _this = this;
			this.chart.setOption({
				title: {
					text: this.title
						? '{space|}{tip|}{space|}{value|' + this.title + '}'
						: '',
					textStyle: {
						rich: {
							tip: {
								width: 6,
								height: 6,
								borderRadius: 50,
								backgroundColor: '#288AFF',
							},
							space: {
								width: 8,
							},
							value: {
								fontSize: 14,
								color: 'black',
							},
						},
					},
				},
				color: ['#288AFF', '#8EF0AB', '#FFDC94'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				legend: {
					data: ['磨边节拍', '钢化节拍', '下片节拍'],
				},
				grid: {
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: this.barData.edgeCt.map((item) => {
						return parseTime(item.recordTime, '{m}-{d} {h}:{i}');
					}),
					axisPointer: {
						type: 'shadow',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '节拍',
						min: 0,
						interval: 20,
						axisLabel: {
							formatter: '{value} pcs/min',
						},
					},
				],
				dataZoom: [
					{
						type: 'inside',
						start: 0,
						end: 100,
					},
					{
						start: 0,
						end: 100,
					},
				],
				series: [
					{
						name: '磨边节拍',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'pcs/min';
							},
						},
						data: this.barData.edgeCt.map((item) => {
							return item.ct;
						}),
					},
					{
						name: '钢化节拍',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'pcs/min';
							},
						},
						data: this.barData.temperCt.map((item) => {
							return item.ct;
						}),
					},
					{
						name: '下片节拍',
						type: 'line',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'pcs/min';
							},
						},
						data: this.barData.downCt.map((item) => {
							return item.ct;
						}),
					},
				],
			});
		},
	},
};
</script>
