<script setup>
import Table from "@/components/customUI/Table.vue";
import EnergyDataCahrt from "./EnergyDataCahrt.vue";
import { inject, computed, watch, ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";

const { t } = useI18n();
const route = useRoute();
const { tableData } = inject("energy_table_data");
const routeType = ref(1);
const processedTableData = ref([]); // 使用 ref 來儲存處理後的數據

// 處理計算邏輯的函數
const processData = (data) => {
  if (!data || !Array.isArray(data) || data.length === 0) {
    return [];
  }
  return data ? [...data] : [];
};

// 使用 watch 來監聽 tableData 和 routeType 的變化
watch(
  tableData,
  (newTableData) => {
    processedTableData.value = processData(newTableData);
  },
  { immediate: true } // 立即執行一次
);

const columns = computed(() => {
  const columnMap = {
    1: [
      {
        title: t("assetManagement.department"),
        key: "department_name",
      },
      {
        title: t("energy.floor"),
        key: "floor_name",
      },
      {
        title: t("history.device_name"),
        key: "device_name",
        filter: true,
      },
      {
        title: t("assetManagement.point"),
        key: "item_name",
      },
      {
        title: t("energy.maximum"),
        key: "maxValue",
      },
      {
        title: t("energy.maximum_time"),
        key: "maxTime",
      },
      {
        title: t("energy.minimum"),
        key: "minValue",
      },
      {
        title: t("energy.minimum_time"),
        key: "minTime",
      },
      {
        title: t("energy.average_value"),
        key: "averageValue",
      },
    ],
    2: [
      {
        title: t("assetManagement.department"),
        key: "department_name",
      },
      {
        title: t("energy.floor"),
        key: "floor_name",
      },
      {
        title: t("history.device_name"),
        key: "device_name",
        filter: true,
      },
      {
        title: t("history.start_time"),
        key: "startTime",
      },
      {
        title: t("energy.start_value"),
        key: "startValue",
      },
      {
        title: t("history.end_time"),
        key: "endTime",
        filter: true,
      },
      {
        title: t("energy.end_value"),
        key: "endValue",
      },
      {
        title: t("energy.difference"),
        key: "diffValue",
      },
    ],
    3: [
      {
        title: t("assetManagement.department"),
        key: "department_name",
      },
      {
        title: t("energy.floor"),
        key: "floor_name",
      },
      {
        title: t("history.device_name"),
        key: "device_name",
        filter: true,
      },
      {
        title: t("energy.power_consumption"),
        key: "value",
      },
      {
        title: t("history.start_time"),
        key: "startTime",
      },
      {
        title: t("history.end_time"),
        key: "endTime",
      },
      {
        title: t("energy.ectricity_classification"),
        key: "elecType",
      },
      {
        title: t("energy.ranking"),
        key: "rank",
      },
    ],
  };
  return columnMap[routeType.value] || columnMap[1];
});

watch(
  () => route.params.type,
  (newType) => {
    const type = parseInt(newType);
    if (!isNaN(type) && type >= 1 && type <= 3) {
      routeType.value = type;
    } else {
      routeType.value = 1;
    }
    tableData.value = [];
  },
  { immediate: true }
);
</script>

<template>
  <Table :columns="columns" :dataSource="processedTableData">
    <template #beforeTable>
      <EnergyDataCahrt v-if="route.params.type == 1" class="mb-10" />
    </template>
  </Table>
</template>

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