// main.ts
import clickOnce from '@/directives/clickOnce'

app.directive('click-once', clickOnce)

<template>
  <!-- 異步操作示例 -->
  <el-button 
    type="primary" 
    v-click-once="handleSubmit">
    提交表單
  </el-button>

  <!-- 帶參數(shù)的異步操作 -->
  <el-button 
    type="success" 
    v-click-once="() => handleSave(formData)">
    保存數(shù)據(jù)
  </el-button>
</template>

<script setup lang="ts">
const handleSubmit = async () => {
  // 模擬 API 調(diào)用
  await api.submitForm(formData)
  ElMessage.success('提交成功')
}

const handleSave = async (data: any) => {
  await api.saveData(data)
  ElMessage.success('保存成功')
}
</script>

<template>
  <el-button 
    type="primary" 
    :loading="loading"
    :disabled="loading"
    @click="handleSubmit">
    提交
  </el-button>
</template>

<script setup lang="ts">
const loading = ref(false)

const handleSubmit = async () => {
  if (loading.value) return
  
  loading.value = true
  try {
    await api.submit()
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <el-button 
    type="primary" 
    v-click-once="handleSubmit">
    提交
  </el-button>
</template>

<script setup lang="ts">
const handleSubmit = async () => {
  await api.submit()
}
</script>

import type { Directive } from 'vue'
import { createVNode, render } from 'vue'
import { useThrottleFn } from '@vueuse/core'
import { Loading } from '@element-plus/icons-vue'

const THROTTLE_TIME = 1500

const clickOnce: Directive<HTMLButtonElement, () => Promise<unknown> | void> = {
  mounted(el, binding) {
    const handleClick = useThrottleFn(
      () => {
        // 如果元素已禁用，直接返回（雙重保險）
        if (el.disabled) return

        // 禁用按鈕
        el.disabled = true
        // 添加 loading 狀態(tài)
        el.classList.add('is-loading')

        // 創(chuàng)建 loading 圖標容器
        const loadingIconContainer = document.createElement('i')
        loadingIconContainer.className = 'el-icon is-loading'

        // 使用 Vue 的 createVNode 和 render 來渲染 Loading 組件
        const vnode = createVNode(Loading)
        render(vnode, loadingIconContainer)

        // 將 loading 圖標插入到按鈕開頭
        el.insertBefore(loadingIconContainer, el.firstChild)

        // 將 loading 圖標存儲到元素上，以便后續(xù)移除
        ;(el as any)._loadingIcon = loadingIconContainer
        ;(el as any)._loadingVNode = vnode

        // 執(zhí)行綁定的函數(shù)（應(yīng)返回 Promise 或普通函數(shù)）
        const result = binding.value?.()

        const removeLoading = () => {
          el.disabled = false
          // 移除 loading 狀態(tài)
          el.classList.remove('is-loading')
          const icon = (el as any)._loadingIcon
          if (icon && icon.parentNode === el) {
            // 卸載 Vue 組件
            render(null, icon)
            el.removeChild(icon)
            delete (el as any)._loadingIcon
            delete (el as any)._loadingVNode
          }
        }

        // 如果返回的是 Promise，則在完成時恢復(fù)；否則立即恢復(fù)
        if (result instanceof Promise) {
          result.finally(removeLoading)
        } else {
          // 非異步操作，立即恢復(fù)（或根據(jù)需求決定是否恢復(fù)）
          // 通常建議只用于異步操作，所以這里也可以不處理，或給出警告
          removeLoading()
        }
      },
      THROTTLE_TIME,
    )

    // 將 throttled 函數(shù)存儲到元素上，以便在 unmount 時移除
    ;(el as any)._throttledClick = handleClick
    el.addEventListener('click', handleClick)
  },

  beforeUnmount(el) {
    const handleClick = (el as any)._throttledClick
    if (handleClick) {
      el.removeEventListener('click', handleClick)
      // 取消可能還在等待的 throttle
      handleClick.cancel?.()
      delete (el as any)._throttledClick
    }
  },
}

export default clickOnce