// src/directives/track/click.js
import { sendUBT } from "../../utils/ctrip"

export default class Click {
  add(entry) {
    // console.log("entry", entry);
    const traceVal = entry.el.attributes["track-params"].value
    const traceKey = entry.el.attributes["trace-key"].value
    const { clickAction, detail } = JSON.parse(traceVal)
    const data = {
      action: clickAction,
      detail,
    }
    entry.el.addEventListener("click", function() {
      console.log("上報點擊埋點", JSON.parse(traceVal))
      console.log("埋點key", traceKey)
      sendUBT(traceKey, data)
    })
  }
}

// src/directives/track/exposure.js
import "intersection-observer"
import { sendUBT } from "../../utils/ctrip"

// 節(jié)流時間調(diào)整，默認100ms
IntersectionObserver.prototype["THROTTLE_TIMEOUT"] = 300

export default class Exposure {
  constructor() {
    this._observer = null
    this.init()
  }

  init() {
    const self = this

    // 實例化監(jiān)聽
    this._observer = new IntersectionObserver(
      function(entries, observer) {
        entries.forEach((entry) => {
          // 出現(xiàn)在視窗內(nèi)
          if (entry.isIntersecting) {
            // 獲取參數(shù)
            // console.log("埋點節(jié)點", entry.target.attributes);
            const traceKey = entry.target.attributes["trace-key"].value
            const traceVal = entry.target.attributes["track-params"].value
            console.log("traceKey", traceKey)
            console.log("traceVal", traceVal)

            const { exposureAction, detail } = JSON.parse(traceVal)
            const data = {
              action: exposureAction,
              detail,
            }

            // 曝光之后取消觀察
            self._observer.unobserve(entry.target)

              self.track(traceKey, data)
          }
        })
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0.5, // 元素出現(xiàn)面積，0 - 1，這里當(dāng)元素出現(xiàn)一半以上則進行曝光
      }
    )
  }

  /**
   * 元素添加監(jiān)聽
   *
   * @param {*} entry
   * @memberof Exposure
   */
  add(entry) {
    this._observer && this._observer.observe(entry.el)
  }

  /**
   * 埋點上報
   *
   * @memberof Exposure
   */
  track(traceKey, traceVal) {
    // console.log("曝光埋點", traceKey, JSON.parse(traceVal));
    sendUBT(traceKey, traceVal)
  }

}

// src/directives/track/index.js
import Vue from "vue"
import Click from "./click"
import Exposure from "./exposure"

// 實例化曝光和點擊
const exp = new Exposure()
const cli = new Click()

Vue.directive("track", {
  bind(el, binding) {
    // 獲取指令參數(shù)
    const { arg } = binding
    arg.split("|").forEach((item) => {
      // 點擊
      if (item === "click") {
        cli.add({ el })
      } else if (item === "exposure") {
        exp.add({ el })
      }
    })
  },
})

import "./directives/track"

<img
  ref="imageDom"
  trace-key="o_img"
  v-track:click|exposure
  :track-params="
    JSON.stringify({
      exposureAction: 's_pictures',
      clickAction: 'c_pictures',
      detail: {
        value: '測試',
      },
    })
  "
/>