<template>
  <div>
    <!-- 文件处理列表 -->
    <div class="mt-15px grid grid-cols-1 gap-2">
      <div
        v-for="(file, index) in modelValue.list"
        :key="index"
        class="flex items-center py-4px px-12px border-l-4 border-l-[#409eff] rounded-sm shadow-sm hover:bg-[#ecf5ff] transition-all duration-300"
      >
        <!-- 文件图标和名称 -->
        <div class="flex items-center min-w-[200px] mr-10px">
          <Icon icon="ep:document" class="mr-8px text-[#409eff]" />
          <span class="text-[13px] text-[#303133] break-all">{{ file.name }}</span>
        </div>

        <!-- 处理进度 -->
        <div class="flex-1">
          <el-progress
            :percentage="file.progress || 0"
            :stroke-width="10"
            :status="isProcessComplete(file) ? 'success' : ''"
          />
        </div>

        <!-- 分段数量 -->
        <div class="ml-10px text-[13px] text-[#606266]">
          分段数量：{{ file.count ? file.count : '-' }}
        </div>
      </div>
    </div>

    <!-- 底部完成按钮 -->
    <div class="flex justify-end mt-20px">
      <el-button
        :type="allProcessComplete ? 'success' : 'primary'"
        :disabled="!allProcessComplete"
        @click="handleComplete"
      >
        完成
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { KnowledgeSegmentApi } from '@/api/ai/knowledge/segment'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])
const parent = inject('parent') as any
const pollingTimer = ref<number | null>(null) // 轮询定时器 ID，用于跟踪和清除轮询进程

/** 判断文件处理是否完成 */
const isProcessComplete = (file) => {
  return file.progress === 100
}

/** 判断所有文件是否都处理完成 */
const allProcessComplete = computed(() => {
  return props.modelValue.list.every((file) => isProcessComplete(file))
})

/** 完成按钮点击事件处理 */
const handleComplete = () => {
  if (parent?.exposed?.handleBack) {
    parent.exposed.handleBack()
  }
}

/** 获取文件处理进度 */
const getProcessList = async () => {
  try {
    // 1. 调用 API 获取处理进度
    const documentIds = props.modelValue.list.filter((item) => item.id).map((item) => item.id)
    if (documentIds.length === 0) {
      return
    }
    const result = await KnowledgeSegmentApi.getKnowledgeSegmentProcessList(documentIds)

    // 2.1更新进度
    const updatedList = props.modelValue.list.map((file) => {
      const processInfo = result.find((item) => item.documentId === file.id)
      if (processInfo) {
        // 计算进度百分比：已嵌入数量 / 总数量 * 100
        const progress =
          processInfo.embeddingCount && processInfo.count
            ? Math.floor((processInfo.embeddingCount / processInfo.count) * 100)
            : 0
        return {
          ...file,
          progress: progress,
          count: processInfo.count || 0
        }
      }
      return file
    })

    // 2.2 更新数据
    emit('update:modelValue', {
      ...props.modelValue,
      list: updatedList
    })

    // 3. 如果未完成，继续轮询
    if (!updatedList.every((file) => isProcessComplete(file))) {
      pollingTimer.value = window.setTimeout(getProcessList, 3000)
    }
  } catch (error) {
    // 出错后也继续轮询
    console.error('获取处理进度失败:', error)
    pollingTimer.value = window.setTimeout(getProcessList, 5000)
  }
}

/** 组件挂载时开始轮询 */
onMounted(() => {
  // 1. 初始化进度为 0
  const initialList = props.modelValue.list.map((file) => ({
    ...file,
    progress: 0
  }))

  emit('update:modelValue', {
    ...props.modelValue,
    list: initialList
  })

  // 2. 开始轮询获取进度
  getProcessList()
})

/** 组件卸载前清除轮询 */
onBeforeUnmount(() => {
  // 1. 清除定时器
  if (pollingTimer.value) {
    clearTimeout(pollingTimer.value)
    pollingTimer.value = null
  }
})
</script>