<script setup>
import { ref, computed, provide, watch } from "vue";
import ImmediateDemandChart from "./ImmediateDemandChart.vue";
import ElecConsumption from "./ElecConsumption.vue";
import UsageInformation from "./UsageInformation.vue";
import MonthlyElecBillChart from "./MonthlyElecBillChart.vue";
import CarbonEmissionChart from "./CarbonEmissionChart.vue";
import BillingDegreeChart from "./BillingDegreeChart.vue";
import IntervalBillChart from "./IntervalBillChart.vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import { getTaipower } from "@/apis/energy";
import useBuildingStore from "@/stores/useBuildingStore";

const storeBuild = useBuildingStore();
// 選樓層
const {
  items: sysFloorItems,
  changeActiveBtn: changeFloorActiveBtn,
  setItems: setFloorItems,
  selectedBtn: selectedFloorItems,
} = useActiveBtn("multiple");
// 選部門
const {
  items: sysDeptItems,
  changeActiveBtn: changeDeptActiveBtn,
  setItems: setDeptItems,
  selectedBtn: selectedDeptItems,
} = useActiveBtn("multiple");

const taipower_data = ref([]);
const carbonValue = ref(null);
const search_data = computed(() => {
  return {
    coefficient: carbonValue.value,
    building_guid: storeBuild.selectedBuilding?.building_guid || null,
    department_id_list: selectedDeptItems.value.map((item) => item.key),
    floor_guid_list: selectedFloorItems.value.map((item) => item.key),
  };
});

const getData = async (value) => {
  const res = await getTaipower(value);
  if (res.isSuccess) {
    taipower_data.value = res.data
      ? res.data.sort((a, b) => a.month.localeCompare(b.month))
      : [];
  }
};

watch(
  search_data,
  (newValue, oldValue) => {
    if (
      newValue.building_guid &&
      newValue.coefficient &&
      JSON.stringify(newValue) !== JSON.stringify(oldValue)
    ) {
      getData(newValue);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => storeBuild.floorList,
  (newValue) => {
    if (newValue) {
      const floorList = newValue.map((d) => ({
        ...d,
        active: true,
      }));
      setFloorItems(floorList);
    }
  },
  {
    immediate: true,
  }
);

watch(
  () => storeBuild.deptList,
  (newValue) => {
    if (newValue) {
      const deptList = newValue.map((d) => ({
        ...d,
        active: true,
      }));
      setDeptItems(deptList);
    }
  },
  {
    immediate: true,
  }
);

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

<template>
  <div class="flex flex-wrap items-center mb-4">
    <div class="w-full border border-info px-4 py-2 rounded mt-3">
      <div class="flex items-center gap-3">
        <span class="text-md font-extrabold">{{ $t("energy.floor") }} :</span>
        <ButtonGroup
          :items="sysFloorItems"
          :withLine="true"
          className="btn-xs rounded-md"
          :onclick="
            (e, item) => {
              changeFloorActiveBtn(item);
            }
          "
        />
      </div>
      <div class="flex items-center gap-3">
        <span class="text-md font-extrabold"
          >{{ $t("assetManagement.department") }} :</span
        >
        <ButtonGroup
          :items="sysDeptItems"
          :withLine="true"
          className="btn-xs rounded-md"
          :onclick="
            (e, item) => {
              changeDeptActiveBtn(item);
            }
          "
        />
      </div>
    </div>
    <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>
