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

const route = useRoute()

const { currentFloor, subscribeData } = inject("system_deviceList")
const { getCurrentInfoModalData } = inject("system_selectedDevice")
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;

const asset_floor_chart = ref(null);
const sameOption = {
  type: "effectScatter",
  coordinateSystem: "geo",
  geoIndex: 0,
  encode: {
    tooltip: 2,
  },
}
const defaultOption = (map, data = []) => {
  return {
    animation: false,
    tooltip: {},
    geo: {
      tooltip: {
        show: false,
      },
      map,
      roam: true, // 一定要关闭拖拽
    },
    series: [
      {
        ...sameOption,
        symbolSize: 10,
        itemStyle: {
          color: data?.[0]?.[3]?.device_normal_color || "#009100",
        },
        data,
      },
      {
        ...sameOption,
        symbolSize: 20,
        itemStyle: {
          color: data?.[0]?.[3]?.device_normal_color || "#009100",
        },
        data: [],
      }
    ],
  }

};

const { selectedFloor } = useSelectedFloor()

const allData = ref([])

watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValue]) => {
  if (newValue && newChart.value && oldValue?.key !== newValue.key && newValue.map_url) {
    asset_floor_chart.value.updateSvg(
      {
        full_name: newValue?.title,
        path: `${FILE_BASEURL}/${newValue.map_url}`,
      },

      defaultOption(newValue?.title, subscribeData.value?.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]) || [])
    );

    newChart.value.chart.on("click", function (params) {
      console.log(params, params.data[2])
      getCurrentInfoModalData(params.event, {
        left: params.event.offsetX
        , top: params.event.offsetY
      }, params.data[2])

      let values = [...subscribeData.value].map(d => ({ ...d, is2DActive: d.forge_dbid === params.data[2].forge_dbid }))
      subscribeData.value = values;

      const selected = allData.value.filter((d => d[2].device_number === params.data[2].device_number))
      const unSelected = allData.value.filter((d => d[2].device_number !== params.data[2].device_number))
      newChart.value.chart.setOption({
        series: [
          { data: unSelected }, {
            data: selected,
          }
        ]
      })

    });


  }
}, {
  immediate: true,
  deep: true,
})

watch(subscribeData, (newData) => {
  let values = newData?.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d])
  allData.value = values;
  if (selectedFloor.value && asset_floor_chart.value && asset_floor_chart.value.chart) {
    const selected = allData.value.filter((d => d[2].is2DActive))
    const unSelected = allData.value.filter((d => !d[2].is2DActive))
    asset_floor_chart.value.chart.setOption({
      series: [
        { data: unSelected }, {
          data: selected,
        }
      ]
    })
    console.log(asset_floor_chart.value.chart.getOption())
  }
}, {
  immediate: true,
  deep: true,
})
</script>

<template>
  <!-- <Loading class="absolute" /> -->
  <EffectScatter id="system_floor_chart" ref="asset_floor_chart" class="min-h-full bg-white" />

  <!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
</template>

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