<template>
  <component
    :is="dropdown?'q-btn-dropdown':'q-btn'"
    v-bind="$attrs"
    :loading="submitLoading"
    @click="btnClick"
  >
    <template #loading>
      <slot name="loading">
        <q-spinner-ball class="on-left" />处理中...
      </slot>
    </template>
    <template>
      <slot />
    </template>
  </component>
</template>
<script>
export default {
  name: 'kyb-btn',
  props: {
    clickAction: Function,
    dropdown: Boolean
  },
  data: function() {
    return { submitLoading: false }
  },
  created() {},
  methods: {
    async btnClick(e) {
      if (this.submitLoading) {
        this.$q.showNotifi('处理中, 请稍后...')
        return
      }
      this.submitLoading = true
      try {
        if (this.clickAction) {
          await this.clickAction(e)
        }
        await this.$emit('click', e)
      } catch (e) {
        this.$q.showNotifi('错误：' + e)
        throw e
      } finally {
        this.submitLoading = false
      }
    }
  }
}
</script>
<style lang="stylus"></style>
