<template>
  <!-- FIXED: 从 vue 3.1.5 升级到 3.2.1 时这里出错了，slot也要有key -->
  <a-button v-bind="newAttrs" :loading="inInterval" @click="insideClick">
    <template v-for="(_, slot) of $slots" #[slot]="scope" :key="slot">
      <slot v-bind="asAny(scope)" :key="slot" :name="asAny(slot)" />
    </template>
    <!-- <slot name="default" /> -->
  </a-button>
</template>

<script lang="ts">
import { reactive } from "vue";

// 默认loading一秒，以免重复点击
export default {
  name: "QmButton",
  inheritAttrs: false,
  props: {
    clickTimeout: { type: Number, required: false, default: 1000 },
  },
  // @ts-ignore
  setup(props, { attrs }) {
    let newAttrs = reactive({});
    Object.assign(newAttrs, attrs);
    let parentOnClick = attrs.onClick;
    // @ts-ignore
    delete newAttrs["onClick"];

    let inInterval = $ref(false);
    const insideClick = (e: MouseEvent) => {
      inInterval = true;
      // false warning
      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
      setTimeout(() => (inInterval = false), props.clickTimeout);
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      parentOnClick(e);
      // 确保焦点不停留在此处，以免Enter键触发
      // @ts-ignore
      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
      e.target?.blur();
    };
    // newAttrs.onClick = insideClick;

    function asAny(input: any): any {
      return input;
    }
    return { newAttrs, inInterval, insideClick, asAny };
  },
};
</script>
