<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,
  selectedMeter: [String, Number, null],
  floors: Array,
  companyOptions: Array,
});

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

// 二重釜資料
const vesselsData = computed(() => {
  return props.realTimeData?.productionData || [];
});

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

// 調理鍋資料
const cookingPotData = computed(() => {
  return props.realTimeData?.cookingData || [];
});

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

// 電錶資料
const meterData = computed(() => {
  const data = props.realTimeData?.meterData || [];
  // 篩選出符合 selectedMeter 的資料
  const filtered = props.selectedMeter
    ? data.filter((meter) => meter.main_id === props.selectedMeter)
    : [];
  return filtered;
});

// 威鈦閥異常訊號資料
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"
        />
      </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"
        />
      </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"
          :floors="props.floors"
          :companyOptions="props.companyOptions"
        />
      </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>
