<template>
  <el-card class="box-card">
    <el-empty v-if="noData" description="暂无数据"></el-empty>
    <div id="realtimeContainer"></div>
  </el-card>
</template>

<script setup>
import { defineExpose, defineProps, onMounted, ref } from 'vue';
import { generateChartOption } from 'utils/statistical';
import * as echarts from 'echarts/core';
import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  DataZoomComponent,
]);

const props = defineProps({ searchHeight: Number });

const show = ref(false);
const noData = ref(true);
let myChart = null;

// 设置图表
onMounted(() => {
  show.value = true;
  initChart();
});

// 初始化chart
function initChart() {
  const chartDom = document.getElementById('realtimeContainer');
  const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
  console.log(canvasHeight, document.documentElement.clientHeight, props.searchHeight);
  chartDom.style.height = `${canvasHeight}px`;
  myChart && myChart.dispose();
  myChart = echarts.init(chartDom);
}

function render(data) {
  myChart && myChart.clear();
  if (!data || !data.length) {
    noData.value = true;
    return;
  }
  noData.value = false;

  if (!myChart) {
    initChart();
  }
  const option = generateChartOption(data);
  option && myChart.setOption(option);
}

defineExpose({ render });
</script>
