<script setup>
import { useRoute } from "vue-router";
import EffectScatter from "@/components/chart/EffectScatter.vue";
import DashboardEffectScatterModal from "./DashboardEffectScatterModal.vue";
import useSearchParam from "@/hooks/useSearchParam";
import { computed, inject, ref, watch } from "vue";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const route = useRoute();
const { searchParams, changeParams } = useSearchParam();
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;

const props = defineProps({
  data: {
    type: Object,
  },
});

const asset_floor_chart = ref(null);
const currentFloorId = ref(null);
const selectedDevice = ref(null);

const defaultOption = (map, data = []) => {
  return {
    animation: false,
    geo: {
      map,
      roam: true, // 允許縮放和平移
      layoutSize: window.innerWidth <= 768 ? "80%" : "55%",
      layoutCenter: ["50%", "40%"],
      scaleLimit: { min: 1, max: 2 },
    },
    series: [
      // 背景圓形
      {
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        symbolSize: (value) => value[2]?.bgSize || 50,
        symbol: "range",
        itemStyle: {
          color: (params) => params.data[2]?.bgColor || "rgba(0,0,0,0.8)",
        },
        data,
        z: 1,
      },
      {
        type: "scatter",
        coordinateSystem: "geo",
        geoIndex: 0,
        symbolSize: 30,
        itemStyle: {
          color: "rgba(225,225,225,0.8)",
        },
        symbol: (value, params) => {
          // 若有 icon 屬性就用 image，否則用圓點
          return params.data[2]?.icon
            ? `image://${params.data[2].icon}`
            : "roundRect";
        },
        data,
        label: {
          show: true,
          position: "bottom",
          formatter: (params) => params.data[2]?.full_name || "",
          color: "#333",
          fontSize: 14,
          backgroundColor: "rgba(255,255,255)",
          padding: [4, 4],
          borderRadius: 3,
        },
        z: 2,
      },
    ],
  };
};

const currentIconData = computed(() => {
  const data = props.data?.[searchParams.value.floor_id] || [];
  return data;
});

// 處理圖表項目點擊事件
const handleItemClick = (params) => {
  if (params.data && params.data[2]) {
    selectedDevice.value = params.data[2];
  }
};

watch(
  [searchParams, () => asset_floor_chart.value, () => props.data],
  ([newValue, newChart, newData], [oldValue]) => {
    if (
      newValue.floor_id &&
      newChart &&
      Object.keys(newData || {}).length > 0
    ) {
      const isFloorChanged = currentFloorId.value !== newValue.floor_id;

      if (isFloorChanged) {
        // 樓層切換時才重新載入 SVG
        console.log(
          "Floor changed, updating chart with new SVG",
          newValue.floor_id
        );
        currentFloorId.value = newValue.floor_id;
        newChart.updateSvg(
          {
            full_name: newValue.floor_id,
            path: `${FILE_BASEURL}/upload/floor_map/${newValue.floor_id}.svg`,
          },
          defaultOption(newValue.floor_id, currentIconData.value)
        );

        // 添加點擊事件監聽
        setTimeout(() => {
          if (newChart.chart) {
            newChart.chart.off("click"); // 移除舊的監聽器
            newChart.chart.on("click", handleItemClick);
          }
        }, 100);
      } else if (currentFloorId.value === newValue.floor_id && newChart.chart) {
        // 只是資料更新時，只更新圖表資料，不重新載入 SVG
        console.log("Data updated, refreshing chart data only");
        newChart.chart.setOption(
          {
            series: defaultOption(newValue.floor_id, currentIconData.value)
              .series,
          },
          false,
          true
        );
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<template>
  <DashboardEffectScatterModal :data="selectedDevice" />
  <EffectScatter
    id="system_floor_chart"
    ref="asset_floor_chart"
    class="bg-slate-300 absolute top-0 left-0 min-h-full z-0"
  />
</template>

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