import { ref } from 'vue'
import { useRouter } from 'vue-router'

export function tapMixins() {
  const tappedItem = ref<string | null>(null)
  const isProcessing = ref(false)
  const router = useRouter()

  const onTouchStart = (name: string) => {
    if (isProcessing.value) return
    tappedItem.value = name
  }

  const onTouchEnd = (name: string, url: string, id?: number, delay: number = 150) => {
    if (isProcessing.value || tappedItem.value !== name) return
    isProcessing.value = true
    
    setTimeout(() => {
      tappedItem.value = null
      setTimeout(() => {
        if (url) {
          if (id) {
            router.push({ name: url, params: { id } })
          } else {
            router.push({ name: url })
          }
        } else {
          showToast('正在开发中')
        }
        isProcessing.value = false
      }, 50)
    }, delay)
  }

  const onTouchCancel = (name: string) => {
    if (tappedItem.value === name) {
      tappedItem.value = null
    }
  }

  return {
    tappedItem,
    isProcessing,
    onTouchStart,
    onTouchEnd,
    onTouchCancel
  }
}