<script setup>
import { ref, watch } from "vue";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

const updateDataItems = () => {
  return [
    { title: t("energy.elec_bills"), data: "3,255,458" },
    { title: t("energy.interval_elec_charges"), data: "205,110" },
    { title: t("energy.year_carbon_emission"), data: "455,128" },
    {
      title: t("energy.interval_carbon_emission"),
      time: "2023-11-01~2023-11-19",
      data: "25,351",
    },
    { title: t("energy.year_elec_consumption"), data: "864,830" },
    {
      title: t("energy.interval_elec_consumption"),
      time: "2023-11-01~2023-11-19",
      data: "50,355",
    },
  ];
};

const dataItems = ref(updateDataItems());

watch(locale, () => {
  dataItems.value = updateDataItems();
});
</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">{{ item.data }}</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>
