<script setup>
import ImmediateDemandChart from "./components/ImmediateDemandChart.vue";
import ElecConsumption from "./components/ElecConsumption.vue";
import UsageInformation from "./components/UsageInformation.vue";
import MonthlyElecBillChart from "./components/MonthlyElecBillChart.vue";
import CarbonEmissionChart from "./components/CarbonEmissionChart.vue";
import BillingDegreeChart from "./components/BillingDegreeChart.vue";
import IntervalBillChart from "./components/IntervalBillChart.vue";
import { getTaipower } from "@/apis/energy";
import { ref, onMounted, provide } from "vue";

const taipower_data = ref([]);
const getData = async () => {
  const res = await getTaipower();
  if (res.isSuccess) {
    taipower_data.value = res.data;
  }
};

onMounted(() => {
  getData();
});

provide("energy_data", { taipower_data });
</script>

<template>
  <div class="flex flex-wrap items-center mb-4">
    <div class="w-full xl:w-5/12 lg:w-1/2">
      <ElecConsumption />
    </div>
    <div class="w-full xl:w-7/12 lg:w-1/2">
      <ImmediateDemandChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <UsageInformation />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <MonthlyElecBillChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <CarbonEmissionChart />
    </div>
    <div class="w-full xl:w-1/3 px-3">
      <BillingDegreeChart />
    </div>
    <div class="w-full xl:w-2/3 px-3">
      <IntervalBillChart />
    </div>
  </div>
  <div class="grid gap-4 grid-cols-3"></div>
</template>

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