<script setup>
import BarChart from "@/components/chart/BarChart.vue";
import { ref, watch, inject } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { elecMonth_data } = inject("energy_data");

const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: [t("energy.peak"), t("energy.semi_peak"), t("energy.off_peak")],
    textStyle: {
      color: "#ffffff",
      fontSize: 16,
    },
    orient: "horizontal",
    bottom: "0%",
  },
  grid: {
    top: "5%",
    left: "0%",
    right: "0%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
      color: "#ffffff",
    },
  },
  yAxis: {
    type: "value",
    // max: 15,
    axisLabel: {
      color: "#ffffff",
    },
  },
  series: [
    {
      name: t("energy.peak"),
      type: "bar",
      stack: "total",
      data: [],
      itemStyle: {
        color: "#3c50e0",
      },
      // barWidth: "20px",
    },
    {
      name: t("energy.semi_peak"),
      type: "bar",
      stack: "total",
      data: [],
      itemStyle: {
        color: "#6577f3",
      },
      // barWidth: "20px",
    },
    {
      name: t("energy.off_peak"),
      type: "bar",
      stack: "total",
      data: [],
      itemStyle: {
        color: "#8fd0ef",
      },
      // barWidth: "20px",
    },
  ],
});

watch(
  () => elecMonth_data.value,
  (newData) => {
    const times = newData.map((item) => item.time);
    const degreePeak = newData.map((item) => item.degreePeak);
    const degreeHalfPeak = newData.map((item) => item.degreeHalfPeak);
    const degreeOffPeak = newData.map((item) => item.degreeOffPeak);

    defaultChartOption.value.xAxis.data = times;
    defaultChartOption.value.series[0].data = degreePeak;
    defaultChartOption.value.series[1].data = degreeHalfPeak;
    defaultChartOption.value.series[2].data = degreeOffPeak;
  },
  { deep: true }
);
</script>

<template>
  <div
    class="card bg-normal w-full h-full border border-cyan-300/50 rounded-md"
  >
    <div class="card-body">
      <h2 class="card-title">{{ $t("energy.monthly_bill_power")}}</h2>
      <BarChart
        id="billing_degree_chart"
        class="min-h-[250px] max-h-fit"
        :option="defaultChartOption"
        ref="degree_chart"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>
