<template>
  <section class="launch-app">
    <article :id="wxWapperId" v-show="!showImg"></article>
    <img v-show="showImg" @click="callAppAction" class="pic" :src="wxBtnImg" />
  </section>
</template>

<script>
/**
 * 微信文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
 * 新版API初始化前也需要 初始化wx.config
 *
 * 如果【打开app页面】有分享功能，需要自行初始化加入初始化功能
 * 即：(openTagList: ['wx-open-launch-app', 'wx-open-launch-weapp'])
 * 然后省去：this.checkInWechatFn(this.getSignMap); 此步骤为获取签名和初始化微信config
 *
 * 替换成最新wx-jssdk: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js
 *
 * 样式 必须在如上方: <style> 标签中添加
 *
 * DEMO中的appid为 云鹊医联公众号的appid & 配置的是test1环境可用。
 * 需要当前页面有分享之类的功能了，需要appid需要配置成当前页面用到的appid
 *
 * 微信类型 1、云鹊医联  5、云鹊健康  10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
 * 各个环境目前获取签名使用：type [dev: 1, test1: 15, uat: 30, prod: 5]
 * https://sc.yunqueyi.com/wechats/signs?url=${页面地址}&type=1
 */

import axios from "axios";

export default {
  props: {
    platform: {
      type: String,
      default: "h5" // h5, native
    },
    /**
     * 1. platform=h5配置带参URL即可 eg: https://phome.yunqueyi.com/mall?code=1234
     *    如果URL为空app未打开的情况下即为打开APP首页
     *
     * 2. platform=native URL值为 'androidClassName###iosClassName'
     */
    url: {
      type: String,
      default: ""
    },
    /**
     * 1. platform=h5 暂时不用填写
     * 2. platform=native 如果需要传参数，为 key:value 键值对
     */
    params: {
      type: Object,
      default: () => ({})
    },
    wxWapperId: {
      type: String,
      default: "wx-open-launch-app-id-1"
    },
    wxOpenId: {
      type: String,
      default: "wx-open-id-1"
    },
    appid: {
      type: String,
      default: "wx5103ed453ef2dbe8"
    },
    wxBtnImg: {
      type: String,
      default: "https://file.yunqueyi.com/h5/images/asimg/share-btn-l.png"
    }
  },
  data() {
    return {
      isIOS: false,
      isAndroid: false,
      isWechat: false,
      isWechatSuitable: false,
      signMap: null,
      extinfo: "",
      checkInWechatFn: () => {}
    };
  },

  computed: {
    // 如果可以使用，则插入微信标签
    showImg() {
      const si =
        this.isWechatSuitable != null && this.isWechatSuitable === false;
      console.log("showImg...", si);
      return si;
    }
  },
  watch: {
    showImg(value) {
      let _this = this;
      // 如果微信标签可用，则动态生成标签节点，并添加相应监听事件
      if (!value) {
        this.$nextTick(() => {
          const insertId = document.getElementById(this.wxWapperId);
          console.log("in watch insertId", insertId);
          if (!insertId) return;
          // const insertHtml = '';
          let script = document.createElement("script"); // 创建script内容插槽 避免template标签冲突
          script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
          let content = `<img src='${this.wxBtnImg}' 
          style="display: block; width: 340px; height: 50px;"/>`;
          script.text = content; // 自定义的html字符串内容
          // 唤起微信小程序
          // let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id" path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
          // 唤起APP
          let insertHtml = `<wx-open-launch-app id="${this.wxOpenId}"
            extinfo="${this.extinfo}"
            appid="${this.appid}" style="display: block; width: 340px; height: 50px;" >
            ${script.outerHTML}
            </wx-open-launch-app>`;
          console.log("insertHtml", insertHtml);
          insertId.innerHTML = insertHtml;
          this.$forceUpdate();
          // 注册监听事件
          this.$nextTick(() => {
            var btn = document.getElementById(this.wxOpenId);
            if (btn != null) {
              // 成功唤起事件
              btn.addEventListener(
                "launch",
                e => {
                  _this.$emit("launchApp");
                },
                true
              );
              // 唤起失败事件
              btn.addEventListener(
                "error",
                e => {
                  console.log("launchAppError...", e.detail);
                  if (e.detail && e.detail.errMsg === "launch:fail") {
                    window.location.href =
                      "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
                  }
                },
                true
              );
            }
          });
        });
      }
    }
  },
  created() {},
  mounted() {
    if (process.client) {
      const ua = navigator.userAgent.toLowerCase();

      this.isWechat = /micromessenger\/([\d.]+)/i.test(ua);
      this.isIOS = /(iPhone|iPad)/i.test(ua);
      this.isAndroid = /(Android)/i.test(ua);

      this.checkInWechatFn = this.checkInWechat();
      // 如果有微信分享进行的config设置，则此行不用打开
      // this.checkInWechatFn(this.getSignMap);
      // （根据项目需要）设置跳转的额外参数
      this.setPlatformMessage();
    }
  },
  methods: {
    callAppAction() {
      console.log("in callAppAction");
      this.$emit("launchApp");
      setTimeout(() => {
        this.$callApp(""); // 不用直接唤起
        // this.$callApp(this.url); // 可以直接唤起指定页面，但只限于是h5页面的URL
      }, 100);
    },

    // 设置平台跳转信息
    setPlatformMessage() {
      let modeCode = "M300";
      let path = this.url;
      const params = [];
      const keys = Object.keys(this.params);

      if (this.platform === "native") {
        modeCode = "M200";
        params.push({ key: "className", value: path });
      } else {
        if (path === "" || !path) {
          path = window.location.href;
        }
        console.log("传入的path", path);
        params.push({ key: "pageUrl", value: path });
      }

      for (let i = 0; i < keys.length; i++) {
        const key = keys[i];

        params.push({
          key,
          value: this.params[key]
        });
      }

      // 暂时不用直接唤起
      // this.extinfo = '';
      this.extinfo = JSON.stringify({
        name: "dispatchEventByModuleCode",
        param: {
          modeCode,
          jsonString: params
        }
      });
      console.log("回到APP参数2", JSON.parse(this.extinfo));
    },
    checkInWechat() {
      const self = this;
      const isWechatSuitable = self.checkWechatSuitable();

      self.isWechatSuitable = isWechatSuitable;
      console.log("是否展示功能", self.isWechatSuitable);

      // eslint-disable-next-line func-names
      return function(fn) {
        if (isWechatSuitable) fn();
        return self;
      };
    },
    checkWechatSuitable() {
      if (!this.isWechat) return false;

      const ua = navigator.userAgent.toLowerCase();
      const SUITABLE_WECHAT_VERSION = "7.0.12";
      const SUITABLE_IOS_VERSION = "10.3.0";
      const SUITABLE_ANDROD_VERSION = "5";
      // eslint-disable-next-line no-useless-escape
      const wechatInfo = ua.match(/micromessenger\/([\d\.]+)/i);
      const wechatVersion = wechatInfo[1];
      let suitWechat = false;
      let suitApp = false;
      let appVersion = "0";

      function versionCompare(pre, cur) {
        const pres = pre.split(".");
        const curs = cur.split(".");
        const maxL = Math.max(pres.length, curs.length);
        let flag = 0;

        for (let i = 0; i < maxL; i++) {
          const pv = pres.length > i ? pres[i] : 0;
          const cv = curs.length > i ? curs[i] : 0;
          const pn = isNaN(Number(pv)) ? pv.charCodeAt() : Number(pv);
          const cn = isNaN(Number(cv)) ? cv.charCodeAt() : Number(cv);

          if (cn !== pn) {
            flag = cn > pn ? 1 : -1;
            break;
          }
        }
        return flag !== -1;
      }

      suitWechat = versionCompare(SUITABLE_WECHAT_VERSION, wechatVersion);
      if (this.isIOS) {
        appVersion = ua
          .match(/cpu iphone os (.*?) like mac os/)[1]
          .replace(/_/g, ".");
        suitApp = versionCompare(SUITABLE_IOS_VERSION, appVersion);
      } else if (this.isAndroid) {
        // eslint-disable-next-line prefer-destructuring
        appVersion = ua.match(/android (.*?);/)[1];
        suitApp = versionCompare(SUITABLE_ANDROD_VERSION, appVersion);
      }

      console.log(
        `wechatVersion: ${wechatVersion}`,
        `appVersion: ${appVersion}`
      );

      return suitWechat && suitApp;
    },
    getSignMap() {
      /**
       * 各个环境目前使用：dev=1, test1=15, uat=30, prod=5
       * 微信类型 1、云鹊医联  5、云鹊健康  10、基层大众版 15、云鹊医 20、基层医生版 25、云鹊慧测试账号 30云鹊医导流公众号
       */
      const authUrl = encodeURIComponent(window.location.href);
      const url = `https://sc.yunqueyi.com/wechats/signs?url=${authUrl}&type=1`;

      axios.get(url).then(({ data: res }) => {
        if (res && res.code === "000000") {
          const { signMap } = res.data;

          this.signMap = signMap;
          this.initWeiXin(signMap);
        }
      });
    },
    initWeiXin(data) {
      this.$wx.config({
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        // debug: true,
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表
        openTagList: ["wx-open-launch-app", "wx-open-launch-weapp"] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
      });
      this.$wx.ready(() => {
        console.log("wx.ready is ok.");
      });
      this.$wx.error(res => {
        console.log("wx.error res => ", res);
      });
    }
  }
};
</script>
<style lang="less" scoped>
.launch-app {
  width: 100%;
  display: flex;
  justify-content: center;
  // min-height: 50px;
}
.pic {
  display: block;
  width: 340px;
  height: 50px;
  // width: 100%;
  // display: block;
}
</style>
