<template>
  <a-dropdown :popup-visible="visible" @update:popup-visible="handleClose">
    <slot></slot>
    <template #content>
      <a-doption @click="handleCustomAdd">
        <template #icon>
          <icon-plus-circle />
        </template>
        <span>自定义添加</span>
      </a-doption>
      <a-divider style="margin: 4px 0;" />
      <a-doption @click="handleAddDevice('server')">
        <template #icon>
          <icon-desktop />
        </template>
        <span>快速添加服务器</span>
      </a-doption>
      <a-doption @click="handleAddDevice('router')">
        <template #icon>
          <icon-file />
        </template>
        <span>快速添加路由器</span>
      </a-doption>
      <a-doption @click="handleAddDevice('switch')">
        <template #icon>
          <icon-safe />
        </template>
        <span>快速添加交换机</span>
      </a-doption>
      <a-doption @click="handleAddDevice('cloud')">
        <template #icon>
          <icon-cloud />
        </template>
        <span>快速添加云端节点</span>
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { IconPlusCircle, IconDesktop, IconFile, IconSafe, IconCloud } from '@arco-design/web-vue/es/icon';
import type { DeviceType } from '../types';

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
  (e: 'addDevice', type: DeviceType): void;
  (e: 'customAdd'): void;
}

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

const handleAddDevice = (type: DeviceType) => {
  emit('addDevice', type);
  handleClose(false);
};

const handleCustomAdd = () => {
  emit('customAdd');
  handleClose(false);
};

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