<template>
  <a-button :loading="loading" @click="onClick">
    <template #icon>
      <icon-download />
    </template>
    {{ label }}
  </a-button>
</template>

<script lang="ts" setup>
import { IconDownload } from '@arco-design/web-vue/es/icon';
import useLoading from '@/hooks/loading';

const props = withDefaults(
  defineProps<{
    label: string;
    onDownload: () => Promise<void>;
  }>(),
  {
    label: '导出',
  }
);

const { loading, setLoading } = useLoading(false);

const onClick = () => {
  setLoading(true);
  props.onDownload().finally(() => setLoading(false));
};
</script>

<style scoped></style>