<script lang="ts" setup>
import type { ButtonTheme, ButtonVariants, ButtonVariantSize } from '@vben-core/shadcn-ui';

import { ref } from 'vue';

import { Button, VbenIcon } from '@vben-core/shadcn-ui';

interface SubmitProps {
  /**
   * @zh_CN 主题
   */
  theme?: ButtonTheme;
  class?: string;
  /**
   * @zh_CN 最小加载时间
   * @en_US Minimum loading time
   */
  minLoadingTime?: number;
  /**
   * @zh_CN 文字
   */
  text?: string;
  size?: ButtonVariantSize;
  type?: ButtonVariants;
  /**
   * @zh_CN 提交函数
   */
  submit?: () => Promise<void>;
}

defineOptions({ name: 'Loading' });
const props = defineProps<SubmitProps>();
const spinning = ref(false);
async function runSubmit() {
  if (props.submit) {
    spinning.value = true;
    await new Promise((resolve) => setTimeout(resolve, props.minLoadingTime || 0));
    await props.submit();
    spinning.value = false;
  }
}
</script>
<template>
  <Button
    :disabled="spinning"
    :theme="props.theme"
    :type="props.type ?? 'primary'"
    :size="props.size ?? 'default'"
    :class="props.class"
    @click="runSubmit()"
  >
    <VbenIcon
      v-if="spinning"
      class="mr-1 animate-spin"
      icon="ant-design:loading-3-quarters-outlined"
      fallback
    />
    {{ props.text || '提交' }}
  </Button>
</template>
