<template>
  <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 flex flex-col" style="min-height: 100px; height: 100px;">
    <div class="flex items-center justify-between mb-2 pb-2 border-b border-gray-100">
      <div class="flex items-center">
        <el-icon size="16" class="mr-2">
          <TrendCharts />
        </el-icon>
        <h3 class="text-sm font-semibold text-gray-800">实时动态</h3>
      </div>
    </div>
    <div ref="danmakuWrapper" class="relative flex-1 overflow-hidden" style="height: 100px;">
      <div
        v-for="danmaku in activeDanmakus"
        :key="danmaku.id"
        :data-danmaku-id="danmaku.id"
        :class="['danmaku-item', `danmaku-${danmaku.status}`]"
        :style="{
          animationDuration: `${danmaku.duration}ms`
        }"
        @animationend="handleAnimationEnd(danmaku.id)"
      >
        <div :class="['danmaku-content', `danmaku-content-${danmaku.status}`]">
          <span :class="['company-name', `company-name-${danmaku.status}`]">{{ danmaku.companyName || '未知企业' }}</span>
          <span class="separator">·</span>
          <span :class="['product-name', `product-name-${danmaku.status}`]">{{ danmaku.productName || '未知产品' }}</span>
          <span class="separator">·</span>
          <span class="time-ago">{{ danmaku.timeAgo }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { apiCallApi } from '@/api'
import { TrendCharts } from '@element-plus/icons-vue'
import { onMounted, onUnmounted, ref } from 'vue'
  
  const props = defineProps({
    refreshInterval: {
      type: Number,
      default: 3000 // 默认3秒刷新一次
    },
    danmakuSpeed: {
      type: Number,
      default: 15000 // 弹幕滚动速度（毫秒），25秒让弹幕显示更久
    }
  })
  
  // 固定配置
  const FETCH_PAGE_SIZE = 8// 每次获取的记录数
  const BASE_EMIT_INTERVAL = 5500// 基础5秒，避免弹幕重叠
  const RANDOM_EMIT_RANGE = 2000   // 0-1秒随机范围
  
  const enabled = ref(true)
  const danmakuWrapper = ref(null)
  const activeDanmakus = ref([]) // 当前正在显示的弹幕
  const pendingQueue = ref([]) // 待处理的弹幕队列
  const lastFetchTime = ref(null)
  const fetchTimer = ref(null)
  const processedIds = ref(new Set()) // 已处理的记录ID，确保每条数据只显示一次
  const emitTimer = ref(null) // 弹幕发射定时器
  const timeUpdateTimer = ref(null) // 时间更新定时器
  
  // 计算时间差（多少分钟前）
  const calculateTimeAgo = (timeStr) => {
    if (!timeStr) return '刚刚'
    
    try {
      const time = new Date(timeStr)
      const now = new Date()
      const diff = Math.floor((now - time) / 1000 / 60) // 分钟差
      
      if (diff < 1) return '刚刚'
      if (diff < 60) return `${diff}分钟前`
      
      const hours = Math.floor(diff / 60)
      if (hours < 24) return `${hours}小时前`
      
      const days = Math.floor(hours / 24)
      return `${days}天前`
    } catch (e) {
      return '刚刚'
    }
  }
  
  // 获取最新API调用记录
  const fetchLatestApiCalls = async () => {
    if (!enabled.value) return
    
    try {
      const params = {
        page: 1,
        page_size: FETCH_PAGE_SIZE,
        sort_by: 'created_at',
        sort_order: 'desc'
      }
      
      // 如果上次获取过数据，只获取更新的记录
      if (lastFetchTime.value) {
        const now = new Date()
        const oneMinuteAgo = new Date(now.getTime() - 60000) // 1分钟前
        params.start_time = oneMinuteAgo.toISOString().replace('T', ' ').substring(0, 19)
      }
      
      const response = await apiCallApi.getAdminApiCalls(params)
      
      // 处理响应数据，兼容不同的响应格式
      let items = []
      if (response && response.data) {
        if (response.data.items) {
          items = response.data.items
        } else if (Array.isArray(response.data)) {
          items = response.data
        }
      }
      
      if (items.length > 0) {
        // 过滤已处理过的记录，确保每条数据只显示一次
        const newItems = items.filter(item => {
          if (processedIds.value.has(item.id)) {
            return false
          }
          processedIds.value.add(item.id)
          return true
        })
        
        // 按时间顺序排序（从旧到新），确保按顺序显示
        newItems.sort((a, b) => {
          const timeA = new Date(a.created_at || a.start_at || 0)
          const timeB = new Date(b.created_at || b.start_at || 0)
          return timeA - timeB
        })
        
        // 将新记录按顺序添加到待处理队列
        newItems.forEach(item => {
          addToPendingQueue(item)
        })
        
        lastFetchTime.value = new Date()
      }
    } catch (error) {
      console.error('获取API调用记录失败:', error)
    }
  }
  
  // 添加到待处理队列
  const addToPendingQueue = (item) => {
    pendingQueue.value.push(item)
    
    // 限制队列大小，避免内存溢出（最多保留150条）
    if (pendingQueue.value.length > 150) {
      pendingQueue.value.shift() // 移除最旧的一条
    }
  }
  
  // 发射弹幕（按固定间隔连续发射，允许多条同时显示）
  const emitDanmaku = () => {
    if (!enabled.value) {
      emitTimer.value = null
      return
    }
    
    // 从队列取出一条弹幕
    if (pendingQueue.value.length === 0) {
      // 队列为空，等待一段时间后重试
      emitTimer.value = setTimeout(() => {
        emitDanmaku()
      }, 1000)
      return
    }
    
    const item = pendingQueue.value.shift()
    if (!item) {
      emitTimer.value = setTimeout(() => {
        emitDanmaku()
      }, 1000)
      return
    }
    
    // 创建弹幕对象（使用唯一ID确保不重复）
    const danmaku = {
      id: `danmaku-${item.id}-${Date.now()}-${Math.random()}`,
      companyName: item.company_name || item.user?.company_name || '未知企业',
      productName: item.product_name || '未知产品',
      status: item.status || 'pending',
      startAt: item.start_at || item.created_at,
      timeAgo: calculateTimeAgo(item.start_at || item.created_at),
      duration: props.danmakuSpeed
    }
    
    // 添加到活跃弹幕列表（立即开始动画）
    activeDanmakus.value.push(danmaku)
    
    // 安排下一条弹幕的发射（随机间隔：5s + 0-1s）
    const interval = BASE_EMIT_INTERVAL + Math.random() * RANDOM_EMIT_RANGE
    emitTimer.value = setTimeout(() => {
      emitDanmaku()
    }, interval)
  }

  // 启动弹幕发射系统
  const startEmissionSystem = () => {
    if (emitTimer.value) {
      clearTimeout(emitTimer.value)
    }
    emitDanmaku() // 开始第一次发射
  }
  
  // 处理动画结束事件（弹幕移出屏幕时移除）
  const handleAnimationEnd = (id) => {
    const index = activeDanmakus.value.findIndex(d => d.id === id)
    if (index > -1) {
      activeDanmakus.value.splice(index, 1)
    }
  }
  
  // 更新所有弹幕的时间显示
  const updateTimeAgo = () => {
    activeDanmakus.value.forEach(danmaku => {
      if (danmaku.startAt) {
        danmaku.timeAgo = calculateTimeAgo(danmaku.startAt)
      }
    })
  }
  
  // 开始获取数据
  const startFetching = () => {
    // 立即获取一次
    fetchLatestApiCalls()
    
    // 设置定时器定期获取数据
    if (fetchTimer.value) {
      clearInterval(fetchTimer.value)
    }
    fetchTimer.value = setInterval(() => {
      fetchLatestApiCalls()
    }, props.refreshInterval)
    
    // 启动弹幕发射系统
    startEmissionSystem()
    
    // 定时更新"多少分钟前"
    if (timeUpdateTimer.value) {
      clearInterval(timeUpdateTimer.value)
    }
    timeUpdateTimer.value = setInterval(() => {
      if (enabled.value) {
        updateTimeAgo()
      }
    }, 60000) // 每分钟更新一次时间显示
  }
  
  // 停止获取数据
  const stopFetching = () => {
    if (fetchTimer.value) {
      clearInterval(fetchTimer.value)
      fetchTimer.value = null
    }
    if (emitTimer.value) {
      clearTimeout(emitTimer.value)
      emitTimer.value = null
    }
    if (timeUpdateTimer.value) {
      clearInterval(timeUpdateTimer.value)
      timeUpdateTimer.value = null
    }
  }
  
  onMounted(() => {
    if (enabled.value) {
      startFetching()
    }
  })
  
  onUnmounted(() => {
    stopFetching()
  })
  </script>

<style scoped>
.danmaku-item {
  position: absolute;
  right: 0;
  white-space: nowrap;
  animation: danmaku-scroll linear forwards;
  pointer-events: none;
  will-change: transform;
  top: 50%;
}

@keyframes danmaku-scroll {
  from {
    transform: translate(100%, -50%);
    opacity: 1;
  }
  to {
    transform: translate(-200%, -50%);
    opacity: 1;
  }
}

.danmaku-content {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: linear-gradient(to right, #eff6ff, #faf5ff);
  border: 1px solid #bfdbfe;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(4px);
}

.danmaku-content-success {
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
  border-color: #86efac;
}

.danmaku-content-failed {
  background: linear-gradient(to right, #fef2f2, #fff1f2);
  border-color: #fca5a5;
}

.danmaku-content-pending {
  background: linear-gradient(to right, #fefce8, #fffbeb);
  border-color: #fde047;
}

.company-name {
  color: #1d4ed8;
  font-weight: 600;
}

.company-name-success {
  color: #15803d;
}

.company-name-failed {
  color: #dc2626;
}

.company-name-pending {
  color: #ca8a04;
}

.product-name {
  color: #7c3aed;
}

.product-name-success {
  color: #059669;
}

.product-name-failed {
  color: #e11d48;
}

.product-name-pending {
  color: #d97706;
}

.product-id {
  color: #4b5563;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
}

.separator {
  color: #9ca3af;
}

.time-ago {
  color: #6b7280;
  font-style: italic;
}
</style>

