<script setup lang="ts">
  import { ApiSelect } from '/@/components/Form';
  import { Divider } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { VNode } from 'vue';
  import AlarmConfigDrawer from '/@/views/alarm/config/ContactDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';

  const [registerAlarmContactDrawer, { openDrawer }] = useDrawer();

  const Options = (props: { menuNode: VNode }) => {
    return props.menuNode;
  };

  const handleOpenAlarmConfig = () => {
    openDrawer();
  };

  const handleSuccess = () => {};
</script>

<template>
  <section>
    <ApiSelect class="!w-56" v-bind="$attrs">
      <template #dropdownRender="{ menuNode }">
        <Options :menuNode="menuNode" />
        <Divider class="!my-2" />
        <div class="cursor-pointer text-gray-500" @click="handleOpenAlarmConfig">
          <Icon icon="ant-design:plus-outlined" class="mx-2" />
          <span>新增告警配置</span>
        </div>
      </template>
    </ApiSelect>
    <AlarmConfigDrawer
      @register="registerAlarmContactDrawer"
      default-enable
      @success="handleSuccess"
    />
  </section>
</template>