<template>
  <div class="device-layer-panel">
    <LayerPanelVertical
      v-if="mode === 'vertical'"
      :layerData="layerData"
      :getDynamicIcon="getDynamicIcon"
      :handleSvgError="handleSvgError"
      @select="onSelect"
    />
    <LayerPanelHorizontal
      v-if="mode === 'horizontal'"
      :layerData="layerData"
      :getDynamicIcon="getDynamicIcon"
      :handleSvgError="handleSvgError"
      @select="onSelect"
    />
  </div>
</template>

<script>
import LayerPanelVertical from '@vue2-client/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerPanelVertical.vue'
import LayerPanelHorizontal from '@vue2-client/base-client/components/common/AfMap/components/DeviceLayerPanel/LayerPanelHorizontal.vue'

export default {
  name: 'DeviceLayerPanel',
  components: {
    LayerPanelVertical,
    LayerPanelHorizontal
  },
  props: {
    /** vertical | horizontal */
    mode: {
      type: String,
      default: 'vertical'
    },
    layerData: {
      type: Array,
      required: true,
      default: () => []
    },
    getDynamicIcon: {
      type: Function,
      required: true
    },
    handleSvgError: {
      type: Function,
      required: true
    }
  },
  methods: {
    onSelect (layer) {
      this.$emit('select', layer)
    }
  }
}
</script>

<style scoped>
.device-layer-panel {
  width: 100%;
  height: 100%;
}
</style>
