<template>
  <UModal
    v-model:open="open"
    :title="`删除 ${item?.name}？`"
    :description="`确定吗？此操作不可被还原。`"
  >
    <slot />

    <template #body>
      <div class="flex justify-end gap-2">
        <UButton
          label="Cancel"
          color="neutral"
          variant="subtle"
          @click="open = false"
        />
        <UButton
          label="Delete"
          color="error"
          variant="solid"
          loading-auto
          @click="onSubmit"
        />
      </div>
    </template>
  </UModal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    item?: Item | null;
  }>(),
  {
    item: null,
  }
);

const { removeItem } = useItemsStore();

const open = defineModel<boolean>("open", { default: false });

async function onSubmit() {
  // await new Promise((resolve) => setTimeout(resolve, 1000));
  if (!props.item || props.item.id == null) {
    return;
  }
  removeItem(props.item.id);
  open.value = false;
}
</script>

<style></style>
