<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';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n(); // 加载国际化

  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>{{ t('rule.linkedge.index.addAlarmConfiguration') }}</span>
        </div>
      </template>
    </ApiSelect>
    <AlarmConfigDrawer
      @register="registerAlarmContactDrawer"
      default-enable
      :defaultOperateIsAdd="false"
      @success="handleSuccess"
    />
  </section>
</template>