<script setup lang="ts">
import {Menu} from "@vicons/ionicons5";
import {useLayerStore} from "@/store/layerManagerStore.ts";
import {ref} from "vue";
let layerShow = ref(true)
let layer: {name:string,id:string} = {
  name:'', id:''
}
let itemOptions = [
  {label: "移除图层", key: 'remove'},
  {label: "缩放至图层", key: 'lookAt'},
  {label: "移至顶层", key: 'moveTop'},
  {label: "移至底层", key: 'moveBottom'},
]
function handleLayerItem(key:any) {
  useLayerStore().Layers.forEach((layer) => {
    if (layer.lName == props.lname && layer.lId == props?.lid) {
      switch (key) {
        case 'remove': {
          if(layer.dataSource){
            layer.dataSource.then((ds)=>{
              window.viewer.dataSources.remove(ds)
            })
          }
          if(layer.imageLayer){
            window.viewer.imageryLayers.remove(layer.imageLayer)
          }
          break
        }
        case 'lookAt': {
          if(layer.dataSource) window.viewer.flyTo(layer.dataSource)
          if(layer.imageLayer) window.viewer.flyTo(layer.imageLayer)
          break
        }
        case 'moveTop': {
          //TODO:
          break
        }
        case 'moveBottom': {
          // TODO:
          break
        }
      }
    }
  })

}
const props = defineProps<{ lname: String, lid?: String }>()
function onCheck(checked: boolean) {
  useLayerStore().Layers.forEach((layer) => {
    if (layer.lName == props.lname && layer.lId == props?.lid) {
      if(checked){
        // 选中事件
        if(layer.dataSource) {    // dataSource视Promise对象
          layer.dataSource.then((ds)=>{
            ds.show = true
          })
        }
        if(layer.imageLayer)  layer.imageLayer.show = true
        window.viewer.flyTo(layer.dataSource);
      }
      else{ //取消选中  隐藏图层
        if(layer.dataSource) {
          layer.dataSource.then((ds)=>{
            ds.show = false
          })
        }
        if(layer.imageLayer)  layer.imageLayer.show = false
        window.viewer.scene.requestRender()
        layer.show = false
      }
    }
  })
  layerShow.value = !layerShow.value

}
</script>

<template>
  <n-row justify-content="space-between" style="align-items: center; border-bottom: 1px solid #e7e6e6">
    <n-checkbox size="medium" :label="props.lname" style="margin: 0 0 0 1rem;"
                :checked="layerShow" @update:checked="onCheck"/>

    <n-dropdown :options="itemOptions" @select="handleLayerItem">
      <n-button tertiary type="success" size="medium">
        <template #icon>
          <n-icon><Menu/></n-icon>
        </template>
      </n-button>
    </n-dropdown>
  </n-row>
</template>

<style scoped>

</style>