<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import useElecStore from "../stores/useElecDemandStore";

const store = useElecStore();
// 假資料
const data = {
  categories: [
    "16:22:29",
    "16:22:37",
    "16:22:47",
    "16:23:00",
    "16:23:08",
    "16:23:18",
  ],
  series: [
    {
      name: "即時趨勢",
      type: "line",
      data: [320, 310, 300, 305, 310, 300],
      smooth: true,
      lineStyle: {
        width: 3,
      },
    },
    {
      name: "契約容量",
      type: "line",
      data: [400, 400, 400, 400, 400, 400],
      smooth: true,
      lineStyle: {
        width: 3,
      },
    },
    {
      name: "警戒容量",
      type: "line",
      data: [350, 350, 350, 350, 350, 350],
      smooth: true,
      lineStyle: {
        width: 3,
      },
    },
    {
      name: "復歸值",
      type: "line",
      data: [280, 300, 290, 295, 300, 290],
      smooth: true,
      lineStyle: {
        width: 3,
      },
    },
  ],
};

const demand_chart = ref(null);
const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: data.series.map((s) => s.name),
    orient: "horizontal",
    bottom: "0%",
  },
  grid: {
    top: "10%",
    left: "0%",
    right: "5%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: data.categories,
  },
  yAxis: {
    type: "value",
  },
  series: data.series,
  color: ['#5470c6', '#91cc75', '#fac858', '#52aea1'] , 
});

let chartInstance = null; //  图表实例

onMounted(async () => {
  // await store.getElecDataFromBaja();
  chartInstance = echarts.init(demand_chart.value);
  chartInstance.setOption(defaultChartOption.value);
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
});
</script>
<template>
  <div ref="demand_chart" style="width: 100%; height: 200px"></div>
</template>
<style scoped></style>
