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

const props = defineProps({
  energyCostData: {
    type: Object,
    required: true,
  },
});

const energyTypeList = ref([
  {
    title: t("dashboard.today_energy_consumption"),
    key: "today",
  },
  {
    title: t("dashboard.this_month_energy_consumption"),
    key: "month",
  },
]);
const currentEnergyType = ref({
  name: "month",
});

// 取得當前能耗資料
const getCurrentEnergyData = () => {
  if (!props.energyCostData || !props.energyCostData.rank) { 
    return []; // 或者返回一些默认值
  }

  return currentEnergyType.value.name === "month"
    ? props.energyCostData?.rank.month || []
    : props.energyCostData?.rank.day || [];
};
</script>

<template>
  <div class="state-box-col relative ps-2 h-full max-h-[350px]">
    <div class="state-box h-full">
      <!-- 標題和切換按鈕 -->
      <div class="flex justify-between items-center mb-2">
        <h2 class="font-light relative">
          {{ $t("dashboard.energy_ranking") }}
        </h2>
        <Select
          :value="currentEnergyType"
          class="!w-24"
          selectClass="border-info focus-within:border-info btn-xs text-xs"
          name="name"
          Attribute="title"
          :options="energyTypeList"
          :isTopLabelExist="false"
          :isBottomLabelExist="false"
        >
        </Select>
      </div>

      <!-- 能耗排名列表 -->
      <div class="max-h-[300px] overflow-y-auto">
        <table class="table table-sm text-center">
          <tbody>
            <tr
              v-for="(item, index) in getCurrentEnergyData()"
              :key="index"
              :class="[
                { 'text-red-300': index + 1 === 1 },
                { 'text-orange-300': index + 1 === 2 },
                { 'text-yellow-300': index + 1 === 3 },
                { 'text-teal-300': index + 1 > 3 },
              ]"
            >
              <td class="flex items-center">
                <font-awesome-icon :icon="['fas', 'crown']" class="me-1" />{{
                  index + 1
                }}
              </td>
              <td>{{ item.name }}</td>
              <td>{{ item.value }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.state-box {
  @apply border-2 border-light-info rounded-sm p-2 text-white relative;
}

.state-box-col:before {
  @apply absolute left-0 right-0 -top-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-box-top.png);
}

.state-box-col:after {
  @apply absolute left-0 right-0 -bottom-0.5 m-auto h-2 w-36 bg-no-repeat bg-center z-10;
  content: "";
  background-image: url(@ASSET/img/state-box-bottom.png);
}

tr td {
  @apply text-[13px] text-start;
}
</style>
