import html2canvas from "html2canvas";
import { burySave, screenSave } from "@/api";

let routerArr = []; //每次流程路径
let lastRouterArr = []; //上一次流程路径
let putStartTime = null;

export default {
  install(Vue, options) {
    const { router } = options;
    // 监听路由数据
    router.beforeEach((to, from, next) => {
      document.title = to.meta.name || "";
      next();
      // 统计路由次数
      const { path, meta } = to;
      if (path == "/" || path == "/home") {
        lastRouterArr = routerArr;
        routerArr = [];
      } else {
        lastRouterArr = [];
      }
      // 保存每次流程
      routerArr.push({
        //页面路由信息
        sourceCode: from.path || "/", //开始页面编码（路由）
        sourceName: from.meta.name || "首页", //开始页面名称
        targetCode: path, //目标页面编码（路由）
        targetName: meta.name, //目标页面名称
      });
      // 后台桑基图请求数据
      try {
        let { productId } = JSON.parse(localStorage.getItem("deviceInfo"));
        if (!productId) return; //未获取设备信息取消
        burySave({
          // "deviceNum":"",
          // "productId": "",//产品id
          // "productName": "",//产品名称
          pageCode: path, //页面编码（页面路由）
          pageName: meta.name, //页面名称
          // "sceneDepth": 1,//场景维度
          depthValue: lastRouterArr.length > 0 ? lastRouterArr.length : "", //本次访问深度 每次回到首页为每次流程
          depthArr: lastRouterArr.length > 0 ? lastRouterArr : [],
          // "eventInfo": {//页面事件信息
          //     "businessCode": '',//业务场景编码
          //     "businessName": '',//业务场景名称
          //     // "eventCode": "u9xo59",//事件编码
          //     // "eventName": "ku7l71",//事件名称
          //     // "takeTime": 12345,//事件耗时（单位毫秒）
          //     "coordinate": `${event.pageX},${event.pageY}`//事件坐标(x,y)
          // },
          routeInfo: {
            //页面路由信息
            sourceCode: from.path || "/", //开始页面编码（路由）
            sourceName: from.meta.name || "首页", //开始页面名称
            targetCode: path, //目标页面编码（路由）
            targetName: meta.name, //目标页面名称
          },
        });
      } catch (error) {}
    });
    // 封装事件埋点
    Vue.directive("onEvent", {
      bind: (el, bindings) => {
        const { businessCode, businessName, eventCode, eventName, routers } =
          bindings.value;
        if (eventCode == "Click") {
          el.addEventListener("click", (event) => {
            const { meta, path } = routers;
            try {
              burySave({
                // "deviceNum":"",//设备编码
                // "productId": "",//产品id
                // "productName": "",//产品名称
                pageCode: path, //页面编码（页面路由）
                pageName: meta.name, //页面名称
                // "sceneDepth": 1,//场景维度
                // "depthValue": 1,//本次访问深度
                eventInfo: {
                  //页面事件信息
                  businessCode: businessCode, //业务场景编码
                  businessName: businessName, //业务场景名称
                  eventCode: eventCode, //事件编码
                  eventName: eventName, //事件名称
                  takeTime: 1000, //事件耗时（单位毫秒）
                  coordinate: `${event.pageX},${event.pageY}`, //事件坐标(x,y)生成热力图
                },
                // "routeInfo": {//页面路由信息
                //     "sourceCode": "6mq7ry",//开始页面编码（路由）
                //     "sourceName": "fxb3mk",//开始页面名称
                //     "targetCode": "fzrr3u",//目标页面编码（路由）
                //     "targetName": "fzrr3u"//目标页面名称
                // }
              });
            } catch (error) {}
          });
        }
        if (eventCode == "Put") {
          let input = el.querySelector("input");
          input.addEventListener("blur", (event) => {
            let endPutTime = new Date();
            const { meta, path } = routers;
            try {
              burySave({
                // "deviceNum":"",//设备编码
                // "productId": "",//产品id
                // "productName": "",//产品名称
                pageCode: path, //页面编码（页面路由）
                pageName: meta.name, //页面名称
                // "sceneDepth": 1,//场景维度
                // "depthValue": 1,//本次访问深度
                eventInfo: {
                  //页面事件信息
                  businessCode: businessCode, //业务场景编码
                  businessName: businessName, //业务场景名称
                  eventCode: eventCode, //事件编码
                  eventName: eventName, //事件名称
                  takeTime: endPutTime - putStartTime, //事件耗时（单位毫秒）
                },
                // "routeInfo": {//页面路由信息
                //     "sourceCode": "6mq7ry",//开始页面编码（路由）
                //     "sourceName": "fxb3mk",//开始页面名称
                //     "targetCode": "fzrr3u",//目标页面编码（路由）
                //     "targetName": "fzrr3u"//目标页面名称
                // }
              });
            } catch (error) {}
          });
          input.addEventListener("focus", (event) => {
            putStartTime = new Date();
            console.log(event, putStartTime, "@@@@@");
          });
        }
      },
    });
    // 封装函数
    Vue.prototype.$onEvent = function (obj) {
      const {
        businessCode,
        businessName,
        eventCode,
        eventName,
        routers,
        takeTime,
      } = obj;
      const { meta, path } = routers;
      try {
        burySave({
          // "deviceNum":"",//设备编码
          // "productId": "",//产品id
          // "productName": "",//产品名称
          pageCode: path, //页面编码（页面路由）
          pageName: meta.name, //页面名称
          // "sceneDepth": 1,//场景维度
          // "depthValue": 1,//本次访问深度
          eventInfo: {
            //页面事件信息
            businessCode: businessCode, //业务场景编码
            businessName: businessName, //业务场景名称
            eventCode: eventCode, //事件编码
            eventName: eventName, //事件名称
            takeTime: takeTime || 1000, //事件耗时（单位毫秒）
            // "coordinate": ``//事件坐标(x,y)生成热力图
          },
          // "routeInfo": {//页面路由信息
          //     "sourceCode": "6mq7ry",//开始页面编码（路由）
          //     "sourceName": "fxb3mk",//开始页面名称
          //     "targetCode": "fzrr3u",//目标页面编码（路由）
          //     "targetName": "fzrr3u"//目标页面名称
          // }
        });
      } catch (error) {}
    };
    // 热力图背景图生成
    const rightDom = document.createElement("div");
    rightDom.style.width = "200px";
    rightDom.style.height = "100px";
    rightDom.style.zIndex = 999;
    rightDom.style.position = "fixed";
    rightDom.style.top = 0;
    rightDom.style.right = "50%";
    rightDom.style.marginRight = "-100px";
    document.body.appendChild(rightDom);
    rightDom.addEventListener("dblclick", function () {
      const { meta, fullPath } = router.app.$route;
      html2canvas(document.body, {
        backgroundColor: null,
        allowTaint: false,
        useCORS: true,
        shadow: false,
      }).then((canvas) => {
        try {
          screenSave({
            // "deviceNum":"",//设备编码
            // "productId": "",//产品id
            // "productName": "",//产品名称
            pageCode: fullPath, //页面编码（页面路由）
            pageName: meta.name, //页面名称
            screenUrl: canvas.toDataURL("image/png"),
          });
        } catch (error) {}
      });
    });
  },
};
