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

const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["Var. Elec. Cost", "Fixed Elec. Cost", "Total Elec. Cost"],
    textStyle: {
      color: "#ffffff",
      fontSize: 14,
    },
    orient: "horizontal",
    bottom: "0%",
  },
  grid: {
    top: "5%",
    left: "0%",
    right: "0%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    axisLabel: {
      color: "#ffffff",
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#ffffff",
    },
  },
  series: [
    {
      name: "Var. Elec. Cost",
      type: "bar",
      stack: "total",
      data: [
        15000, 16000, 20000, 21000, 25000, 26000, 30000, 31000, 35000, 27600,
        16500, 15000,
      ],
      itemStyle: {
        color: "#45f4ef",
      },
    },
    {
      name: "Fixed Elec. Cost",
      type: "bar",
      stack: "total",
      data: [
        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
        5500,
      ],
      itemStyle: {
        color: "#ffd345",
      },
    },

    {
      name: "Total Elec. Cost",
      type: "bar",
      stack: "total",
      data: [
        3000, 3000, 4000, 5000, 12000, 17000, 20000, 20000, 12000, 12000, 5000,
        0,
      ],
      itemStyle: {
        color: "#64ed81",
      },
    },
  ],
});

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

<template>
  <div class="bg-slate-800 p-3">
    <div class="text-white mb-3 text-base">
      {{ $t("energy.monthly_elec_consumption") }}
    </div>
    <div class="bar-box">
      <BarChart
        id="electricity_bill_chart"
        class="min-h-[200px] w-full h-full"
        :option="defaultChartOption"
        ref="bill_chart"
      />
    </div>
  </div>
</template>
