<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: {
    getUniqueTimes() {
      const { edgeCt, temperCt, downCt } = this.barData;
      // 合并所有包含时间的数组
      const allTimeEntries = [...(edgeCt || []), ...(temperCt || []), ...(downCt || [])];
      // 提取时间戳并去重（使用 Set）
      const uniqueTimes = [...new Set(allTimeEntries.map(item => item.recordTime))];
      // 按时间戳排序（确保时间顺序正确）
      return uniqueTimes.sort((a, b) => a - b);
    },
    initChart() {
      const uniqueTimes = this.getUniqueTimes();
			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: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')),
					axisPointer: {
						type: 'shadow',
					},
				},
				yAxis: [
					{
						type: 'value',
						name: '节拍 pcs/min',
						min: 0,
						axisLabel: {
							formatter: '{value}',
						},
					},
				],
				dataZoom: [
					{
						type: 'inside',
						start: 0,
						end: 100,
					},
					{
						start: 0,
						end: 100,
					},
				],
        series: [
          {
            name: '磨边节拍',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + 'pcs/min';
              },
            },
            data: uniqueTimes.map(time => {
              // 查找当前时间对应的 ct 值，没有则补 null（图表中会显示为断点）
              const match = this.barData.edgeCt.find(item => item.recordTime === time);
              return match ? match.ct : 0;
            })
          },
          // 钢化节拍
          {
            name: '钢化节拍',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + 'pcs/min';
              },
            },
            data: uniqueTimes.map(time => {
              const match = this.barData.temperCt.find(item => item.recordTime === time);
              return match ? match.ct : 0;
            })
          },
          // 下片节拍
          {
            name: '下片节拍',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + 'pcs/min';
              },
            },
            data: uniqueTimes.map(time => {
              const match = this.barData.downCt.find(item => item.recordTime === time);
              return match ? match.ct : 0;
            })
          }
        ]
			});
		},
	},
};
</script>
