<template>
  <el-button v-bind="$attrs" :loading="loading" @click="handleClick">
    <slot />
  </el-button>
</template>

<script>
export default {
  props: {
    api: {
      type: Function,
      required: true,
    },
  },

  data() {
    return {
      loading: false,
    };
  },

  methods: {
    async handleClick() {
      this.loading = true;

      try {
        const response = await this.api();
        this.$emit("success", response);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>
