<script setup>
import { onMounted, ref, watch, onUnmounted } from "vue";
import Forge from "@/components/forge/Forge.vue";
import DashboardProduct from "./components/DashboardProduct.vue";
import DashboardTarget from "./components/DashboardTarget.vue";
import DashboardImmediateTemp from "./components/DashboardImmediateTemp.vue";
import DashboardFrozenTemp from "./components/DashboardFrozenTemp.vue";
import DashboardElectricity from "./components/DashboardElectricity.vue";
import DashboardAlert from "./components/DashboardAlert.vue";
import DashboardForgeOptionButton from "./components/DashboardForgeOptionButton.vue";
import DashboardForgeOptionCard from "./components/DashboardForgeOptionCard.vue";
import { getDashboardInit, getDashboardOptionRealTimeData } from "@/apis/dashboard";
import useSearchParams from "@/hooks/useSearchParam";
import dayjs from "dayjs";

const initialData = ref(null);
const realTimeData = ref(null);
const realTime = ref(null);
const { searchParams } = useSearchParams();
let intervalId = null;

const init = async () => {
  try {
    const res = await getDashboardInit();
    initialData.value = res.data;
  } catch (err) {
    console.error("初始化失敗:", err);
  }
};

const getDevice = async (option = 1) => {
  try {
    const res = await getDashboardOptionRealTimeData({
      option: parseInt(option),
    });
    realTimeData.value = res.data;
    realTime.value = dayjs().format("YYYY-MM-DD HH:mm:ss");
    console.log("實時數據:", realTimeData.value);
  } catch (err) {
    console.error("獲取實時數據失敗:", err);
  }
};

// 開始定時器
const startInterval = (option) => {
  // 清除之前的定時器
  if (intervalId) {
    clearInterval(intervalId);
  }
  
  // 立即執行一次
  getDevice(option);
  
  // 設定每5秒執行一次
  intervalId = setInterval(() => {
    getDevice(option);
  }, 5000);
};

// 停止定時器
const stopInterval = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

watch(
  ()=>searchParams.value.option,
  (newValue) => {
    if (newValue) {
      startInterval(newValue);
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

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

onUnmounted(() => {
  stopInterval();
});
</script>

<template>
  <div class="flex justify-between">
    <div class="w-1/4 h-full flex flex-col justify-start border-dashboard z-20">
      <div class=""><DashboardProduct /></div>
      <div class="mt-5">
        <DashboardTarget />
      </div>
      <div class="mt-5">
        <DashboardAlert />
      </div>
    </div>
    <Forge :fullScreen="true" :initialData="initialData" :realTime="realTime"/>
    <DashboardForgeOptionButton :initialData="initialData" />
    <DashboardForgeOptionCard :realTimeData="realTimeData"/>
    <div class="w-1/4 flex flex-col justify-start border-dashboard z-20">
      <div class=""><DashboardImmediateTemp /></div>
      <div class="mt-5">
        <DashboardFrozenTemp />
      </div>
      <div class="mt-5">
        <DashboardElectricity />
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
.border-dashboard {
  @apply border border-light-info bg-dark-info bg-opacity-70 p-3  first:mt-0 last:mb-0;
}
</style>
