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

const generateDateRange = () => {
  const dates = [];
  for (let day = 1; day <= 15; day++) {
    const formattedDay = day < 10 ? `0${day}` : day;
    dates.push(`11 / ${formattedDay}`);
  }
  return dates;
};

const defaultChartOption = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    data: ["尖峰", "半尖峰", "離峰度數"],
    textStyle: {
      color: "#ffffff",
      fontSize: 16,
    },
    orient: "horizontal",
    bottom: "0%",
  },
  grid: {
    top: "5%",
    left: "0%",
    right: "0%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: generateDateRange(), 
    axisLabel: {
      color: "#ffffff",
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#ffffff",
    },
  },
  series: [
    {
      name: "尖峰",
      type: "bar",
      stack: "total",
      data: [
        5000, 5500, 7000, 7500, 9000, 9500, 11000, 11500, 11000, 7500, 6500,
        5500, 6000, 6200, 5800,
      ],
      itemStyle: {
        color: "#3c50e0",
      },
    },
    {
      name: "半尖峰",
      type: "bar",
      stack: "total",
      data: [
        3000, 3200, 4500, 4800, 5200, 5800, 6000, 6100, 6200, 5300, 4500, 4000,
        4200, 4300, 4100,
      ],
      itemStyle: {
        color: "#6577f3",
      },
    },
    {
      name: "離峰度數",
      type: "bar",
      stack: "total",
      data: [
        2000, 2500, 3500, 4000, 4500, 5000, 5200, 5300, 5400, 4500, 4000, 3500,
        3700, 3800, 3600,
      ],
      itemStyle: {
        color: "#8fd0ef",
      },
    },
  ],
});

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

<template>
  <div class="bg-slate-700 p-3">
    <div class="text-white mb-3 text-base">
      區間計費度數 2024 / 11 / 01 ~ 2024 / 11 / 15
    </div>
    <div class="bar-box">
      <BarChart
        id="billing_degree_chart"
        class="min-h-[200px] w-full h-full"
        :option="defaultChartOption"
        ref="degree_chart"
      />
    </div>
  </div>
</template>

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