<script setup lang="ts">
import type { PopconfirmProps } from 'ant-design-vue';

import type { HPopconfirmProps } from './types';

defineOptions({ inheritAttrs: true });

const props = defineProps<HPopconfirmProps>();

const _loading = shallowRef(false);
const onConfirm: PopconfirmProps['onConfirm'] = async (e) => {
  if (props.onConfirm) {
    try {
      _loading.value = true;
      await props.onConfirm(e);
    } finally {
      _loading.value = false;
    }
  }
};
</script>

<template>
  <APopconfirm
    :align="{
      targetOffset: [0, 0],
    }"
    :arrow-point-at-center="!true"
    :cancel-button-props="{ disabled: _loading }"
    :description
    :disabled="_loading"
    :on-confirm
    :title
    placement="topRight"
  >
    <slot></slot>
  </APopconfirm>
</template>

<style lang="less">
[class^='ant-'] .anticon svg {
  vertical-align: unset; /* baseline */
}
</style>
