<template>
  <div @click="add();subtract(2)" @touchstart="mixin($event)">{{ num }}</div>
</template>

<view 
    data-event-opts="{{
        [
            ['tap', [['add'],['subtract',[2]]] ],
            ['touchstart', [['mixin',['$event']]] ]
        ]
    }}"
    bindtap="__e" bindtouchstart="__e"
    class="_div">
    {{num}}
</view>

//data-event-opts是一個(gè)二維數(shù)組，每個(gè)子數(shù)組代表一個(gè)事件類型EventTypes
const dataEventOpts: EventTypes;
interface EventTypes {
  [index:number]: EventType;
}
//事件類型的描述為EventType。EventType只有兩個(gè)元素，也就是說(shuō)EventType.length===2
interface EventType {
  //EventType的第一個(gè)元素是事件類型名稱
  //第二個(gè)元素是事件函數(shù)的數(shù)組EventFuncList，數(shù)組內(nèi)元素為被觸發(fā)的事件函數(shù)
  [index:number]: string | EventFuncList;
}
interface EventFuncList {
  //事件函數(shù)依舊是一個(gè)數(shù)組
  [index:number]: EventFunc;
}
//事件函數(shù)的元素為1或2個(gè)，分別是事件函數(shù)名稱和參數(shù)表Array<any>
interface EventFunc {
  [index:number]: string | Array<any>;
}

