<script setup>
import { inject, ref, watch, onBeforeUnmount } from "vue"
import { useClassPolygon } from "@/hooks/useClassPolygon"
import { useDeviceStore } from "@/stores/device" // 导入设备store

const { THREE } = VgoMap

// 获取设备store实例
const deviceStore = useDeviceStore()

// 可以使用pinia等管理全局数据，这里只是方便演示, 直接注入了上层提供的数据
const editMap = inject("editMap")
const editPolygonDataAll = inject("editPolygonDataAll")
const editRouteLineRef = inject("editRouteLineRef")
console.log(editMap.value,'editorFilter.editMap.value')
// 仅取有分类的点位
const { classPoiList, classDict } = useClassPolygon(editPolygonDataAll)
console.log(classPoiList.value,'classPoiList.value')
console.log(classDict.value,'classDict.value')
const markerGroup = new THREE.Group()
editMap.value.scene.add(markerGroup)
onBeforeUnmount(() => {
  markerGroup.dispose()
})

// 根据有分类点位，创建marker

console.log(editMap.value,'editorFilter.editMap.value')
console.log(editMap.value.status.floor,'editMap.value.status.floor')
console.log(editMap.value.outerFloor,'editMap.value?.outerFloor')
const markerStatus = ref({});
(editMap.value.status?.floor ?? editMap.value?.outerFloor).on('floorModelAllLoaded', () => {
  console.log('lkasdfjalksdjfklasjdf')
  // 清理所有marker
  while (markerGroup.children.length) {
    markerGroup.children?.[0]?.dispose()
  }
  markerStatus.value = {}

  // 创建新的marker
      const listGroup = Object.entries(classPoiList.value)
      listGroup.forEach(([key, list]) => {
        list.forEach((item) => {
          const model = editMap.value.getModelById(item.extrasModelId) // 获取点位关联的模型信息
          const modelName = model.userData.modelData.name
          const modelId=item.id
          console.log(modelName, ' ', item.id)
          
          // 将设备信息添加到全局store
          //deviceStore.addDevice(modelId, modelName)
          
          const marker = createDivMarker(modelName, item)

          if (model) {
            marker.position.copy(model.position)
          } else {
            marker.position.copy(item.center).setZ(10)
          }
          markerGroup.add(marker)

          if (!markerStatus.value?.[key]) {
            markerStatus.value[key] = []
          }
          markerStatus.value[key].push(marker)
        })
      })
})

// 根据选中状态，控制marker显示
const checkedStatus = ref({})
watch(checkedStatus, (checked) => {
  for (let key in checked) {
    markerStatus.value?.[key]?.forEach((marker) => {
      marker.visible = checked[key]
    })
  }
}, {
  deep: true,
})

function createDivMarker(content, polygon) {
  const wrapper = document.createElement("div")
  const contentNode = document.createElement("div")
  contentNode.className = "marker"
  contentNode.textContent = content
  contentNode.onclick = (e) => {
    if(!polygon?.isNavi) return
    editRouteLineRef.value.addPath(polygon)
  }

  wrapper.appendChild(contentNode)
  const floorId = editMap.status?.floor?.data?.id || '1'
  return editMap.value.addDomMarker(floorId, wrapper) // 之前记错了，这边直接传dom元素也是可以的
}
</script>

<template>
  <ul class="filter">
    <li v-for="key in Object.keys(classPoiList)" :key="key">
      <label :for="key">{{ classDict[key].name }}</label>
      <input type="checkbox" :id="key" v-model="checkedStatus[key]">
    </li>
  </ul>
</template>

<style scoped>
.filter {
  margin: 0;

  li,
  label,
  input {
    cursor: pointer;
  }
}
</style>

<style>
.marker {
  background-color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  transform: scale(0.7);
}
</style>
