/**
 * 初始化配置
 * @param {*} options 配置信息
 */
function init(options) {
  // ------- 加載配置 ----------
  loadConfig(options);
}

/**
 * 加載配置
 * @param {*} options 
 */
export function loadConfig(options) {
  const { 
    appId,  // 系統(tǒng)id
    userId, // 用戶id
    reportUrl, // 后端url
    autoTracker, // 自動埋點
    delay, // 延遲和合并上報的功能
    hashPage, // 是否hash錄有
    errorReport // 是否開啟錯誤監(jiān)控
  } = options;

  // --------- appId ----------------
  if (appId) {
    window['_monitor_app_id_'] = appId;
  }

  // --------- userId ----------------
  if (userId) {
    window['_monitor_user_id_'] = userId;
  }

  // --------- 服務(wù)端地址 ----------------
  if (reportUrl) {
    window['_monitor_report_url_'] = reportUrl;
  }

  // -------- 合并上報的間隔 ------------
  if (delay) {
    window['_monitor_delay_'] = delay;
  }

  // --------- 是否開啟錯誤監(jiān)控 ------------
  if (errorReport) {
    errorTrackerReport();
  }

  // --------- 是否開啟無痕埋點 ----------
  if (autoTracker) {
    autoTrackerReport();
  }

  // ----------- 路由監(jiān)聽 --------------
  if (hashPage) {
    hashPageTrackerReport(); // hash路由上報
  } else {
    historyPageTrackerReport(); // history路由上報
  }
}

      {/* 手動埋點 */}
      <button
        onClick={() => {
          tracker('submit', '提交表單');
          tracker('click', '用戶點擊');
          tracker('visit', '訪問新頁面');
        }}
      >按鈕1</button>

      {/* 屬性埋點 */}
      <button  data-target="按鈕2被點擊了">按鈕2</button>

      {/* 自動埋點 */}
      <button 
        style={{ marginRight: 20 }}
        onClick={(e) => {
          //業(yè)務(wù)代碼
        }}
      >按鈕3</button>

/**
 * 自動上報
 */
export function autoTrackerReport() {
  // 自動上報
  document.body.addEventListener('click', function (e) {
    const clickedDom = e.target;

    // 獲取標(biāo)簽上的data-target屬性的值
    let target = clickedDom?.getAttribute('data-target');

    // 獲取標(biāo)簽上的data-no屬性的值
    let no = clickedDom?.getAttribute('data-no');
    // 避免重復(fù)上報
    if (no) {
      return;
    }

    if (target) {
      lazyReport('action', {
        actionType: 'click',
        data: target
      });
    } else {
      // 獲取被點擊元素的dom路徑
      const path = getPathTo(clickedDom);
      lazyReport('action', {
        actionType: 'click',
        data: path
      });
    }
  }, false);
}

      {/* 自動埋點 */}
      <button 
        style={{ marginRight: 20 }}
        onClick={(e) => {
          e.stopPropagation(); // 阻止事件冒泡
          tracker('submit', '按鈕1被點擊了'); //手動上報
        }}
      >按鈕3</button>

import { lazyReport } from './report';

/**
 * history路由監(jiān)聽
 */
export function historyPageTrackerReport() {
  let beforeTime = Date.now(); // 進入頁面的時間
  let beforePage = ''; // 上一個頁面

  // 獲取在某個頁面的停留時間
  function getStayTime() {
    let curTime = Date.now();
    let stayTime = curTime - beforeTime;
    beforeTime = curTime;
    return stayTime;
  }

  /**
   * 重寫pushState和replaceState方法
   * @param {*} name 
   * @returns 
   */
  const createHistoryEvent = function (name) {
    // 拿到原來的處理方法
    const origin = window.history[name];
    return function(event) {
      // if (name === 'replaceState') {
      //   const { current } = event;
      //   const pathName = location.pathname;
      //   if (current === pathName) {
      //     let res = origin.apply(this, arguments);
      //     return res;
      //   }
      // }

  
      let res = origin.apply(this, arguments);
      let e = new Event(name);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return res;
    };
  };

  // history.pushState
  window.addEventListener('pushState', function () {
    listener()
  });

  // history.replaceState
  window.addEventListener('replaceState', function () {
    listener()
  });

  window.history.pushState = createHistoryEvent('pushState');
  window.history.replaceState = createHistoryEvent('replaceState');

  function listener() {
    const stayTime = getStayTime(); // 停留時間
    const currentPage = window.location.href; // 頁面路徑
    lazyReport('visit', {
      stayTime,
      page: beforePage,
    })
    beforePage = currentPage;
  }

  // 頁面load監(jiān)聽
  window.addEventListener('load', function () {
    // beforePage = location.href;
    listener()
  });

  // unload監(jiān)聽
  window.addEventListener('unload', function () {
    listener()
  });

  // history.go()、history.back()、history.forward() 監(jiān)聽
  window.addEventListener('popstate', function () {
    listener()
  });
}

/**
 * hash路由監(jiān)聽
 */
export function hashPageTrackerReport() {
  let beforeTime = Date.now(); // 進入頁面的時間
  let beforePage = ''; // 上一個頁面

  function getStayTime() {
    let curTime = Date.now();
    let stayTime = curTime - beforeTime; //當(dāng)前時間 - 進入時間
    beforeTime = curTime;
    return stayTime;
  }

  function listener() {
    const stayTime = getStayTime();
    const currentPage = window.location.href;
    lazyReport('visit', {
      stayTime,
      page: beforePage,
    })
    beforePage = currentPage;
  }

  // hash路由監(jiān)聽
  window.addEventListener('hashchange', function () {
    listener()
  });

  // 頁面load監(jiān)聽
  window.addEventListener('load', function () {
    listener()
  });

  const createHistoryEvent = function (name) {
    const origin = window.history[name];
    return function(event) {
      //自定義事件
      // if (name === 'replaceState') {
      //   const { current } = event;
      //   const pathName = location.pathname;
      //   if (current === pathName) {
      //     let res = origin.apply(this, arguments);
      //     return res;
      //   }
      // }
      
      let res = origin.apply(this, arguments);
      let e = new Event(name);
      e.arguments = arguments;
      window.dispatchEvent(e);
      return res;
    };
  };

  window.history.pushState = createHistoryEvent('pushState');

  // history.pushState
  window.addEventListener('pushState', function () {
    listener()
  });
}

/**
 * 初始化配置
 * @param {*} options 配置信息
 */
function init(options) {
  // ------- 加載配置 ----------

  // -------- uv統(tǒng)計 -----------
  lazyReport('user', '加載應(yīng)用');
}

/**
 * 上報
 * @param {*} type 
 * @param {*} params 
 */
export function report(data) {
  const url = window['_monitor_report_url_'];

  // ------- fetch方式上報 -------
  // 跨域問題
  // fetch(url, {
  //   method: 'POST',
  //   body: JSON.stringify(data),
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  // }).then(res => {
  //   console.log(res);
  // }).catch(err => {
  //   console.error(err);
  // })

  // ------- navigator/img方式上報 -------
  // 不會有跨域問題
  if (navigator.sendBeacon) { // 支持sendBeacon的瀏覽器
    navigator.sendBeacon(url, JSON.stringify(data));
  } else { // 不支持sendBeacon的瀏覽器
    let oImage = new Image();
    oImage.src = `${url}?logs=${data}`;
  }
  clearCache();
}