<script setup>
import { useRoute } from 'vue-router';
import EffectScatter from "@/components/chart/EffectScatter.vue";
import { inject, ref, watch } from 'vue';
import { twMerge } from 'tailwind-merge';
const route = useRoute()

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

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

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

      defaultOption(newValue.value?.title, subscribeData.value.filter(d => d.device_coordinate).map(d => JSON.parse(d.device_coordinate)))
    );

  }
}, {
  immediate: true,
  deep: true,
})
</script>

<template>
  <EffectScatter id="system_floor_chart" ref="asset_floor_chart" :class="twMerge(
    currentFloor?.key ? 'opacity-100' : 'opacity-0'
  )
    " />
  <!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
</template>

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