<script setup>
import BarChart from "@/components/chart/BarChart.vue";
import { ref, watch, computed, inject } from "vue";
import { getElecUseDay } from "@/apis/energy";
import { useI18n } from "vue-i18n";
const { search_data } = inject("energy_data");
const { t } = useI18n();
const dataSource = ref([]);
const dateRange = ref({
  min: null,
  max: null,
});

// 圖表配置
const chartConfig = {
  colors: {
    peak: "#E52EFF",
    semiPeak: "#05AA9A",
    offPeak: "#398ECA",
  },
  textColor: "#ffffff",
  fontSize: 14,
};

const processedData = computed(() => {
  if (!dataSource.value.length) return null;

  const dates = dataSource.value.map((d) => {
    const [year, month, day] = d.time.split(" ")[0].split("-");
    return `${month}-${day}`;
  });

  return {
    dates,
    peak: dataSource.value.map((d) => d.degreePeak),
    semiPeak: dataSource.value.map((d) => d.degreeHalfPeak),
    offPeak: dataSource.value.map((d) => d.degreeOffPeak),
  };
});

const chartOption = computed(() => {
  if (!processedData.value) return {};

  return {
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    legend: {
      data: [t("energy.peak"), t("energy.semi_peak"), t("energy.off_peak")],
      textStyle: {
        color: chartConfig.textColor,
        fontSize: chartConfig.fontSize,
      },
      orient: "horizontal",
      bottom: "0%",
    },
    grid: {
      top: "5%",
      left: "0%",
      right: "0%",
      bottom: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: processedData.value.dates,
      axisLabel: {
        color: chartConfig.textColor,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: chartConfig.textColor,
      },
    },
    series: [
      {
        name: t("energy.peak"),
        type: "bar",
        stack: "total",
        data: processedData.value.peak,
        itemStyle: {
          color: chartConfig.colors.peak,
        },
      },
      {
        name: t("energy.semi_peak"),
        type: "bar",
        stack: "total",
        data: processedData.value.semiPeak,
        itemStyle: {
          color: chartConfig.colors.semiPeak,
        },
      },
      {
        name: t("energy.off_peak"),
        type: "bar",
        stack: "total",
        data: processedData.value.offPeak,
        itemStyle: {
          color: chartConfig.colors.offPeak,
        },
      },
    ],
  };
});

const loadData = async (value) => {
  const res = await getElecUseDay(value);
  if (res.isSuccess && res.data) {
    dataSource.value = res.data
      .sort((a, b) => a.time.localeCompare(b.time))
      .map((d) => ({ ...d, key: d.id }));

    const dates = res.data.map((d) => d.time.split(" ")[0]);
    dateRange.value = {
      min: dates[0],
      max: dates[dates.length - 1],
    };
  } else {
    // 初始化圖表
    dataSource.value = [];
    dateRange.value = { min: null, max: null };
  }
};

watch(
  search_data,
  (newValue, oldValue) => {
    if (
      newValue.building_guid &&
      JSON.stringify(newValue) !== JSON.stringify(oldValue)
    ) {
      loadData(newValue);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<template>
  <div class="bg-slate-700 p-3">
    <div
      class="text-white mb-3 text-base"
      v-if="dateRange.min && dateRange.max"
    >
      {{ $t("energy.interval_bill_degree") }} {{ dateRange.min }} ~
      {{ dateRange.max }}
    </div>
    <div class="bar-box">
      <BarChart
        id="billing_degree_chart"
        class="min-h-[200px] w-full h-full"
        :option="chartOption"
        ref="degree_chart"
      />
    </div>
  </div>
</template>

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