<template>
  <el-button
    v-bind="$attrs"
    :type="type"
    :size="size"
    :icon="icon"
    :native-type="nativeType"
    :loading="loading"
    :disabled="disabled"
    :plain="plain"
    :autofocus="autofocus"
    :round="round"
    :circle="circle"
    @click="temClick"
  >
    <slot></slot>
  </el-button>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { debounce } from 'lodash'

type IButtonType = PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'default'>
type ComponentSize = 'large' | 'medium' | 'small' | 'mini'
type IButtonNativeType = PropType<'button' | 'submit' | 'reset'>

export default defineComponent({
  name: 'SkDebounceButton',
  props: {
    wait: {
      type: Number,
      default: 1000,
    },
    type: {
      type: String as IButtonType,
      default: 'default',
    },
    size: {
      type: String as PropType<ComponentSize>,
      default: 'medium',
    },
    icon: String,
    nativeType: {
      type: String as IButtonNativeType,
      default: 'button',
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
  },
  emits: ['click'],
  setup(props, { attrs, emit }) {
    let click = null
    if (attrs.onClick) {
      click = attrs.onClick
    }
    const temClick = debounce(event => {
      emit('click', event)
    }, props.wait, {
      leading: true,
      trailing: false,
    })
    return {
      temClick,
    }
  },
})
</script>

