<template>
  <a-dropdown :popup-visible="visible" @update:popup-visible="handleClose">
    <slot></slot>
    <template #content>
      <a-doption @click="handleSelect('grid')">
        <template #icon>
          <icon-apps />
        </template>
        网格布局
      </a-doption>
      <a-doption @click="handleSelect('hierarchical')">
        <template #icon>
          <icon-list />
        </template>
        层次布局
      </a-doption>
      <a-doption @click="handleSelect('circular')">
        <template #icon>
          <icon-minus-circle />
        </template>
        环形布局
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { IconApps, IconList, IconMinusCircle } from '@arco-design/web-vue/es/icon';

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'selectLayout', layoutType: 'grid' | 'hierarchical' | 'circular'): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const handleSelect = (layoutType: 'grid' | 'hierarchical' | 'circular') => {
  emit('selectLayout', layoutType);
  emit('update:visible', false);
};

const handleClose = (value: boolean) => {
  emit('update:visible', value);
};
</script>
