<template>
  <!-- <section> -->
  <div :id="chartId" class="chart-container ">
    <div v-show="dialog && dialog.dataIndex !== -1" class="chart-dialog">
      <p>this is a test</p>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { nextTick } from 'vue';

// Import the tooltip, title, rectangular coordinate system, dataset and transform components
import {
  DatasetComponent,
  DataZoomComponent,
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  TransformComponent
} from 'echarts/components';

// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';

// Register the required components
echarts.use([
  DatasetComponent,
  DataZoomComponent,
  GridComponent,
  LabelLayout,
  LegendComponent,
  LineChart,
  SVGRenderer,
  TitleComponent,
  TooltipComponent,
  TransformComponent,
  UniversalTransition,
  CanvasRenderer
]);
export default {
  props: {
    chartId: {
      type: String,
      default: ''
    },
    lineChartData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null,
      showDataDialog: false,
      dialog: {
        top: 0,
        left: 0,
        dataIndex: -1,
      }
    }
  },
  computed: {
    chartContainer() {
      return document.getElementById(this.chartId)
    }
  },
  watch: {
    lineChartData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal && newVal.xAxis && newVal.series) {
          this.$nextTick(() => {
            const el = document.getElementById(this.chartId);
            if (el && el.clientWidth > 0 && el.clientHeight > 0) {
              this.initChart();
            }
          });
        }
      }
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.chartContainer, {
        renderer: 'svg',
        useDirtyRect: false,
        decalPattern: true,
      });
      this.chart.setOption(this.lineChartData)
      this.chart.resize();
    },
  },
}
</script>

<style>
.chart-container {
  position: relative; 
  width: 100%; 
  height: 24rem; 
  color: #000000; 
}

.chart-dialog {
  position: absolute; 
  z-index: 10; 
  width: 6rem; 
  height: 6rem; 
  background-color: #ffffff; 
}
</style>