<script setup>
import { ref, defineProps, inject, watch, computed } from "vue";
import useSearchParams from "@/hooks/useSearchParam";
import { twMerge } from "tailwind-merge";
import ProductionCard from "./dashboardForgeCards/ProductionCard.vue";
import CookingCard from "./dashboardForgeCards/CookingCard.vue";
import HeaterCard from "./dashboardForgeCards/HeaterCard.vue";
import VesselCard from "./dashboardForgeCards/VesselCard.vue";
import CookingPotCard from "./dashboardForgeCards/CookingPotCard.vue";
import HeaterPotCard from "./dashboardForgeCards/HeaterPotCard.vue";
import RefrigerationCard from "./dashboardForgeCards/RefrigerationCard.vue";
import MeterCard from "./dashboardForgeCards/MeterCard.vue";
import ValveCard from "./dashboardForgeCards/ValveCard.vue";

const { searchParams, changeParams } = useSearchParams();
const props = defineProps({
  realTimeData: Object,
});

const tabs = [
  { label: "生產資訊" },
  { label: "投料進度" },
   { label: "品檢" },
  { label: "流量計" },
  { label: "SIP" },
];

// 生產資訊卡片資料
const productionData = computed(() => {
  return props.realTimeData?.productionData || [];
});
const cookingData = computed(() => {
  return props.realTimeData?.cookingData || [];
});
const heaterData = computed(() => {
  return props.realTimeData?.heaterData || [];
});

// 管理所有設備的activeTab狀態
const deviceActiveTabs = ref(new Map());

// 獲取或創建設備的activeTab
const getDeviceActiveTab = (deviceName, defaultTab = "生產資訊") => {
  if (!deviceActiveTabs.value.has(deviceName)) {
    deviceActiveTabs.value.set(deviceName, ref(defaultTab));
  }
  return deviceActiveTabs.value.get(deviceName);
};

// 二重釜資料
const vesselsData = computed(() => {
  const data = props.realTimeData?.productionData || [];
  return data.map((vessel) => ({
    ...vessel,
    activeTab: getDeviceActiveTab(vessel.name),
  }));
});

// 加熱器資料
const heaterPotData = computed(() => {
  return props.realTimeData?.heaterData || [];
});

// 調理鍋資料
const cookingPotData = computed(() => {
  const data = props.realTimeData?.cookingData || [];
  return data.map((pot) => ({
    ...pot,
    activeTab2: getDeviceActiveTab(pot.name),
  }));
});

// 冷藏室資料
const refrigerationData = computed(() => {
  return props.realTimeData?.refrigerationData || [];
});

// 電錶資料
const meterData = computed(() => {
  const data = props.realTimeData?.meterData || [];
  return data.sort((a, b) => a.name.localeCompare(b.name));
});

// 威鈦閥異常訊號資料
const valveData = computed(() => {
  return props.realTimeData?.valveData || {};
});
</script>

<template>
  <div
    class="absolute left-1/2 -translate-x-1/2 z-50"
    :style="{ top: searchParams?.top || '40%' }"
  >
    <template v-if="searchParams?.option == '1'">
      <div class="flex gap-3">
        <ProductionCard :data="productionData" />
        <CookingCard :data="cookingData" />
        <HeaterCard :data="heaterData" />
      </div>
    </template>
    <template v-else-if="searchParams?.option == '2'">
      <div class="grid grid-cols-2 gap-4">
        <VesselCard
          v-for="(vessel, index) in vesselsData"
          :key="index"
          :vessel="vessel"
          :tabs="tabs.filter(tab => tab.label !== '品檢')"
        />
      </div>
    </template>
    <template v-else-if="searchParams?.option == '3'">
      <div class="grid grid-cols-2 gap-4">
        <!-- <HeaterPotCard
          v-for="(heat, index) in heaterPotData"
          :key="index"
          :heat="heat"
        /> -->
        <CookingPotCard
          v-for="(pot, index) in cookingPotData"
          :key="index"
          :pot="pot"
          :tabs="tabs"
        />
      </div>
    </template>
    <template v-else-if="searchParams?.option == '4'">
      <div class="flex gap-3">
        <div class="flex flex-col gap-3">
          <RefrigerationCard :data="refrigerationData" />
        </div>
      </div>
    </template>
    <template v-else-if="searchParams?.option == '5'">
      <div class="grid grid-flow-col grid-rows-2 gap-4">
        <MeterCard
          v-for="(meter, index) in meterData"
          :key="index"
          :meter="meter"
        />
      </div>
    </template>
    <template v-else-if="searchParams?.option == '6'">
      <div class="flex flex-col gap-3">
        <ValveCard v-for="(card, idx) in valveData" :key="idx" :card="card" />
      </div>
    </template>
  </div>
</template>

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