<script setup>
import { ref, watch, inject } from "vue";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n();
const { taipower_data, yearly_taipower_data } = inject("energy_data");

const daysInMonth = (month) => {
  const [year, monthNumber] = month.split("-");
  return new Date(year, monthNumber, 0).getDate(); // 返回該月份的天數
};

// 函數用來計算所有數據
const calculateData = () => {
  const currentYear = new Date().getFullYear().toString(); // 獲取當前年份
  // 過濾出當年的資料
  const filteredData = taipower_data.value.filter((item) =>
    item.month.startsWith(currentYear)
  );

  const totalElecBills = filteredData.reduce(
    (sum, item) => sum + item.costTotal,
    0
  );
  const latestMonthData = filteredData[filteredData.length - 1];
  const latestMonth = latestMonthData ? latestMonthData.month : "";
  const monthDays = latestMonth ? daysInMonth(latestMonth) : 0;
  const monthTxt = latestMonth
    ? `${latestMonth}-01~${latestMonth}-${monthDays}`
    : "";

  const totalCarbonEmission = filteredData.reduce(
    (sum, item) => sum + item.carbon,
    0
  );
  const totalElecConsumption = filteredData.reduce(
    (sum, item) => sum + item.kWh,
    0
  );

  return [
    {
      title: t("energy.elec_bills"),
      data: totalElecBills.toLocaleString(),
      past: yearly_taipower_data.value.costTotalGrowthPercent
        ? yearly_taipower_data.value.costTotalGrowthPercent.toLocaleString()
        : 0,
    },
    {
      title: t("energy.interval_elec_charges"),
      time: monthTxt,
      data: latestMonthData ? latestMonthData.costTotal.toLocaleString() : 0,
      past:
        latestMonthData && latestMonthData.costTotalGrowthPercent
          ? latestMonthData.costTotalGrowthPercent.toLocaleString()
          : 0,
    },
    {
      title: t("energy.year_carbon_emission"),
      data: totalCarbonEmission.toLocaleString(),
      past: yearly_taipower_data.value.carbonGrowthPercent
        ? yearly_taipower_data.value.carbonGrowthPercent.toLocaleString()
        : 0,
    },
    {
      title: t("energy.interval_carbon_emission"),
      time: monthTxt,
      data: latestMonthData ? latestMonthData.carbon.toLocaleString() : 0,
      past:
        latestMonthData && latestMonthData.carbonGrowthPercent
          ? latestMonthData.carbonGrowthPercent.toLocaleString()
          : 0,
    },
    {
      title: t("energy.year_elec_consumption"),
      data: totalElecConsumption.toLocaleString(),
      past: yearly_taipower_data.value.kWhGrowthPercent
        ? yearly_taipower_data.value.kWhGrowthPercent.toLocaleString()
        : 0,
    },
    {
      title: t("energy.interval_elec_consumption"),
      time: monthTxt,
      data: latestMonthData ? latestMonthData.kWh.toLocaleString() : 0,
      past:
        latestMonthData && latestMonthData.kWhGrowthPercent
          ? latestMonthData.kWhGrowthPercent.toLocaleString()
          : 0,
    },
  ];
};

const dataItems = ref(calculateData());

watch(locale, () => {
  dataItems.value = calculateData();
});

watch(
  taipower_data,
  () => {
    dataItems.value = calculateData();
  },
  { deep: true }
);
</script>

<template>
  <div class="six-data">
    <div
      v-for="(item, index) in dataItems"
      :key="index"
      :class="
        twMerge(
          'item w-1/2 py-0 px-3 h-[85px] text-white flex justify-center flex-col',
          index == 0 || index == 3 || index == 4
            ? 'bg-slate-800'
            : 'bg-slate-700'
        )
      "
    >
      <div class="title">{{ item.title }}</div>
      <div v-if="item.time" class="time">{{ item.time }}</div>
      <div class="data">
        <span>{{ item.data }}</span> / <span>{{ item.past }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.six-data {
  @apply flex flex-wrap mb-2.5;

  .title {
    @apply text-sm;
  }

  .time {
    @apply text-xs;
  }

  .data {
    @apply text-2xl;
  }
}
</style>
