<script setup>
import { ref, onMounted, watch, inject } from "vue";
import { useRoute } from "vue-router";
import useActiveBtn from "@/hooks/useActiveBtn";
import EnergyReportTimeRange from "./EnergyReportTimeRange.vue";
import { getElecTypeList } from "@/apis/asset";
import { getReport, getExcel } from "@/apis/energy";
import { useI18n } from "vue-i18n";
import useBuildingStore from "@/stores/useBuildingStore";

const storeBuild = useBuildingStore();
const { t } = useI18n();
const route = useRoute();
const { tableData, loading } = inject("energy_table_data");
const formState = ref({
  department: [],
  elecType: [],
  floor: [],
  start_time: null,
  end_time: null,
  type: 0,
});
// 選部門
const {
  items: sysDeptItems,
  changeActiveBtn: changeDeptActiveBtn,
  setItems: setDeptItems,
  selectedBtn: selectedDeptItems,
} = useActiveBtn("multiple");
// 選用電分類
const {
  items: sysElecItems,
  changeActiveBtn: changeElecActiveBtn,
  setItems: setElecItems,
  selectedBtn: selectedElecItems,
} = useActiveBtn("multiple");
// 選樓層
const {
  items: sysFloorItems,
  changeActiveBtn: changeFloorActiveBtn,
  setItems: setFloorItems,
  selectedBtn: selectedFloorItems,
} = useActiveBtn("multiple");

const getElecType = async () => {
  const res = await getElecTypeList();
  const elecType = res.data.map((d, index) => ({
    ...d,
    title: d.name,
    key: d.id,
    active: true,
  }));
  setElecItems(elecType);
};

const onSearch = async () => {
  loading.value = true;
  const res = await getReport(formState.value);
  tableData.value = res.data;
  loading.value = false;
};

const onExcel = async () => {
  const res = await getExcel(formState.value);
};

// 監聽部門選取
watch(
  selectedDeptItems,
  (newVal) => {
    formState.value.department = newVal.map((item) => item.key);
  },
  { deep: true }
);

// 監聽用電分類選取
watch(
  selectedElecItems,
  (newVal) => {
    formState.value.elecType = newVal.map((item) => item.key);
  },
  { deep: true }
);

// 監聽樓層選取
watch(
  selectedFloorItems,
  (newVal) => {
    formState.value.floor = newVal.map((item) => item.key);
  },
  { deep: true }
);

// 監聽路由參數變化
watch(
  () => route.params.type,
  (newVal) => {
    formState.value.type = Number(newVal);
  },
  { immediate: true }
);

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

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

onMounted(() => {
  getElecType();
});
</script>

<template>
  <div class="w-full custom-border px-4 pb-4 mb-4">
    <EnergyReportTimeRange :form="formState" />
    <div class="flex flex-wrap items-center gap-4 mb-4">
      <h2 class="text-lg font-bold whitespace-nowrap">
        {{ $t("assetManagement.department") }} :
      </h2>
      <ButtonGroup
        :items="sysDeptItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeDeptActiveBtn(item);
          }
        "
      />
    </div>
    <div class="flex flex-wrap items-center gap-4 mb-4">
      <h2 class="text-lg font-bold whitespace-nowrap">
        {{ $t("energy.floor") }} :
      </h2>
      <ButtonGroup
        :items="sysFloorItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeFloorActiveBtn(item);
          }
        "
      />
    </div>
    <div class="flex flex-wrap items-center gap-4 mb-4">
      <h2 class="text-lg font-bold whitespace-nowrap">
        {{ $t("energy.electricity_classification") }} :
      </h2>
      <ButtonGroup
        :items="sysElecItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeElecActiveBtn(item);
          }
        "
      />
    </div>

    <button class="btn btn-search me-4" @click.stop.prevent="onSearch">
      <font-awesome-icon :icon="['fas', 'search']" class="text-lg" />
      {{ $t("button.search") }}
    </button>
    <button class="btn btn-export" @click.stop.prevent="onExcel">
      <font-awesome-icon :icon="['fas', 'download']" class="text-lg" />
      {{ $t("button.export") }}
    </button>
  </div>
</template>

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