<script setup>
import { ref } from "vue";
import { twMerge } from "tailwind-merge";

// 假資料
const dataItems = ref([
  { title: "今年電費累計(元)", data: "3,255,458" },
  { title: "區間電費(元)", data: "205,110" },
  { title: "今年碳排當量累計(公斤)", data: "455,128" },
  { title: "區間碳排當量", time: "2023-11-01~2023-11-19", data: "25,351" },
  { title: "今年用電度數(kWh)", data: "864,830" },
  { title: "區間用電度數(kWh)", time: "2023-11-01~2023-11-19", data: "50,355" },
]);

// 背景顏色處理
const getItemBackground = (index) => {
  return index === 0 || index === 3 || index === 4
    ? "bg-slate-600"
    : "bg-slate-800";
};
</script>

<template>
  <div class="six-data">
    <div
      v-for="(item, index) in dataItems"
      :key="index"
      :class="
        twMerge(
          'item w-1/2 py-0 px-5 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>
