<template>
  <div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref, inject, watch } from 'vue';
  import * as echarts from 'echarts';

  export default defineComponent({
    name: 'GraphGraph',
    setup() {
      let data = ref<any[]>([]);
      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }

      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // 执行你的逻辑代码
          draw();
        },
        { deep: true },
      );
      const graphGraphchart = ref(null);

      let chartInstance: echarts.ECharts | null = null;

      const draw = () => {
        data.value = pageData.graphGraphList;
        if (chartInstance) {
          chartInstance.dispose();
        }
        chartInstance = echarts.init(graphGraphchart.value);
        var seriesList = [];
        var date = pageData.graphTableColumns;
        var legendList: string | any[] = [];
        for (let i = 0; i < data.value.length; i++) {
          // date.push(data.value[i].date);

          // for (let j = 0; j < data.value[i].data.length; j++) {
          //   if (seriesList.length < j + 1) {
          //     seriesList.push({
          //       name: data.value[i].data[j].name,
          //       data: [data.value[i].data[j].value],
          //       type: 'line',
          //       smooth: true,
          //     });
          //   } else {
          //     seriesList[j].data.push(data.value[i].data[j].value);
          //   }
          //   if (legendList.length == 0 || legendList.length < j + 1) {
          //     legendList.push(data.value[i].data[j].name);
          //   }
          // }
          seriesList.push({
            name: data.value[i].deviceName,
            data: data.value[i].data,
            type: 'line',
            smooth: true,
          });
          legendList.push(data.value[i].deviceName);
        }
        const option = {
          legend: {
            data: legendList,
            orient: 'horizontal',
            bottom: 0,
            left: 60,
          },
          tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
              const date = params[0].name;
              const values = params
                .map((param: any) => {
                  const unit = data.value.find((d) => d.date === date)?.unit || '';
                  return `<tr>
                          <td>${param.marker}${param.seriesName}</td>
                          <td style="text-align: right;">${param.value} ${unit}</td>
                        </tr>`;
                })
                .join('');
              return `<div>${date}</div><table style="width: 100%;">${values}</table>`;
            },
          },
          xAxis: {
            type: 'category',
            data: date,
          },
          yAxis: {
            type: 'value',
          },
          series: seriesList,
        };

        chartInstance = echarts.init(graphGraphchart.value);
        chartInstance.setOption(option);
      };
      onMounted(() => {
        draw();
      });

      // 下载图表
      const downloadChart = () => {
        if (chartInstance) {
          const base64 = chartInstance.getDataURL({
            type: 'png',
            backgroundColor: '#fff',
          });
          const link = document.createElement('a');
          link.href = base64;
          link.download = 'chart.png';
          link.click();
        }
      };

      return {
        graphGraphchart,
        downloadChart,
      };
    },
  });
</script>
<style lang="less" scoped></style>
