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

import HAPopconfirm from './HAPopconfirm/HAPopconfirm.vue';

async function handleConfirmAsync(e: MouseEvent) {
  console.debug('handleConfirmAsync', e);
  await new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
  message.success('哇！数据已被成功送入黑洞 🕳️');
}
</script>

<template>
  <ACard>
    <AButton>
      <template #icon> <FilterOutlined /> </template>
    </AButton>
    <ACard>
      <HAPopconfirm title="你确定吗？ 🤔 " description="别担心，我们只是假装很严肃 🎭" @confirm="handleConfirmAsync">
        <AButton size="small" danger type="text">HAPopconfirm</AButton>
      </HAPopconfirm>
    </ACard>
    <ACard class="mt-4">
      <AForm name="basic" :label-col="{ style: { width: '7em' } }">
        <AFormItem required label="Username">
          <AInput />
        </AFormItem>
        <AFormItem label="Password">
          <AInput />
        </AFormItem>
        <AFormItem>
          <AButton html-type="submit" type="primary">Submit</AButton>
        </AFormItem>
      </AForm>
    </ACard>
  </ACard>
</template>
