From 56bda917a5aabb85ca7b4bb802dc307241882cda Mon Sep 17 00:00:00 2001
From: Chris Wang <chris.wang@tcam.co>
Date: Mon, 5 Sep 2022 01:21:58 +1000
Subject: [PATCH] Add methods for find spm and report spm

---
 src/components/HelloWorld.vue | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..48088e9 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="hello" data-spma="aa">
-    <span>show spm:{{spmText}}</span>
+  <div class="hello" data-spma="aa" @click="reportSPM">
+    <span>show spm:{{ spmText }}</span>
     <div data-spmb="bb">
       <button data-spmc="cc">Click it</button>
     </div>
@@ -14,12 +14,29 @@
 // TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
   name: 'HelloWorld',
-  data: ()=>{
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: 'xx.xx.xx',
+    };
+  },
+  methods: {
+    reportSPM(e) {
+      this.spmText = this.findSPM(e.target, []).reverse().join('.');
+    },
+
+    findSPM(node, spm) {
+      const keys = Object.keys(node.dataset);
+      const index = keys.findIndex((item) => item.startsWith('spm'));
+      if (index !== -1) {
+        spm.push(node.dataset[keys[index]]);
+      }
+      if (node.parentNode && node.parentNode !== document) {
+        this.findSPM(node.parentNode, spm);
+      }
+      return spm;
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->