<script setup>
import LineChart from "@/components/chart/LineChart.vue";
import { ref, onMounted } from "vue";

// 假資料
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,
      },
      itemStyle: {
        color: "#34b7f1",
      },
    },
    {
      name: "契約容量",
      type: "line",
      data: [400, 400, 400, 400, 400, 400],
      smooth: true,
      lineStyle: {
        width: 3,
      },
      itemStyle: {
        color: "#A259FF",
      },
    },
    {
      name: "警戒容量",
      type: "line",
      data: [350, 350, 350, 350, 350, 350],
      smooth: true,
      lineStyle: {
        width: 3,
      },
      itemStyle: {
        color: "#FFCE56",
      },
    },
    {
      name: "偵測值",
      type: "line",
      data: [280, 300, 290, 295, 300, 290],
      smooth: true,
      lineStyle: {
        width: 3,
      },
      itemStyle: {
        color: "#4CAF50",
      },
    },
  ],
};

const demand_chart = ref(null);
const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: data.series.map((s) => s.name),
    textStyle: {
      color: "#ffffff",
      fontSize: 16,
    },
    orient: "horizontal",
    bottom: "0%",
  },
  grid: {
    top: "10%",
    left: "0%",
    right: "0%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: "#ffffff",
    },
    data: data.categories,
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: false,
    },
    axisLabel: {
      color: "#ffffff",
    },
  },
  series: data.series,
});

onMounted(() => {
  //
});
</script>

<template>
  <div class="p-3">
    <div class="flex text-white mb-5">
      <div class="flex items-end text-base relative text mr-32">
        {{ $t("energy.immediate_demand") }}
        <span class="text-2xl px-2.5">245.48 kw</span>
      </div>
      <div class="flex items-end text-base">
        {{ $t("energy.average_demand") }}
        <span class="text-2xl px-2.5">230.8 kw</span>
      </div>
    </div>
    <LineChart
      id="immediate_demand_chart"
      class="w-full h-full min-h-[220px]"
      :option="defaultChartOption"
      ref="demand_chart"
    />
  </div>
</template>

<style lang="scss" scoped>
.text:after {
  @apply absolute top-0 -bottom-2.5 left-full block w-28 h-[1px] bg-slate-600 m-auto z-10;
  content: "";
}
</style>
