<script setup>
import EnergySidebar from "./EnergySidebar.vue";
import EnergySearch from "./EnergySearch.vue";
import EnergyDataTable from "./EnergyDataTable.vue";
import dayjs from "dayjs";
import { ref, provide } from "vue";

const tableData = ref([]);
const deptData = ref([]);
const elecType = ref([]);
const subSystem = ref(null);
const loading = ref(false);
const updateTableData = (data) => {
  tableData.value = data ? data : [];
};
const setLoading = (val) => {
  loading.value = !!val;
};

provide("energy_table_data", {
  tableData,
  updateTableData,
  deptData,
  elecType,
  subSystem,
  loading,
  setLoading,
});
</script>

<template>
  <div class="grid grid-cols-10 gap-2">
    <div class="col-span-2">
      <EnergySidebar />
    </div>
    <div class="col-span-8">
      <EnergySearch />
      <EnergyDataTable />
    </div>
  </div>
</template>

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