<template>
  <div
    class="relative inline-block"
    @mouseenter="showTooltipHandler"
    @mouseleave="hideTooltipHandler"
  >
    <!-- 文件上传按钮 -->
    <el-button
      v-if="!disabled"
      circle
      size="small"
      class="upload-btn relative transition-all-200ms"
      :class="{ 'has-files': fileList.length > 0 }"
      @click="triggerFileInput"
      :disabled="fileList.length >= limit"
    >
      <Icon icon="ep:paperclip" :size="16" />
      <!-- 文件数量徽章 -->
      <span
        v-if="fileList.length > 0"
        class="absolute -top-1 -right-1 bg-red-500 text-white text-10px px-1 rounded-8px min-w-4 h-4 flex items-center justify-center leading-none font-medium"
      >
        {{ fileList.length }}
      </span>
    </el-button>

    <!-- 隐藏的文件输入框 -->
    <input
      ref="fileInputRef"
      type="file"
      multiple
      style="display: none"
      :accept="acceptTypes"
      @change="handleFileSelect"
    />

    <!-- Hover 显示的文件列表 -->
    <div
      v-if="fileList.length > 0 && showTooltip"
      class="file-tooltip"
      @mouseenter="showTooltipHandler"
      @mouseleave="hideTooltipHandler"
    >
      <div class="tooltip-arrow"></div>
      <div class="max-h-200px overflow-y-auto file-list">
        <div
          v-for="(file, index) in fileList"
          :key="index"
          class="flex items-center justify-between p-2 mb-1 bg-gray-50 rounded-6px text-12px transition-all-200ms last:mb-0 hover:bg-gray-100"
          :class="{ 'opacity-70': file.uploading }"
        >
          <div class="flex items-center flex-1 min-w-0">
            <Icon :icon="getFileIcon(file.name)" class="text-blue-500 mr-2 flex-shrink-0" />
            <span
              class="font-medium text-gray-900 mr-1 overflow-hidden text-ellipsis whitespace-nowrap flex-1"
              >{{ file.name }}</span
            >
            <span class="text-gray-500 flex-shrink-0 text-11px"
              >({{ formatFileSize(file.size) }})</span
            >
          </div>
          <div class="flex items-center gap-1 flex-shrink-0 ml-2">
            <el-progress
              v-if="file.uploading"
              :percentage="file.progress || 0"
              :show-text="false"
              size="small"
              class="w-60px"
            />
            <el-button
              v-else-if="!disabled"
              link
              type="danger"
              size="small"
              @click="removeFile(index)"
            >
              <Icon icon="ep:close" :size="12" />
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { formatFileSize, getFileIcon } from '@/utils/file'

export interface FileItem {
  name: string
  size: number
  url?: string
  uploading?: boolean
  progress?: number
  raw?: File
}

defineOptions({ name: 'MessageFileUpload' })

const props = defineProps({
  modelValue: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  limit: {
    type: Number,
    default: 5
  },
  maxSize: {
    type: Number,
    default: 10 // MB
  },
  acceptTypes: {
    type: String,
    default: '.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md'
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'upload-success', 'upload-error'])

const fileInputRef = ref<HTMLInputElement>()
const fileList = ref<FileItem[]>([]) // 内部管理文件列表
const uploadedUrls = ref<string[]>([]) // 已上传的 URL 列表
const showTooltip = ref(false) // 控制 tooltip 显示
const hideTimer = ref<NodeJS.Timeout | null>(null) // 隐藏延迟定时器
const message = useMessage()
const { httpRequest } = useUpload()

/** 监听 v-model 变化 */
watch(
  () => props.modelValue,
  (newVal) => {
    uploadedUrls.value = [...newVal]
    // 如果外部清空了 URLs，也清空内部文件列表
    if (newVal.length === 0) {
      fileList.value = []
    }
  },
  { immediate: true, deep: true }
)

/** 触发文件选择 */
const triggerFileInput = () => {
  fileInputRef.value?.click()
}

/** 显示 tooltip */
const showTooltipHandler = () => {
  if (hideTimer.value) {
    clearTimeout(hideTimer.value)
    hideTimer.value = null
  }
  showTooltip.value = true
}

/** 隐藏 tooltip */
const hideTooltipHandler = () => {
  hideTimer.value = setTimeout(() => {
    showTooltip.value = false
    hideTimer.value = null
  }, 300) // 300ms 延迟隐藏
}

/** 处理文件选择 */
const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = Array.from(target.files || [])
  if (files.length === 0) {
    return
  }
  // 检查总文件数是否超过限制
  if (files.length + fileList.value.length > props.limit) {
    message.error(`最多只能上传 ${props.limit} 个文件`)
    target.value = '' // 清空输入
    return
  }
  // 处理每个文件
  files.forEach((file) => {
    if (file.size > props.maxSize * 1024 * 1024) {
      message.error(`文件 ${file.name} 大小超过 ${props.maxSize}MB`)
      return
    }
    const fileItem: FileItem = {
      name: file.name,
      size: file.size,
      uploading: true,
      progress: 0,
      raw: file
    }
    fileList.value.push(fileItem)
    // 立即开始上传
    uploadFile(fileItem)
  })

  // 清空 input 值，允许重复选择相同文件
  target.value = ''
}

