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

import HAPopconfirmButton from './HAPopconfirmButton.vue';

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

<template>
  <ACard>
    <ACard>
      <APopconfirm @confirm="handleConfirmAsync">
        <AButton size="small" type="text">APopconfirm</AButton>
      </APopconfirm>

      <AButton size="small" type="text">AButton</AButton>

      <HAPopconfirmButton
        title="你确定吗？ 🤔 "
        description="别担心，我们只是假装很严肃 🎭"
        @confirm="handleConfirmAsync"
      >
        <AButton size="small" danger type="text">HAPopconfirmButton</AButton>
      </HAPopconfirmButton>
    </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>
