#页面元素精确曝光与停留时间打点

// ====== 埋点方案架构大图 ======

// 1. 设置监视阈值（极其关键的参数：露出面积极致追踪）
const options = {
  root: null, // 默认采用用户最大的整个手机 / 电脑浏览器视窗
  // threshold: 0.5 意思是：只有当目标元素有 50% 面积跨过了门槛进入了屏幕视区，才触发回调！此即“面积曝光条件满足”
  threshold: 0.5 
};

// 2. 一个挂载着长停留时钟的池子大字典（用来记录谁正在被凝视）
const visibleTimers = new Map();

// 3. 构建高精尖监视系统
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    // 拿到被监视到发生动作的那个该死的目标节点（比如商品卡片）
    const targetEl = entry.target;
    const adId = targetEl.getAttribute('data-ad-id'); 

    // === 【情况 A】当卡片猛地出现，且超 50% 落入视口开始被凝视时 ===
    if (entry.isIntersecting) {
      // 一进入我们就设定一颗延迟 2 秒才引爆的打点炸弹雷！（防抖）
      const timer = setTimeout(() => {
        console.log(`📡【极其精细】精准上报：广告商品 ${adId} 有效且深度停留曝光超2秒达成！发给埋点服务！`);
        sendBeaconToLogServer({ id: adId, type: 'view', duration: 2000 });
        
        // 可选保护：成功上报后把此表踢出监视，防止用户反复上下拉扯作弊多次计算曝光
        observer.unobserve(targetEl); 
      }, 2000); // 核心要求之二：足足看上 2 秒起步
      
      // 必须保存这颗雷进字典！
      visibleTimers.set(adId, timer);
      
    } else {
      // === 【情况 B】当卡片还未停留够 2 秒就突然飘出了屏幕 ===
      if (visibleTimers.has(adId)) {
         // 那说明用户刚才只是极度快速非常敷衍地一滑而过，目光一瞥，根本没有深度停留！
         // 我们无情且迅速地物理掐死拆除那颗刚设定好还没爆炸的上报雷！将这条假数据扼杀。
         clearTimeout(visibleTimers.get(adId));
         visibleTimers.delete(adId);
      }
    }
  });
}, options);

// 4. 将全场上百个需要深度刺客监视的商品元素通通注册！
document.querySelectorAll('.goods-card-item').forEach(card => {
  observer.observe(card);
});