<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";

import Dept from "./components/Dept.vue";
import ElecType from "./components/ElecType.vue";
import Vendor from "./components/Vendor.vue";
import Floors from "./components/Floors.vue";
import Building from "./components/Building.vue";
import ElecPriceManagement from "./components/ElecPriceManagement.vue";
import MQTTList from "./components/MQTTList.vue";
import Demand from "./components/Demand.vue";
// import PointList from "./components/PointList.vue";

const route = useRoute();
const currentComponent = ref(null);

const updateComponent = () => {
  const { main_system_id, sub_system_id } = route.params;

  if (sub_system_id === "Department") {
    currentComponent.value = Dept;
  } else if (sub_system_id === "ElecType") {
    currentComponent.value = ElecType;
  } else if (sub_system_id === "Vendor") {
    currentComponent.value = Vendor;
  } else if (sub_system_id === "Floor") {
    currentComponent.value = Floors;
  } else if (sub_system_id === "Building") {
    currentComponent.value = Building;
  } else if (sub_system_id === "ElecPricing") {
    currentComponent.value = ElecPriceManagement;
  } else if (sub_system_id === "MQTT_Result") {
    currentComponent.value = MQTTList;
  } else if (sub_system_id === "Demand") {
    currentComponent.value = Demand;
  } 
};

onMounted(updateComponent);

watch(
  () => route.params,
  () => {
    updateComponent();
  }
);
</script>
<template>
  <component :is="currentComponent" />
</template>