/** 上传文件 */
const uploadFile = async (fileItem: FileItem) => {
  try {
    // 模拟上传进度
    const progressInterval = setInterval(() => {
      if (fileItem.progress! < 90) {
        fileItem.progress = (fileItem.progress || 0) + Math.random() * 10
      }
    }, 100)

    // 调用上传接口
    // const formData = new FormData()
    // formData.append('file', fileItem.raw!)
    const response = await httpRequest({
      file: fileItem.raw!,
      filename: fileItem.name
    } as any)
    fileItem.uploading = false
    fileItem.progress = 100
    fileItem.url = (response as any).data
    // 添加到 URL 列表
    uploadedUrls.value.push(fileItem.url!)

    clearInterval(progressInterval)

    emit('upload-success', fileItem)
    updateModelValue()
  } catch (error) {
    fileItem.uploading = false
    message.error(`文件 ${fileItem.name} 上传失败`)
    emit('upload-error', error)

    // 移除上传失败的文件
    const index = fileList.value.indexOf(fileItem)
    if (index > -1) {
      removeFile(index)
    }
  }
}

/** 删除文件 */
const removeFile = (index: number) => {
  // 从 URL 列表中移除
  const removedFile = fileList.value[index]
  fileList.value.splice(index, 1)
  if (removedFile.url) {
    const urlIndex = uploadedUrls.value.indexOf(removedFile.url)
    if (urlIndex > -1) {
      uploadedUrls.value.splice(urlIndex, 1)
    }
  }

  updateModelValue()
}

/** 更新 v-model */
const updateModelValue = () => {
  emit('update:modelValue', [...uploadedUrls.value])
}

// 暴露方法
defineExpose({
  triggerFileInput,
  clearFiles: () => {
    fileList.value = []
    uploadedUrls.value = []
    updateModelValue()
  }
})

// 组件销毁时清理定时器
onUnmounted(() => {
  if (hideTimer.value) {
    clearTimeout(hideTimer.value)
  }
})
</script>

<style scoped>
/* 上传按钮样式 */
.upload-btn {
  --el-button-bg-color: transparent;
  --el-button-border-color: transparent;
  --el-button-hover-bg-color: var(--el-fill-color-light);
  --el-button-hover-border-color: transparent;
  color: var(--el-text-color-regular);
}

.upload-btn.has-files {
  color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
}

.file-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid var(--el-border-color-light);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 240px;
  max-width: 320px;
  padding: 8px;
  animation: fadeInDown 0.2s ease;
}

.tooltip-arrow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--el-border-color-light);
}

/* Tooltip 箭头伪元素 */
.tooltip-arrow::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid white;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 滚动条样式 */
.file-list::-webkit-scrollbar {
  width: 4px;
}

.file-list::-webkit-scrollbar-track {
  background: transparent;
}

.file-list::-webkit-scrollbar-thumb {
  background: var(--el-border-color-light);
  border-radius: 2px;
}

.file-list::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color);
}
/* 滚动条样式 */
.file-list::-webkit-scrollbar {
  width: 4px;
}

.file-list::-webkit-scrollbar-track {
  background: transparent;
}

.file-list::-webkit-scrollbar-thumb {
  background: var(--el-border-color-light);
  border-radius: 2px;
}

.file-list::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color);
}
</style>