// @dcloudio/uni-mp-weixin/dist/index.js:1302
function handleEvent (event) {
  event = wrapper$1(event);

  // [['tap',[['handle',[1,2,a]],['handle1',[1,2,a]]]]]
  const dataset = (event.currentTarget || event.target).dataset;
  if (!dataset) {
    return console.warn('事件信息不存在')
  }
  const eventOpts = dataset.eventOpts || dataset['event-opts']; // 支付寶 web-view 組件 dataset 非駝峰
  if (!eventOpts) {
    return console.warn('事件信息不存在')
  }

  // [['handle',[1,2,a]],['handle1',[1,2,a]]]
  const eventType = event.type;

  const ret = [];

  eventOpts.forEach(eventOpt => {
    let type = eventOpt[0];
    const eventsArray = eventOpt[1];

    const isCustom = type.charAt(0) === CUSTOM;
    type = isCustom ? type.slice(1) : type;
    const isOnce = type.charAt(0) === ONCE;
    type = isOnce ? type.slice(1) : type;

    if (eventsArray && isMatchEventType(eventType, type)) {
      eventsArray.forEach(eventArray => {
        const methodName = eventArray[0];
        if (methodName) {
          let handlerCtx = this.$vm;
          if (handlerCtx.$options.generic) { // mp-weixin,mp-toutiao 抽象節(jié)點(diǎn)模擬 scoped slots
            handlerCtx = getContextVm(handlerCtx) || handlerCtx;
          }
          if (methodName === '$emit') {
            handlerCtx.$emit.apply(handlerCtx,
              processEventArgs(
                this.$vm,
                event,
                eventArray[1],
                eventArray[2],
                isCustom,
                methodName
              ));
            return
          }
          const handler = handlerCtx[methodName];
          if (!isFn(handler)) {
            throw new Error(` _vm.${methodName} is not a function`)
          }
          if (isOnce) {
            if (handler.once) {
              return
            }
            handler.once = true;
          }
          let params = processEventArgs(
            this.$vm,
            event,
            eventArray[1],
            eventArray[2],
            isCustom,
            methodName
          );
          params = Array.isArray(params) ? params : [];
          // 參數(shù)尾部增加原始事件對(duì)象用于復(fù)雜表達(dá)式內(nèi)獲取額外數(shù)據(jù)
          if (/=\s*\S+\.eventParams\s*\|\|\s*\S+\[['"]event-params['"]\]/.test(handler.toString())) {
            // eslint-disable-next-line no-sparse-arrays
            params = params.concat([, , , , , , , , , , event]);
          }
          ret.push(handler.apply(handlerCtx, params));
        }
      });
    }
  });

  if (
    eventType === 'input' &&
    ret.length === 1 &&
    typeof ret[0] !== 'undefined'
  ) {
    return ret[0]
  }
}

interface optionsList {
  options: Object | Map<any, any>,
  data: Object,
  properties: Object | Map<any, any>,
  behaviors: string | Array<any>,
  lifetimes: Object,
  pageLifetimes: Object,
  methods: Object,
  created: Function
}

methods: {
      __l: handleLink,   //建立組件父子關(guān)系
      __e: handleEvent   //事件處理器
}

// 劫持Component
const _componentProto_ = Component;
Component = function(options) {
  //options.methods內(nèi)有uniapp注入的事件處理器__e及mpHook
  Object.keys(options.methods).forEach(methodName => {
    //劫持事件處理器__e
    if (methodName == "__e") {
      eventProxy(options.methods, methodName)
    }
  })
  _componentProto_.apply(this, arguments);
}

function eventProxy(methodList, methodName) {
  const _funcProto_ = methodList[methodName];
  methodList[methodName] = function() {
    _funcProto_.apply(this, arguments);
    let prop = {};
    if (isObject(arguments[0])) {
      if (Object.keys(arguments[0]).length > 0) {
        //arguments[0]即為事件對(duì)象的屬性
      }
    }
  }
}

["type", "timeStamp", "target", "currentTarget", "mark", "detail", "touches", "changedTouches", "mut", "_userTap", "mp", "stopPropagation", "preventDefault"]

interface currentTarget {
  id: string,				//當(dāng)前元素的id
  dataset: Object		//當(dāng)前元素上由data-開(kāi)頭的自定義屬性組成的集合
}

<view mark:myMark="last" bindtap="bindViewTap">
  <button mark:anotherMark="leaf" bindtap="bindButtonTap">按鈕</button>
</view>
<script>
Page({
  bindViewTap: function(e) {
		//Object.keys(e.mark)即為觸發(fā)事件的節(jié)點(diǎn)經(jīng)過(guò)的所有mark
    e.mark.myMark === "last" // true
    e.mark.anotherMark === "leaf" // true
  }
})
</script>

interface tapDetail {
  x: number,  //距離文檔X軸零點(diǎn)的距離，零點(diǎn)為文檔左上角
  y: number		//距離文檔Y軸零點(diǎn)的距離
}

interface inputDetail {
  value: string,		//用戶輸入的值
  cursor: number,		//觸發(fā)事件時(shí)光標(biāo)所在的位置
  keyCode: number		//觸發(fā)事件時(shí)用戶輸入的keyCode
}

function eventProxy(methodList, methodName) {
  const _funcProto_ = methodList[methodName];
  methodList[methodName] = function() {
    _funcProto_.apply(this, arguments);
    let prop = {};
    if (isObject(arguments[0])) {
      if (Object.keys(arguments[0]).length > 0) {
        //記錄觸發(fā)頁(yè)面信息
        const pages = getCurrentPages();
        const currentPage = pages[pages.length - 1];
        prop["$page_path"] = currentPage.route; //頁(yè)面路徑
        prop["$page_query"] = currentPage.options || {}; //頁(yè)面攜帶的query參數(shù)
        const type = arguments[0]["type"];
        const current_target = arguments[0].currentTarget || {};
        const dataset = current_target.dataset || {};
        prop["$event_type"] = type;
        prop["$event_timestamp"] = Date.now();
        prop["$element_id"] = current_target.id;
        const eventDetail = arguments[0].detail;
        prop["$event_detail"] = eventDetail;
        if (!!dataset.eventOpts && type) {
          if (type == "tap") { //只記錄點(diǎn)擊事件
            const event_opts = dataset.eventOpts;
            if (Array.isArray(event_opts) && event_opts[0].length === 2) {
              let eventFunc = [];
              event_opts[0][1].forEach(event => {
                eventFunc.push({
                  name: event[0],
                  params: event[1] || ''
                })
              })
              prop["$event_function"] = eventFunc;
            }
          }
          postWeData(prop); //在此處上傳記錄的事件數(shù)據(jù)
        }
      }
    }
  };
}

(function() {
  const isObject = function(obj) {
    if (obj === undefined || obj === null) {
      return false;
    } else {
      return toString.call(obj) == "[object Object]";
    }
  };
  // 劫持Component
  const _componentProto_ = Component;
  Component = function(options) {
    //options.methods內(nèi)有uniapp注入的事件處理器__e及mpHook
    Object.keys(options.methods).forEach(methodName => {
      if (methodName == "__e") {
        //劫持事件處理器
        eventProxy(options.methods, methodName)
      }
    })
    _componentProto_.apply(this, arguments);
  }

  function eventProxy(methodList, methodName) {
    //事件處理器的劫持
  }

  const postWeData = function(data) {
    //埋點(diǎn)上傳器
    console.log(data)
  }
})()

//main.js
import './common/WeData/index.js'