<template>
  <div class="layer-panel-container">
    <div
      v-for="(category, index) in layerData"
      :key="category.groupType + index"
      style="border: 0; background: transparent;"
    >
      <div class="layer-grid">
        <!-- 使用新的 LayerItem 子组件 -->
        <h4>{{ category.groupType || ' Category' }}</h4>
        <layer-item-vertical
          v-for="layer in category.groups"
          :key="layer.id || layer.groupId"
          :device-layer="layer"
          :getDynamicIcon="getDynamicIcon"
          :handleSvgError="handleSvgError"
          @click="handleLayerClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import LayerItemVertical from '@vue2-client/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerItemVertical.vue'
export default {
  name: 'LayerPanelVertical',
  components: {
    LayerItemVertical
  },
  props: {
    layerData: {
      type: Object,
      required: true
    },
    getDynamicIcon: {
      type: Function,
      required: true
    },
    handleSvgError: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleLayerClick (layer) {
      this.$emit('select', layer)
    },
  }
}
</script>

<style scoped>
/* 样式保持不变，但可以移除 .layer-toggle-button 相关的样式，因为它移到了 LayerItem 中 */
.layer-panel-container {
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
}

.layer-panel-container h4 {
  font-size: 16px;
  font-weight: 600;
  color: #626261;
  margin-top: 8px;
}

.layer-grid {
  display: grid;
  gap: 8px;
  padding: 2px;
}
</style>
